【Javascript小ネタ】JavaScriptで配列の要素をランダムにシャッフルする方法

javascript-array-random-shuffle Javascript

Javascriptの復習をしています
※あまり使わなくなって忘れている・・・。

JavascriptでRandomでInt生成どうやるんだっけー?
ということでそのメモです。

ランダムな整数生成

Math.floor(Math.random() * intArr.length)の詳細解説

let intArr = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
const tempIndex = Math.floor(Math.random() * intArr.length);

このコードは、配列 intArr の長さ内でランダムな整数を生成するために使用されます。
それぞれの関数と演算子は以下のように機能します:

  1. Math.random():
    0以上1未満のランダムな浮動小数点数を生成します。
    例えば、0.5、0.623、0.999などです。
  2. Math.random() * intArr.length:
    Math.random() によって生成された数値に配列の長さを掛けることで、
    0から配列の長さ(この例では11)未満のランダムな数値を生成します。
    例えば、配列の長さが11の場合、0から10.999…までの数値が得られます。
  3. Math.floor():
    この関数は数値を小数点以下で切り捨てて、最も近い整数にします。
    したがって、Math.floor(Math.random() * intArr.length) は、
    0から配列の長さ(この例では11)の一つ小さい数値(この例では10)
    までのランダムな整数を生成します。

他の使い方の例

  1. ランダムな数値の生成:
    汎用的に任意の範囲(例:1から100)でランダムな整数を生成することができます。
    const randomNum = Math.floor(Math.random() * 100) + 1;
  2. 配列からランダムな要素を選択:
    任意の配列からランダムに要素を選ぶことができます。
    const fruits = ["apple", "banana", "cherry", "date"]; 
    const randomFruit = fruits[Math.floor(Math.random() * fruits.length)];
  3. ゲームやクイズでのランダムな質問選択:
    複数の質問や選択肢の中からランダムに一つを選ぶ際に使えます。
    const questions = ["Q1", "Q2", "Q3", "Q4"]; 
    const randomQuestion = questions[Math.floor(Math.random() * questions.length)];

これらの例は、Math.random()Math.floor() を組み合わせることで、
様々な状況でランダムな値を生成するために応用できます。

配列のシャッフル

JavaScriptを使って配列内の要素をランダムに並び替える方法は、
多くのアプリケーションやゲームで便利に使えます。
この記事では、JavaScriptで配列の要素を効率的にシャッフルする方法を紹介します。

シャッフルする配列

まず、シャッフルしたい要素を持つ配列を定義します。
この例では、0から100までの10刻みの整数を要素とする配列 intArr を使用します。

let intArr = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

シャッフルのプロセス

シャッフル処理では、配列の各要素について以下のステップを実行します。

  1. ランダムなインデックスの生成:
    Math.random() 関数を使用して、
    配列の長さを最大値とするランダムなインデックスを生成します。
    このインデックスは、交換対象の要素を選ぶために使用されます。
  2. 要素の交換:
    現在の要素とランダムに選ばれた要素の位置を交換します。

シャッフルの実装

以下のコードは、配列のシャッフルを実行します。

let intArr = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
console.log(intArr); // シャッフル前の配列を表示

for (const [index, num] of intArr.entries()) {
    const tempIndex = Math.floor(Math.random() * intArr.length); // ランダムなインデックス
    const tempNum = intArr[index]; // 現在の要素を一時的に保存
    intArr[index] = intArr[tempIndex]; // 現在の要素とランダムな要素を交換
    intArr[tempIndex] = tempNum; // 一時的に保存した要素をランダムな位置に配置
}

console.log(intArr); // シャッフル後の配列を表示

まとめ

今回は、
JavaScriptで配列の要素をランダムにシャッフルする方法を紹介しました。
この方法を利用して、データをランダムに並び替えることで、
ゲーム、アプリケーション、またはウェブサイトにおいて、
ユーザに素晴らしい体験をすることができます。

皆さんの参考になれば幸いです!

コメント

タイトルとURLをコピーしました