JS：JavaScriptでの乱数の使い方

JavaScriptでの乱数の使い方をサンプルプログラムを交えて紹介します。

ドキュメントはMDNのサイトにあります。

Math.random() - JavaScript | MDN

Math.random() 関数は、 0 以上 1 未満 (0 は含むが、 1 は含まない) の範囲で浮動小数点の擬似乱数を返します。その範囲ではほぼ均一な分布で、ユーザーは範囲の拡大をすることができ...

JavaScriptの乱数は浮動小数点数です。

MDNのサイトによると

Math.random()関数は、 0 以上 1 未満 (0 は含むが、 1 は含まない) の範囲で浮動小数点の擬似乱数を返します。

となっています。

まずは実際にどういうJavaScriptではどのような乱数が得られるのかコンソールに表示させてみます。

Math.random()の値をそのまま表示させる
乱数で得る事ができる整数の桁数を上げる
整数の乱数を得る

Math.random()の値をそのまま表示させる

random1.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Math.random()をコンソールに表示してみる</title>
</head>
<body>
	<h1>Math.random()をコンソールに表示してみる</h1>
	<script>
		// 10個の乱数を表示
		for(let i=0; i<10; i++){
			console.log(Math.random());
		}
	</script>
</body>
</html>

実行イメージ（乱数の値は変化します）

注）ブラウザ画面上は何も表示されません。開発者ウインドウのConsoleタブ等で確認してください。

Chromeの場合
右クリック　＞　検証　選択

0.22753785699082663
0.23600857817162058
0.5530183966156632
0.10049255576480554
0.5093659266403312
0.4565910022925508
0.8945789428065647
0.9776469970372537
0.6694781427046763
0.45191599548904016

ご覧のように0以上1未満の乱数となります。
整数として乱数を得たい場合は次のようにします。

乱数で得る事ができる整数の桁数を上げる

乱数が0以上1未満ですので、考え方としては小数点以下第1位に限って言えば、0.0～0.9となります。

もしこの値に10を掛けた場合、0～9の値を得る事が出来ます。

プログラムで確認してみます。

random2.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>乱数で得る事ができる整数の桁数を上げる</title>
</head>
<body>
	<h1>乱数で得る事ができる整数の桁数を上げる</h1>
	<script>
		// 10個の乱数を表示
		for(let i=0; i<10; i++){
			let r = Math.random() * 10;
			console.log(r);
		}
	</script>
</body>
</html>

実行イメージ（コンソールで確認してください）

8.40250500729054
9.516069847264541
6.8407160583848725
1.489118908592273
2.531200394959894
3.47236900691942
3.2135347017317506
3.4255628151274964
1.4147581241966023
4.487882859065535

大方0～9の範囲となっています。
しかし気になるのは実数形式である点です。JavaScriptは変数の値をあまり気にせず使えてしまう言語ですが、ゲームのキャラクタのXY座標など整数の乱数を得たいときもあります。

そんなときは与えられた数値以下の最大の整数を返してくれるMath.floor()関数を使うといいでしょう。

Math.floor() - JavaScript | MDN

Math.floor() 関数は与えられた数値以下の最大の整数を返します。

整数の乱数を得る

random3.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>整数の乱数を得る</title>
</head>
<body>
	<h1>整数の乱数を得る</h1>
	<script>
		// 10個の乱数を表示
		for(let i=0; i<10; i++){
			let r = Math.floor(Math.random() * 10);
			console.log(r);
		}
	</script>
</body>
</html>

実行イメージ（コンソールで確認してください）