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

Javascriptで配列の中の値をランダムに取得する方法です。
私の作成したRandom Chordboxのメイン機能であるランダム入力機能は、ルート音と、コード種類(コードの右側の英語の部分)をそれぞれ配列で作成し、そこから、ランダムに値を取得するという仕組みで動作しています。
段階ごとに分けると
1.配列を作成する
2.配列の要素数を最大値として、ランダムの整数を生成する
3.2で生成した整数を用いて、配列の「生成した整数」番目のデータを取得する
こんな感じです。
実例の紹介
分かりやすい例で見てみましょう。
ランダムにメニューが決められてしまう、嫌がらせレストラン「ランダムキッチン」の登場です。
See the Pen OqZwYm by yoneshi (@yoneshi) on CodePen.
「メニュー」の注文をクリックすると、指定されたメニューの中からランダムに選択され、料金も決定されます。
また、何度かクリックすると、「メニューは提供しないが1万円」という料金も登場します。悪徳レストランです。
解説
それでは、主要な部分を解説します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
let randommenu = function(){ //乱数の変数 let $probability = Math.random(); let $food_random = Math.floor(Math.random() * $foodarray.length); //Math.floor(Math.random() * $foodarray.length)は「配列の要素数の中で、ランダムに整数を取得しているよ」という意味 let $drink_random = Math.floor(Math.random() * $drinkarray.length); //20%の確率で、注文させねぇぜ? if($probability<0.2){ $(".foodarea").text("no menu"); $(".drinkarea").text("no menu"); $(".pricearea").text("but 10000"); }else{ $(".foodarea").text($foodarray[$food_random].food); $(".drinkarea").text($drinkarray[$drink_random].drink); $(".pricearea").text($foodarray[$food_random].price+$drinkarray[$drink_random].price); } }; |
「メニューを注文」をクリック時に実行されるのが、上記関数です。
ポイントとなるのは以下の点。
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の数値を変動させることで、確率を変動させることが出来ます。
色々と悪用出来そうですね。
皆さんもランダム取得と確率弄りで遊んでみてください。
-
前の記事
Codepenの無料プランで音声ファイルやTone.jsを利用する方法 2019.03.27
-
次の記事
記事がありません