【レッスン#4】 「乱数の使い方」を学ぶプログラミング教材

プログラミング教材#4では組み込み関数Mathを使って乱数を生成する方法を学びます。任意の範囲の整数に整える実用パターンも扱います。

プログラミング教材#4の概要

プログラミング教材#4 サンプルコード

See the Pen 教材#4-1 by programmingbird (@programmingbird) on CodePen.

まずボタン1を何回も押してみると…

ボタン1を押すとなんだか意味不明な小数が表示されます。何度も押して見るとそのたびに違う小数が表示されます。試してみる限りすべて0以上1未満の範囲の小数で、1以上の数は出てこないようです。

次にボタン2を何回も押してみると…

同様にボタン2を何度も押して見ると、こんどはそのたびに違う整数が表示されます。どうやら0〜9の整数がランダムに表示されているようです。

プログラミング教材#4でやりたいこと

トリガー ①⇒「ボタン1」がクリックされたら(アクション①を実行)
トリガー ②⇒「ボタン2」がクリックされたら(アクション②を実行)
アクション①⇒ 0以上1未満の範囲のランダムな小数を表示する
アクション②⇒ 0〜9の整数をランダムに表示する

ランダムな数字をただ表示してもあまりおもしろくありませんが、例えばゲームを作る際に敵の動きを決めるとき、ウェブデザインでいくつかの写真をランダムに表示させたいとき、などに必ず必要になります。

また、今回はトリガーとアクションの組み合わせが2セット同じプログラムの中に入っているところもポイントです。実用的なプログラムを書く場合、当然一つのプログラムの中に多数のトリガーとアクションのセットを含むようになります。今回の2セットの書き方が理解できれば10セットでも100セットでも大丈夫です。

プログラミング教材#4 サンプルコードの解説

HTML

ボタンが2つに増えていて、それに応じてidもbtn1,btn2と付け分けています。

JavaScript //JSとHTMLの紐付け

HTMLと同じくボタンを2つに増やした分、行が増えていますが基本的に今までとまったく同じです。

JavaScript //トリガーの設定

ここもbtn1,btn2それぞれにクリックイベントを付けているだけで今までと同じです。呼び出すアクションもtest1,test2と名前を付け分けています。

JavaScript //アクションの設定

いよいよ今回の新出ポイントです。

Math.random() … 0以上1未満の乱数をつくる

Mathは組み込み関数といってJavaScriptにもともと用意されている便利な関数です。名前の通り数学関係の機能をたくさん持っています。今回はその中でrandomという乱数(ランダムな数)をつくる命令を使っているわけです。Math.random()という形で使うことが多いのでとりあえずは丸ごと覚えておきましょう。アクション①ではこれをそのまま使っています。

Math.floor(□) … □の小数点以下を切り捨てる

同じくMathの機能の一つに「切り捨て」があります。小数点以下を切り捨てて整数にする命令です。Math.floor(□)のように書くことで□の小数点以下を切り捨てて整数にすることができます。

アクション②のコードをよく見てみましょう。Math.floor(□)の□の部分にMath.random()*10というコードが入っています。Math.random()までで0以上1未満の乱数ができていてそれを*10(10倍)しているわけですから、Math.random()*10の部分で0以上10未満の乱数(まだ小数!)になっているはずです。これをMath.floorすることで0,1,2,3,4,5,6,7,8,9の整数どれかを表すように整形しているのです。

*10の部分を*5や*100などと変えれば、0〜4の整数、0〜99の整数なども簡単に作り出すことができます。とてもよく使う書き方なのでコードのパターンとして身につけておくとよいでしょう。