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

JavaScriptで用意されているMathオブジェクトのrandomメソッドを使用すると、乱数を作ることができます。
今回は、このMath.randomメソッドを使って、配列からランダムに値を取り出す方法について紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. randomメソッドの使い方

　
Mathオブジェクトのrandomメソッドを使用して、乱数を作ってみます。

function ranNum() {
    let num = Math.random();
    document.getElementById("dat").value = num;
}

「 Math.random() 」という記述で、乱数が返ります。

上記のソースコードを実行すると、次のようになります。
乱数ボタンを何度かクリックしてみて下さい。

　
Math.randomメソッドを使用すると、小数による乱数を作ることができます。

整数の乱数を作りたい場合は、さらにMath.floorメソッドを組み合わせて使用します。
Math.floorメソッドは、小数点以下を切り捨てて、整数のみを返すメソッドです。

整数の乱数を作ってみます。

function ranNum() {
    let 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() {
    let 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までの乱数が返ります。

上記のソースコードを実行します。
乱数ボタンを何度かクリックしてみて下さい。

▲目次へ戻る

　

2. 配列の値をランダムに取得

　
配列は、通常 インデックス番号を持っているので、インデックス番号に乱数を指定することで、配列の値をランダムに取得することができます。

配列の値をランダムに取得する場合は、次のように記述します。

    let 配列変数 = [ 値1, 値2, 値3, ...];

配列の値をランダムに表示します。
表示ボタンを何度かクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
function ranAry() {
    let 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>

▲目次へ戻る

　

3. 配列の値をシャッフル

　
今度は、Math.randomメソッドを使用して、配列要素の並び順をシャッフルしてみます。
シャッフルボタンを何度かクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
function ranAry() {
    let fruits =  ["りんご", "みかん", "ぶどう", "メロン", "もも"];
    let num = fruits.length;
 
    while (num) {
        let i = Math.floor(Math.random() * num);
        let 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 】をご参照下さい。

▲目次へ戻る