JavaScriptでランダムな数字をつくる

JavaScriptでランダムな数字をつくる方法をメモしておきます。

ランダムな数字をつくることができれば、それをもと予想外の結果が表示できて、ゲーム性が生まれますよね。

ランダムな数字をつくるには
やってみよう
このままだと数字の１より小さい数ばかり
ランダムな整数をつくりたい
小数点以下を切り捨てるには
やってみよう
かける数字で最大値が決まる

ランダムな数字をつくるには

JavaScriptでランダムな数字をつくるには…

これです
↓

 Math.random()

これで、小数点以下のランダムな数字ができます。

小数点以下のランダムな数字っていうのは、たとえばこういうことです。
↓

 0.7089312012169603

あとでこれを整数にしたりもできますが、それはこのページの後半で書くとして、ひとまずこのまま話を進めますね。

やってみよう

では…

実際にどんなふうに記述すればいいのか、ちょっとやってみます。

<html>
<head>
</head>
<body>

<script>

// 変数aを使う宣言
var a;

//変数aにランダムな数字を代入
a=Math.random(); 

//aを画面に表示
document.write(a);
 
</script>

</body>
</html>

※少しでもわかりやすいように、JavaScriptのところは丁寧に、HTMLの部分は究極にあっさりと書いています。

緑色の部分がJavaScriptです。

これをメモ帳などのエディタにコピペしてHTML形式で保存し、ファイルを開くと…

ブラウザの画面に小数点以下のランダムな数字が表示されます。

このままだと数字の１より小さい数ばかり

これでたしかにランダムな数字はつくれるようになりました。

でも、この方法だと数字の１より小さい数しかつくれません。

何度かブラウザをリロード（更新、再読み込み）して、確かめてみます。

1回目の表示結果
↓

0.427940555770828

2回目の表示結果
↓

0.6279808447799727

3回目の表示結果
↓

0.25192833237803625

はい。というように、どれも数字の1より小さい数ばかりですよね。

ランダムな整数をつくりたい

では、ランダムな整数をつくりたいときはどうしたらいいのか。

手順はこうです。

手順

１．上の方法でつくった数字に、ある程度の数をかけて大きくする

２．小数点以下を切り捨てる

これでランダムな整数ができあがります。

小数点以下を切り捨てるには

数値の小数点以下を切り捨てるには、これを使います。

Math.floor(数値)

では、これを実際に組み込んでみますね。

やってみよう

小数点以下を切り捨てる記述（赤い部分）を組み込むと、こうなります。

<html>
<head>
</head>
<body>

<script>

// 変数aを使う宣言
var a;

//変数aにランダムな整数を代入
a=Math.floor(Math.random()*5); 

//aを画面に表示
document.write(a);
 
</script>

</body>
</html>