javascriptで配列の値をランダムに取得し、表示する

Javascriptで配列の中の値をランダムに取得する方法です。

私の作成したRandom Chordboxのメイン機能であるランダム入力機能は、ルート音と、コード種類（コードの右側の英語の部分）をそれぞれ配列で作成し、そこから、ランダムに値を取得するという仕組みで動作しています。

 段階ごとに分けると

１．配列を作成する

２．配列の要素数を最大値として、ランダムの整数を生成する

３．2で生成した整数を用いて、配列の「生成した整数」番目のデータを取得する

こんな感じです。

実例の紹介

分かりやすい例で見てみましょう。

ランダムにメニューが決められてしまう、嫌がらせレストラン「ランダムキッチン」の登場です。

See the Pen OqZwYm by yoneshi (@yoneshi) on CodePen.

「メニュー」の注文をクリックすると、指定されたメニューの中からランダムに選択され、料金も決定されます。

また、何度かクリックすると、「メニューは提供しないが1万円」という料金も登場します。悪徳レストランです。

解説

それでは、主要な部分を解説します。

 「メニューを注文」をクリック時に実行されるのが、上記関数です。

ポイントとなるのは以下の点。

1．Math.random();は、0~1未満の間の少数点を含めた数値の中で、ランダムな数値を生成する

2．Math.floor()は、()内の数字のうち、最大の整数のみを返す。（四捨五入ではないため、例えば()内が1.93の場合には、「1」が返される）

3．「Math.random()*数字」は、ランダムに「記載した数字ー1」の範囲内でランダムな数字を生成することができる。

3番目のポイントをもう少し詳しく見てみましょう。

関数内の「Math.floor(Math.random() *　$foodarray.length);」を紐解いていくと、以下のような動作になっております。

・Math.random()で生成した数値（0~1未満）に$foodarrayの要素数（$foodarray.lengthで取得）を掛けて、最大の整数のみをMath.floorで取得する

では、次は、codepen下部の「数値のランダム生成」ボタンを押した際に表示される値に注目してみてください。

See the Pen OqZwYm by yoneshi (@yoneshi) on CodePen.

(Math.floor(Math.random())は、どれだけランダムに数値を生成しても、1以上にはならないため、常に「0」が返されます。

そこで、Math.random()に任意の整数（今回は$foodarray.length＝$foodarrayの要素数）を掛けることで、「整数-1」の範囲内で、ランダムな値を返すことが出来ます。

※Math.random()は0~1内で数値を生成するため、結果は必ず、掛けた整数-1の範囲に収まります

更に、生成したランダムな値をMath.floor()により、整数化できます。

この一連の流れで、$foodarrayの要素数から、任意でランダムな整数を返すという処理を実行しています。

後は、$food_randomに生成した整数を入れて、配列の[$food_random]番目の要素にアクセスするだけです。

これらの操作により、配列の中の値をランダムで取得するという処理を実行できます。

※Random Chordboxでは、テキスト以外にも、カスタムデータに入れるための色々な要素を配列に含めておりますが、基本的には上記の手順でランダムに取得しています。

また、今回は、20％の確率で、注文自体されないという処理も実装しています。

こちらは、別途生成したMath.random()の数値を用いて、生成された数値が0.2未満の場合にはif文内の処理を実行するという流れです。

なので、「$probability<0.2」の0.2の数値を変動させることで、確率を変動させることが出来ます。

色々と悪用出来そうですね。

皆さんもランダム取得と確率弄りで遊んでみてください。