【JavaScript入門】Math.random()の使い方｜ランダムな数字を生成する基本をやさしく解説

JavaScriptを学び始めたばかりの方にとって、「ランダムな数字を作る方法」はよく使うけれど、少しわかりにくいテーマかもしれません。
この記事では、JavaScriptの基本メソッドである「Math.random()」の使い方をやさしく解説します。

0以上1未満の小数がどのように生成されるのかから、整数のランダムな数字を作るテクニックまで、実際にコードを動かしながら理解を深めていきましょう。
Webアプリ開発に役立つヒントも紹介していますので、ぜひ気軽に試してみてくださいね。

Math.random()単体の挙動をチェック

JavaScriptの Math.random() は、0以上1未満（0〜0.999…）の間のランダムな小数を返すメソッドです。

このままでは少し使いにくいですが、ランダムな数字を作る基本中の基本なので、まずは動きをしっかり理解しましょう。

👇 下のボタンをクリックして、ランダムな小数が生成される様子を確認してみてください。

Math.floor()は、小数点以下を切り捨てて整数を返すメソッドです。

今回は、Math.random()で生成された「0以上1未満」のランダムな小数に10を掛け、その結果の小数点以下を切り捨てています。

こうすることで、0から9までの整数がランダムに生成されます。
もし10を5に変えれば、0から4までの整数が生成されることになります。

👇こちらのボタンを押して、Math.floor(Math.random() * 10)の結果を実際に確認してみてください。

Math.floor(Math.random() * 10) を使うと、0から9までの整数がランダムに生成されます。
これに +1 を加えることで、1から10までの整数が得られます。

つまり、Math.floor(Math.random() * 10) + 1 と書けば、1〜10のランダムな整数を簡単に作ることができます。

同じように、範囲を変えたい場合は掛ける数と加える数を調整すればOKです。

👇たとえば、1〜5の整数を生成したい場合はこうなります。実行して確認してみてください。

🐎 コンピュータに数字を選んでもらう競馬予想アプリ
👉 適当競馬予想アプリをJavaScriptで作ってみた

私は動画学習サービス「Udemy」でHTML・CSS・JavaScriptを学びながら、ウェブアプリを作っています。

このサイトで紹介しているものは初心者レベルの知識で作れるアプリばかりです。

ウェブ開発に興味がある方は、Udemyで勉強してみてはいかがでしょうか。
私が受講した講座はこちら👇

📘【世界で90万人が受講】Web Developer Bootcamp（日本語版）

※このリンクは広告です（アフィリエイトリンク）

セール情報：
Udemyではほぼ毎月セールが開催されていて、90％オフになることもあります。
購入するならセール期間が断然おトクです！