JavaScriptのMath.random()を使って、簡単に乱数を生成しよう
JavaScriptでゲームの開発やデータシミュレーションを行う際、乱数を生成する必要がよくあります。
この記事では、Math.random()メソッドを使用して、0以上1未満の乱数を生成する方法を詳しく解説します。
基本的な乱数の生成: Math.random()
Math.random()メソッドは、0以上1未満の範囲で浮動小数点の乱数を生成します。
この乱数は、一様分布に基づいてランダムに選ばれます。以下の例では、Math.random()を使って基本的な乱数を生成する方法を示しています。
ソースコード例
|
1 2 3 |
console.log(Math.random()); // 0以上1未満の乱数 console.log(Math.random()); console.log(Math.random()); |
このコードを実行すると、毎回異なる0以上1未満の乱数が出力されます。
出力結果
0.509847114...
0.732421875...
0.091827364...
指定範囲での乱数生成
より実用的なシナリオでは、特定の範囲内で乱数を生成することが多いです。
例えば、1から10までの整数の乱数が必要な場合、Math.random()を適切にスケーリングして利用します。以下の例では、特定範囲での乱数生成方法を示しています。
ソースコード例
|
1 2 3 4 5 6 7 8 9 |
function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } console.log(getRandomInt(1, 10)); console.log(getRandomInt(1, 10)); console.log(getRandomInt(1, 10)); |
この関数は指定された最小値と最大値の間で整数の乱数を生成します。
出力結果
4
7
2
乱数を使った配列のシャッフル
乱数は配列の要素をシャッフルするのにも役立ちます。
以下の例では、Math.random()を使って配列の要素をランダムに並び替える方法を示しています。
ソースコード例
|
1 2 3 4 5 6 7 8 9 10 |
function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } const myArray = [1, 2, 3, 4, 5]; console.log(shuffleArray(myArray)); |
この関数は指定された配列の要素をランダムに並べ替えます。
出力結果
[3, 5, 1, 4, 2]
乱数を使った色の生成
乱数は、ウェブデザインやグラフィックデザインでランダムな色を生成するのにも使えます。
以下の例では、ランダムな色を生成する関数を紹介します。
ソースコード例
|
1 2 3 4 5 6 7 8 9 10 |
function getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } console.log(getRandomColor()); |
この関数はランダムな16進数の色コードを生成します。
出力結果
#3F5C7A
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
まとめ
この記事では、JavaScriptのMath.random()を使用して、基本的な乱数生成から配列のシャッフル、ランダムな色の生成まで、様々な方法を詳しく解説しました。
乱数はよく使う場面があるので、ぜひ覚えてくださいね！
最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！
