JavaScriptで配列をランダムにシャッフルする方法

2024-04-02

JavaScriptで配列をランダムにシャッフルする方法

Fisher-Yatesアルゴリズムは、配列をランダムにシャッフルする最も一般的なアルゴリズムの一つです。以下の手順で実装できます。

配列の長さ (length) を取得します。
ループを length - 1 回実行します。
- 現在のループカウンタ (i) と、length - 1 からランダムな値 (j) を生成します。
- 配列の i 番目と j 番目の要素を入れ替えます。

function shuffle(array) {
  const length = array.length;
  for (let i = 0; i < length - 1; i++) {
    const j = Math.floor(Math.random() * (length - i - 1)) + i;
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

const numbers = [1, 2, 3, 4, 5];
const shuffledNumbers = shuffle(numbers);
console.log(shuffledNumbers); // [4, 2, 5, 1, 3]

sort メソッドとランダム比較関数

JavaScriptの Array.prototype.sort メソッドは、配列を要素同士を比較して並べ替えることができます。この比較関数をランダムな値を返すようにすることで、配列をランダムにシャッフルすることができます。

function shuffle(array) {
  return array.sort(() => Math.random() - 0.5);
}

const numbers = [1, 2, 3, 4, 5];
const shuffledNumbers = shuffle(numbers);
console.log(shuffledNumbers); // [3, 2, 1, 5, 4]

どちらの方法も配列をランダムにシャッフルするのに有効ですが、それぞれにメリットとデメリットがあります。

Fisher-Yatesアルゴリズム
- メリット：
  - 処理速度が速い
  - シンプルで分かりやすい
- デメリット：
sort メソッドとランダム比較関数
- メリット：
  - すべてのブラウザで動作する
  - 比較関数を自由にカスタマイズできる
- デメリット：

一般的には、処理速度を重視する場合は Fisher-Yatesアルゴリズム、ブラウザ互換性を重視する場合は sort メソッドとランダム比較関数 を使うのがおすすめです。

上記以外にも、ライブラリを使って配列をランダムにシャッフルする方法もあります。

これらのライブラリを使えば、より簡単に配列をランダムにシャッフルすることができます。

// Fisher-Yatesアルゴリズムによるシャッフル

function shuffle(array) {
  const length = array.length;
  for (let i = 0; i < length - 1; i++) {
    const j = Math.floor(Math.random() * (length - i - 1)) + i;
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

// 例
const numbers = [1, 2, 3, 4, 5];
const shuffledNumbers = shuffle(numbers);
console.log(shuffledNumbers); // 例: [4, 2, 5, 1, 3]


// sortメソッドとランダム比較関数によるシャッフル

function shuffle(array) {
  return array.sort(() => Math.random() - 0.5);
}

// 例
const numbers = [1, 2, 3, 4, 5];
const shuffledNumbers = shuffle(numbers);
console.log(shuffledNumbers); // 例: [3, 2, 1, 5, 4]

上記のコードは、配列をランダムにシャッフルする基本的な方法を示しています。
実際の用途に合わせて、コードをカスタマイズする必要があります。
例えば、配列に重複した要素が含まれている場合、シャッフル後の配列にも重複した要素が含まれる可能性があります。
重複した要素を排除したい場合は、Setなどを利用する必要があります。

配列をシャッフルするその他の方法

配列の要素をランダムに削除して再挿入する

配列の要素をランダムに削除する関数を作成します。
配列が空になるまで、ランダムに要素を削除し、削除した要素を配列の先頭に再挿入します。

function shuffle(array) {
  while (array.length > 0) {
    const element = array.splice(Math.floor(Math.random() * array.length), 1)[0];
    array.unshift(element);
  }
  return array;
}

// 例
const numbers = [1, 2, 3, 4, 5];
const shuffledNumbers = shuffle(numbers);
console.log(shuffledNumbers); // 例: [5, 3, 1, 2, 4]

ES6のスプレッド構文とfor…ofループを使う

ES6のスプレッド構文を使って、配列を展開します。
for…ofループを使って、展開された配列をランダムな順序でループ処理します。
ループ処理中に、配列の要素を新しい配列に追加します。

function shuffle(array) {
  const shuffledArray = [];
  for (const element of [...array]) {
    shuffledArray.splice(Math.floor(Math.random() * shuffledArray.length), 0, element);
  }
  return shuffledArray;
}

// 例
const numbers = [1, 2, 3, 4, 5];
const shuffledNumbers = shuffle(numbers);
console.log(shuffledNumbers); // 例: [4, 2, 5, 1, 3]

ライブラリを使う

// Underscore.js
const shuffledNumbers = _.shuffle([1, 2, 3, 4, 5]);

// Lodash
const shuffledNumbers = _.shuffle([1, 2, 3, 4, 5]);

処理速度を重視する場合は、Fisher-Yatesアルゴリズムがおすすめです。
ブラウザ互換性を重視する場合は、sort メソッドとランダム比較関数を使うのがおすすめです。
コードの簡潔さを重視する場合は、ライブラリを使うのがおすすめです。

JavaScriptで配列をランダムにシャッフルするには、いくつかの方法があります。それぞれの方法のメリットとデメリットを理解して、状況に合わせて適切な方法を選択することが重要です。

javascript arrays random

JavaScriptで配列をランダムにシャッフルする方法