【初級編10】JavaScriptの乱数についてマスターしよう

JavaScript入門

本記事ではJavaScriptの乱数について解説します。

乱数が使えるようになると、サイコロやおみくじなどのゲームが作れます

ただ、乱数の作り方はややこしい面もあるので、そのあたりも踏まえて詳しく解説していきましょう。

JavaScriptの乱数とは?

乱数とは規則性がないランダムな数値のことです。

基本的にコンピューターは乱数の生成ができません。

なぜならコンピューターは、計算に基づいてデータを出力するため、適当に何らかの数字を1つ出す、ということが不可能なのです。

そのため、乱数を作る場合は、「擬似乱数」と呼ばれる値で代替することになります。

擬似乱数は「シード」と呼ばれる値を元に計算します。

JavaScriptではこのシードを指定することで、乱数に近いものを生成できるのです。

JavaScriptの乱数の基本

それではJavaScriptで乱数を作るやり方をみていきましょう。

以下の項目に分けて解説していきます。

  • 0から1までの乱数を作る
  • 0から10までの乱数を作る
  • 乱数の最小値を指定する
  • 乱数を整数のみにする

この4つのやり方を覚えれば、ひとまず乱数生成で困ることはないでしょう。

0から1までの乱数を作る

乱数を作る場合はMathオブジェクトが必要です。

MathオブジェクトとはJavaScriptで数値計算を行うためのライブラリです。

Mathオブジェクトは標準で用意されているライブラリのため、外部ファイルをインストールせずに使えます。

JavaScriptのライブラリについて詳しく知りたい方は【初級編7】JavaScriptのライブラリの使い方を学ぼうをお読みください。

Mathオブジェクトには、randomメソッドというものがあり、こちらを利用します。

○コード例

<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var random = Math.random();
document.write(random)
</script>
</body>
</html>

○実行結果

randomメソッドは、0から1未満の少数をランダムで表示します。

このようにすることで、乱数を生成することが可能です。

0から10までの乱数を作る

「0から1未満」ではなく「0から10の範囲」で乱数を作る方法をみていきましょう。

○コード例

<script>
var random = Math.random()*11;
document.write(random)
</script>

○実行結果

randomメソッドは、0から1未満の数字をランダムで表示します。

つまり、0から10までの乱数を発生させたいなら、randomメソッドで生成した数に10をかければ良いのです。

と、言いたい所ですが、randomメソッドは厳密には、「0~1」ではなく「0~0.9999・・・・」の少数を生成しています。

そのため10をかけると、「1~9.9999・・・・」の範囲になってしまいます。

そこで10ではなく11をかけることで、10も表示がされるように調整します。

同じ要領で「0~20」の数値を発生させたい場合も、21をかけるようにします。

乱数の最小値を指定する

乱数の最小値を、0ではなく他の数値にする方法をみていきましょう。

今回は「5~10」までの数値を生成してみます。

○コード例

<script>
var random = Math.random() * 6 + 5;
document.write(random)
</script>

○実行結果

「5~10」までの数値を生成する場合は6をかけた後に「+5」すれば良いです。

まず6をかけることで、「0~5」までの数値が生成されます。

その後に「+5」すれば「5~10」までの範囲にすることが可能なのです。

まとめると、乱数の最小値、最大値を指定する場合、次のように記述します。

Math.random() * ( 最大値 – 最小値 + 1 ) + 最小値;

乱数の範囲を決めるのはややこしい部分もありますが、この公式に当てはめて考えれば問題ありません。

たとえば、「3~14」の範囲で乱数を発生させたい場合、

Math.random() * ( 14 – 3 + 1 ) + 3;
= Math.random() * 12 + 3;

このように計算します。

乱数を整数のみにする

最後に乱数の数値を整数のみにする方法をみていきましょう。

○コード例

<script>
var random = Math.floor(Math.random() * 11);
document.write(random)
</script>

○実行結果

Mathライブラリにはfloorメソッドがあります。

これは、小数点を切り捨てるためのメソッドです。

floorメソッドで小数点を切り捨てれば、0~10までの整数が表示されます。

乱数を整数のみにすれば、おみくじなどのゲームを作る場合にも使えるでしょう。

まとめ

本記事ではJavaScriptで乱数を作る方法、を解説しました。

randomメソッドの基本的な使い方がお分かり頂けたかと思います。

JavaScriptでは乱数が必要になってくる場面が多くあります。

randomメソッドを使えば乱数は生成できますが、乱数の最大値や最小値の決め方がややこしいので、そこだけ注意しましょう。

本記事でJavaScriptの初級編は終了します。お疲れさまでした!

挫折率が高い??プログラミング学習のポイント
駆け出しエンジニアが一緒に学ぶ
CANITは、Progateやドットインストールで独学している人達同士をつなげます。駆け出しエンジニアのあなたのためのSNSです。
JavaScript入門
【この記事を書いた人】
谷津弘樹

某自社開発のIT企業に勤めていた元webプログラマーです。主にサーバーサイド側を担当し、phpを使った開発経験があります。現在は退職しフリーランスライターとして活動中。IT系の記事を主に執筆し生計を立てています。

CANIT
タイトルとURLをコピーしました