ITコラム

Rolling three dice on a wooden desk. Rolling the dice concept fo

JavaScript

2017.10.26

JavaScript【 array 】10 ～配列からランダムに値を取得

JavaScriptで用意されているMathオブジェクトのrandomメソッドを使用すると、乱数を作ることができます。
今回は、このMath.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 】をご参照下さい。

▲目次へ戻る