JavaScriptには「ランダム（乱数）」を扱うための便利な機能があります。
その代表が Math.random() です。
乱数と聞くと難しそうに感じるかもしれませんが、実際にはとてもシンプルで、
ガチャ・おみくじ・ランダム表示など、Web制作でよく使われています。
この記事では、Math.random() の基本から、実際に何が作れるのか までを、
サンプルコード付きで分かりやすく解説します。
Math.random()とは？
Math.random() は 0以上1未満のランダムな数値 を生成するJavaScriptの関数です。
Math.random();実行結果の例：
0.348293
0.912834
0.057382このままでは少し使いづらいですが、工夫すると整数や配列のランダム取得 ができます。
Math.random()の使い方
小数をそのまま使う基本形
const randomNumber = Math.random();
console.log(randomNumber);ただし、Web制作では「1〜10の数字」や「配列から1つ選ぶ」ことが多いため、
次のような書き方がよく使われます。
1〜10の整数をランダムで生成する
const randomNumber = Math.floor(Math.random() * 10) + 1;
console.log(randomNumber);ポイントは以下の通りです。
Math.random() * 10→ 0〜9.999…Math.floor()→ 小数点切り捨て+ 1→ 1〜10に調整
この形は ほぼ必須パターン なので覚えておきましょう。
Math.random()で実現できるもの
ここでは、Math.random() を使って作れる代表的な例を3つ紹介します。
ランダムな数字を表示する
ボタンを押すたびに、1〜6の数字を表示する簡単なサンプルです。
function showRandomNumber() {
const number = Math.floor(Math.random() * 6) + 1;
console.log(number);
}サイコロや抽選番号などに応用できます。
配列からランダムで1つ選ぶ
おみくじやメッセージ表示によく使われるパターンです。
const messages = ['大吉', '中吉', '小吉', '凶'];
const randomIndex = Math.floor(Math.random() * messages.length);
console.log(messages[randomIndex]);配列の長さを使うことで、
要素数が変わってもコードを書き換えずに使える のがポイントです。
ランダムな背景色を設定する
Webページに動きをつけたいときにおすすめです。
function changeColor() {
const colors = ['red', 'blue', 'green', 'yellow'];
const index = Math.floor(Math.random() * colors.length);
document.body.style.backgroundColor = colors[index];
}ボタンと組み合わせるだけで、
「クリックすると色が変わるページ」 が簡単に作れます。
まとめ
JavaScriptの Math.random() は、シンプルながら使い道が非常に多い関数です。
初学者のうちは「何かをランダムに表示する」だけでも十分な練習になります。
ぜひ自分なりにアレンジして、JavaScriptに慣れていきましょう。
NAMEKO.ONLINE では、Web開発初学者向けのコンテンツを発信しております！
ぜひ、多くの方にシェアいただけますと嬉しいです！
コメント