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

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より小さい数ばかり

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

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

 

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

 

1回目の表示結果

0.427940555770828

 

2回目の表示結果

0.6279808447799727

 

3回目の表示結果

0.25192833237803625

 

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

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

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

手順はこうです。

 

手順

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

2.小数点以下を切り捨てる

 

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

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

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

Math.floor(数値)

 

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

やってみよう

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

 

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

<script>

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

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

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

</body>
</html>

 

緑色の部分がJavaScriptです。

今回は、Math.random()でつくったランダムな数字に、適当に5をかけて大きくしています。

 

赤い部分が、小数点以下を切り捨てる記述です。

a=Math.floor(Math.random()*5); 

 

5をかけて大きくした数字の小数点以下を切り捨てています。

そして、それを変数aに代入しています。

かける数字で最大値が決まる

5をかけることで、0から4までのランダムな整数ができあがります。

もしも101をかければ、0から100までのランダムな整数ができあがります。

 

つまり、かけた数字より一つ小さい数字が、最大値になります。

 

なぜなのか?

その仕組みは「ランダムな数字の最大値を決める仕組み」に書きました。

 

それから…

JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。

タイトルとURLをコピーしました