JavaScript【 array 】10 ～ 配列からランダムに値を取得
JavaScriptで用意されているMathオブジェクトのrandomメソッドを使用すると、乱数を作ることができます。
今回は、このMath.randomメソッドを使って、配列からランダムに値を取り出す方法について紹介します。
目次
１．randomメソッドの使い方
２．配列の値をランダムに取得
３．配列の値をシャッフル
１．randomメソッドの使い方
Mathオブジェクトのrandomメソッドを使用して、乱数を作ってみます。
function ranNum() {
var num = Math.random();
document.getElementById("dat").value = num;
}
「 Math.random() 」という記述で、乱数が返ります。
上記のソースコードを実行すると、次のようになります。
乱数ボタンを何度かクリックしてみて下さい。
Math.randomメソッドを使用すると、小数による乱数を作ることができます。
整数の乱数を作りたい場合は、さらにMath.floorメソッドを組み合わせて使用します。
Math.floorメソッドは、小数点以下を切り捨てて、整数のみを返すメソッドです。
整数の乱数を作ってみます。
function ranNum() {
var num = Math.floor( Math.random() * 10 );
document.getElementById("dat").value = num;
}
「 Math.random() * (MAX+1) 」とすると、MAX以下の整数の乱数を作ることができます。
「 Math.floor( Math.random() * 10 ) 」で、1から9までの整数の乱数が返ります。
上限を意識しない場合でも、「Math.random()」自体の返り値は1未満の少数のため、「Math.floor( Math.random() )」とすると、返り値は常に0となってしまう点に注意します。
上記のソースコードを実行すると、次のようになります。
乱数ボタンを何度かクリックしてみて下さい。
上限と共に下限も設定して、ある範囲内で乱数を作ることもできます。
function ranNum() {
var num = Math.floor( Math.random() * 6 ) + 5;
document.getElementById("dat").value = num;
}
「 Math.random() * ( (MAX+1) – MIN ) + MIN 」とすると、MINからMAXまでの乱数を作ることができます。
「 Math.floor( Math.random() * 6 ) + 5 」は、MIN が 5、MAX が 10（ (10+1)-5=6 ）となり、5から10までの乱数が返ります。
上記のソースコードを実行します。
乱数ボタンを何度かクリックしてみて下さい。
▲目次へ戻る
２．配列の値をランダムに取得
配列は、通常 インデックス番号を持っているので、インデックス番号に乱数を指定することで、配列の値をランダムに取得することができます。
配列の値をランダムに取得する場合は、次のように記述します。
var 配列変数 = ［値1, 値2, 値3, ．．．］；
配列変数 ［ Math.floor（ Math.random() ＊ 配列変数．length ）］；
配列の値をランダムに表示します。
表示ボタンを何度かクリックしてみて下さい。
［りんご、みかん、ぶどう、メロン、もも］のどれかを表示します
ソースコードは次の通りです。
<script type="text/javascript">
<!--
function ranAry() {
var fruits = ["りんご", "みかん", "ぶどう", "メロン", "もも"];
document.getElementById("dat").value = fruits[Math.floor(Math.random() * fruits.length)];
}
//-->
</script>
<div style="background-color : #CCC; padding : 20px 20px 1px;">
［りんご、みかん、ぶどう、メロン、もも］のどれかを表示します
<form>
<div style="display:inline-flex;">
<input type="button" value="表示" onClick="ranAry()">
<input type="text" id="dat" placeholder="ランダムに表示されます">
</div>
</form>
</div>
▲目次へ戻る
３．配列の値をシャッフル
今度は、Math.randomメソッドを使用して、配列要素の並び順をシャッフルしてみます。
シャッフルボタンを何度かクリックしてみて下さい。
［りんご、みかん、ぶどう、メロン、もも］の並び順をシャッフルします
ソースコードは次の通りです。
<script type="text/javascript">
<!--
function ranAry() {
var fruits = ["りんご", "みかん", "ぶどう", "メロン", "もも"];
var num = fruits.length;
while (num) {
var i = Math.floor(Math.random() * num);
var str = fruits[--num];
fruits[num] = fruits[i];
fruits[i] = str;
}
document.getElementById("dat").value = fruits;
}
//-->
</script>
<div style="background-color : #CCC; padding : 20px 20px 1px;">
［りんご、みかん、ぶどう、メロン、もも］の並び順をシャッフルします
<form>
<div style="display:inline-flex;">
<input type="button" value="シャッフル" onClick="ranAry()">
<input type="text" id="dat" placeholder="シャッフルします">
</div>
</form>
</div>
フィッシャー – イェーツのシャッフルのアルゴリズムでシャッフルしています。
配列変数のインデックスの範囲内で乱数 i を発生させて、配列変数［i］と 配列変数［num］を入れ替えています。
変数numを、インデックス番号の最大値から1ずつデクレメントさせることで、上記のデータ入れ替え処理を配列要素の数だけ繰り返し行う仕組みです。
whileの条件文が「0」になると（while(0)）、falseの評価となり、ループ処理が終了します（while(1)は無限ループです）。
while文ついては、JavaScript【 while 】をご参照下さい。
▲目次へ戻る
