【JavaScript】Math.random – ランダムな数値を取得

JavaScriptでランダムな数値を取得したい場合、Math.random() を使用します。今回は、Math.random() の基本的な使い方から注意点までをまとめていきたいと思います。

Math.random() とは?

Math.random() は、0以上1未満のランダムな浮動小数点数(0.0 以上 1.0 未満)を返すメソッドです。

JavaScript
console.log(Math.random()); // 例: 0.4738630458528954

基本的な使い方

ランダムな整数を取得したい場合は、適切な範囲に変換する必要があります。

0以上10未満の整数を取得

JavaScript
console.log(Math.floor(Math.random() * 10)); // 例: 3

上記は、Math.random()の結果を10倍し、Math.floor()で小数点以下を切り捨てることで、0以上9以下の整数を取得しています。

任意の範囲の整数を取得

例えば、5以上15以下のランダムな整数を取得する場合、次のようにします。

JavaScript
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(getRandomInt(5, 15)); // 例: 8

この関数では、Math.random()の結果を(max - min + 1)倍し、minを加えることで、指定した範囲内の整数を取得できます。

サンプルコード

サイコロを振る

サイコロの目(1から6)をランダムに取得するコードです。

JavaScript
function rollDice() {
  return Math.floor(Math.random() * 6) + 1;
}

console.log(rollDice()); // 例: 6

配列からランダムな要素を取得

JavaScript
function getRandomElement(array) {
  const index = Math.floor(Math.random() * array.length);
  return array[index];
}

const colors = ["赤", "青", "緑", "黄色", "ピンク", "黒"];
console.log(getRandomElement(colors)); // 例: "青"

使用時の注意点

Math.random() は暗号学的に安全ではない

Math.random()は予測可能なアルゴリズムを使用しているため、暗号用途には向いていません。セキュリティが求められる場面では、Web Crypto API の crypto.getRandomValues()を使用しましょう。

JavaScript
const array = new Uint32Array(1);
crypto.getRandomValues(array);
console.log(array[0]);

ランダムな結果を必要以上に呼び出さない

Math.random()を何度も呼び出すと、意図しない偏りが発生する可能性があります。特にゲームや統計的な用途では、適切なアルゴリズムを選定することが重要です。

アクセシビリティの考慮

ランダムな要素をユーザーインターフェースに適用する際は、アクセシビリティに配慮する必要があります。例えば、色の選択に Math.random()を使用する場合、十分なコントラストを確保し、視認性を損なわないように注意しましょう。

JavaScript
function getRandomAccessibleColor() {
  const colors = ["#000000", "#FFFFFF", "#FF0000", "#00FF00", "#0000FF"];
  return getRandomElement(colors);
}

console.log(getRandomAccessibleColor()); // 例: "#000000"

さいごに

Math.random()は非常に便利なメソッドですが、以下の点に注意して使用しましょう。

  • Math.random()は 0 以上 1 未満のランダムな数値を生成します。
  • 整数を取得するには Math.floor()Math.ceil()を活用しましょう。
  • Math.random()は暗号学的な安全性を持たないため、セキュアな用途にはcrypto.getRandomValues()を使用しましょう。
  • ランダムな要素をUIに適用する際は、アクセシビリティ(色のコントラストなど)にも配慮しましょう。