JavaScriptで「あの数字」をピタリと当てる！ Math.randomの魔法と、ちょっとしたコツ
Web制作や開発の世界に足を踏み入れたばかりの皆さん、こんにちは！ JavaScriptって、本当に色々なことができる魔法の杖みたいなものですよね。今日は、その中でも特に「ランダムな数字」を生成する、とっても面白い機能について、一緒に深掘りしていきましょう。
「ランダムな数字」って聞くと、なんだか難しそう？ 大丈夫、大丈夫！ 実は、私たちが普段使っている身近なものと比べると、意外とイメージしやすいんです。
0から1の間の「どこか」を狙う、Math.randomの秘密
JavaScriptでランダムな数字を生成する時、まず最初に出てくるのが `Math.random()` という関数です。これは、まるでサイコロを振るように、0以上1未満のどこかの数をランダムに返してくれます。
「0以上1未満って、具体的にどんな数？」って思いますよね。
例えば、こんな数です。
- `0.123456789…`
- `0.987654321…`
- `0.5` （これはちょうど真ん中！）
- `0.000000001…` （これは0にすごく近い！）
イメージとしては、透明な定規があって、その0cmから1cmの間のどこかに、ランダムに点を打つような感じです。その点は、0cmのすぐ近くかもしれないし、1cmのすぐ近くかもしれない。あるいは、ど真ん中の0.5cmのあたりかもしれません。
でも、ここがちょっと面白いところ。`Math.random()` が返してくれるのは、小数点以下の数字なんですね。私たちが欲しいのは、サイコロの目みたいな「1」とか「2」とか、そういう「整数」だったりします。
サイコロの目を出すために、ちょっと「魔法」をかけよう！
「でも、0から1の間の数字なんて、どうやってサイコロの目になるの？」って思いますよね。ご安心ください！ ここで、私たちが「ちょっとした魔法」をかけるんです。
1. サイコロの「面」を増やす（掛け算の魔法）
まず、サイコロの目を「1」から「6」までにするために、どうしますか？ そう、6面サイコロなら、6倍すればいいですよね！
`Math.random()` が返してくれた「0から1の間の数」に、欲しいサイコロの面の数（例えば6）を掛け算してみましょう。
// 0から1の間のランダムな数に6を掛けてみる
let randomNum = Math.random() 6;
console.log(randomNum); // 例えば、0.789… 6 = 4.734… のような数が出てくる
この `randomNum` は、今度は 0以上6未満の数 になります。
例えば、`Math.random()` が `0.1` を返したら、`0.1 6 = 0.6` になります。
もし `Math.random()` が `0.99` を返したら、`0.99 6 = 5.94` になります。
つまり、掛け算をすることで、ランダムな数の「範囲」を広げることができるんですね！
2. 小数点以下を切り捨てる（parseIntの魔法）
でも、まだ `4.734…` みたいに小数点がついたままです。サイコロの目には、小数点はありませんよね。そこで登場するのが `parseInt()` という関数です。
`parseInt()` は、数字の文字列や、小数点がついた数字から「整数」だけを取り出す魔法です。
例えば、`parseInt(4.734)` とすると、`4` という整数だけを取り出してくれます。小数点以下は、きれいに切り捨ててくれるんです。
// さっきの randomNum に parseInt の魔法をかける
let randomNum = Math.random() 6;
let integerNum = parseInt(randomNum);
console.log(integerNum); // 例えば、4.734… が 4 になる
これで、0から5までの整数 がランダムに生成されました！ 0, 1, 2, 3, 4, 5。おや？サイコロの目は1から6なのに、0から5になっちゃった！
3. 始まりを「1」にする（足し算の魔法）
サイコロの目は「1」から始まってほしいですよね。今の結果は「0」から始まっています。
そこで、最後に「1」を足してあげましょう！
// 0から5までのランダムな整数に1を足して、1から6の整数にする
let randomNum = Math.random() 6;
let integerNum = parseInt(randomNum);
let finalDiceRoll = integerNum + 1;
console.log(finalDiceRoll); // 1, 2, 3, 4, 5, 6 のどれかがランダムに出る！
これで、ついに！ 1から6までのランダムな整数 が生成できました！ 🎉
特定の範囲の整数を生成する「定石パターン」を覚えよう！
この「掛け算 → parseInt → 足し算」の流れは、JavaScriptで特定の範囲の整数を生成する時の、まさに「定石パターン」なんです。
例えば、
- 1から10までのランダムな整数が欲しい場合:
- 10面サイコロを振るイメージで、`Math.random() 10`
- 小数点以下を切り捨てて `parseInt()`
- 1から始めるために `+ 1`
// 1から10までのランダムな整数を生成する
let randomNum1To10 = parseInt(Math.random() 10) + 1;
console.log(randomNum1To10);
- 100から200までのランダムな整数が欲しい場合:
- まず、欲しい範囲の「幅」を考えます。200 – 100 = 100 ですね。
- なので、`Math.random() 100` で、0から99までのランダムな数を作ります。
- 小数点以下を切り捨てて `parseInt()`
- そして、一番小さい数である「100」を足してあげます。
// 100から200までのランダムな整数を生成する
let rangeWidth = 200 – 100; // 範囲の幅を計算 (100)
let randomNum100To200 = parseInt(Math.random() rangeWidth) + 100;
console.log(randomNum100To200);
このパターンを覚えておくと、色々な場面で「よし、この範囲の数字をランダムに！」と、自信を持ってコードを書けるようになりますよ。
ちょっとだけ「浮動小数点数」の注意点
ここで、ちょっとだけ「浮動小数点数」のお話。`Math.random()` が返すのは、まさにこの浮動小数点数（小数点がついた数）です。
普段の感覚ではあまり気にならないかもしれませんが、コンピューターの世界では、この浮動小数点数を扱うときに、ごくごく稀に、「あれ？ こんなはずじゃなかったのに…」というような、ほんのわずかな誤差が生じることがあります。
例えば、`0.1 + 0.2` を計算すると、私たちが期待するのは `0.3` ですよね。でも、JavaScript（や他の多くのプログラミング言語）では、これが `0.30000000000000004` のようになってしまうことがあるんです。
`Math.random()` も、内部的にはこのような計算をしているため、理論上は「ぴったり1」になることはありません。常に「1未満」です。でも、私たちが `parseInt()` で小数点以下を切り捨ててしまうので、この浮動小数点数特有の、ほんのわずかな誤差が問題になることは、ほとんどありません。
むしろ、「0以上1未満」という定義をしっかり理解していること、そして `parseInt()` で整数に変換するという操作を正しく行うことの方が、ずっと重要なんです。
まとめ：ランダム生成は、手順が大事！
今日のまとめです！
- `Math.random()` は、0以上1未満のランダムな数（小数点つき）を返します。
- 特定の範囲の整数を生成したいときは、以下の手順が定番です！
1. 掛け算: 欲しい範囲の「幅」を掛けて、ランダムな数の範囲を広げる。
2. `parseInt()`: 小数点以下を切り捨てて、整数にする。
3. 足し算: 欲しい範囲の「最小値」を足して、開始位置を調整する。
この「魔法」を使いこなせるようになれば、ゲームのアイテムドロップ、くじ引きの抽選、あるいはランダムな表示など、JavaScriptでできることの幅がぐっと広がりますよ。
さあ、皆さんもぜひ、この `Math.random()` の魔法を試してみてください！ コードを書きながら「なるほど！」と思える瞬間が、きっと訪れるはずです。応援しています！
コメント