実践編②配列内の要素をランダムに１つだけ取り出す【JavaScriptの書き方入門】

前回のレッスンで、格言ガチャで表示したいテキストを配列にまとめました。
インデックス番号を使えば、配列に含まれている要素を１つだけ取り出すことも出来そうです。

今回は「②どれか１つをランダムに選ぶ」方法を考えてみましょう。

配列内の要素をランダムに取り出すには？

配列の中身を1つだけ取り出すには、配列の番号を使います。
ですので、番号の0～4までをランダムに決められれば実現します。

ランダムな数を作るMath.random()関数

ランダムな数字を作るためには、Mathオブジェクトを使います。
これはJavaScriptに組み込まれている機能で、Math＝数学的な計算をしてくれます。

Mathオブジェクトには色々な計算式が用意されています。
今回は、乱数（ランダムな数列）を生成する.randomを使用します。

説明だけ見てもよく分かりませんね。
実際どんなものか、alertで見てみましょう。

alert(Math.random());

保存して、ブラウザで開くとアラートに数字が出てきます。
再読み込みすると、表示される数字が変わっているはずです。

生成する数を指定したい場合は、下記のように書きます。

保存してページを開くと、表示される数字が変わることが分かります。

小数点以下を無くすMath.floor()

ランダムな数は作れているものの、現在は小数点以下がやけに長く出ていますよね。
配列の番号を作りたいので、このままでは使えません。

生成される数が整数になるように、Math.floorで囲みます。
Math.floorは小数点以下を切り捨てるというもの。

Math.randomと組み合わせると、ランダム生成する値が整数になります。

配列の中身をランダムに取り出す

Math～で生成するランダムな数字を、配列kakugen_itemsの要素数に限定します。
先程までは「6」をかけていましたが、配列内要素の数と違いますね。

6の部分に、配列の長さを取り出したkakugen_items.lengthを入れましょう。
こうしておくと、自動で配列の要素数に合わせて数が変わります。
他の格言も加えよう…となったときに便利です。

alert内に直書きできないので、定数に入れて使ってみましょう。

const num = Math.floor(Math.random() * kakugen_items.length);
alert( num );