JavaScriptでランダムな数値を取得したい場合、Math.random()
を使用します。今回は、Math.random()
の基本的な使い方から注意点までをまとめていきたいと思います。
目次 非表示
Math.random()
は、0以上1未満のランダムな浮動小数点数(0.0 以上 1.0 未満)を返すメソッドです。
console.log(Math.random()); // 例: 0.4738630458528954
ランダムな整数を取得したい場合は、適切な範囲に変換する必要があります。
console.log(Math.floor(Math.random() * 10)); // 例: 3
上記は、Math.random()
の結果を10
倍し、Math.floor()
で小数点以下を切り捨てることで、0以上9以下の整数を取得しています。
例えば、5以上15以下のランダムな整数を取得する場合、次のようにします。
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)をランダムに取得するコードです。
function rollDice() {
return Math.floor(Math.random() * 6) + 1;
}
console.log(rollDice()); // 例: 6
function getRandomElement(array) {
const index = Math.floor(Math.random() * array.length);
return array[index];
}
const colors = ["赤", "青", "緑", "黄色", "ピンク", "黒"];
console.log(getRandomElement(colors)); // 例: "青"
Math.random()
は予測可能なアルゴリズムを使用しているため、暗号用途には向いていません。セキュリティが求められる場面では、Web Crypto API の crypto.getRandomValues()
を使用しましょう。
const array = new Uint32Array(1);
crypto.getRandomValues(array);
console.log(array[0]);
Math.random()
を何度も呼び出すと、意図しない偏りが発生する可能性があります。特にゲームや統計的な用途では、適切なアルゴリズムを選定することが重要です。
ランダムな要素をユーザーインターフェースに適用する際は、アクセシビリティに配慮する必要があります。例えば、色の選択に Math.random()
を使用する場合、十分なコントラストを確保し、視認性を損なわないように注意しましょう。
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に適用する際は、アクセシビリティ(色のコントラストなど)にも配慮しましょう。