【JavaScript】配列をランダムに並べ替える方法

配列の要素をランダムに並べ替える方法をまとめます。
例えば、メンバーの順番をシャッフルしたり、くじ引きの順番を決めたりする場合に便利です。
ここで紹介する関数はシンプルで、すぐに自分のコードに組み込めます。

コード

const members = ['佐藤', '鈴木', '高橋', '田中', '伊藤'];

const shuffleArray = (ary) => {
  let len = ary.length;
  while (len) {
    let i = Math.floor(Math.random() * len);
    let last = ary[--len];
    ary[len] = ary[i];
    ary[i] = last;
  }
  return ary;
};

console.log(shuffleArray(members));

このコードは、配列の要素をランダムに入れ替える方法です。
後ろから順にランダムな位置と入れ替える手順を使っています。
この手順は学術的には Fisher–Yates（フィッシャー–イェーツ）アルゴリズム と呼ばれますが、難しい名前は覚える必要はありません。
ポイントは『後ろから順にランダムに入れ替えるだけ』ということです。

解説

1. 配列の準備

const members = ['佐藤', '鈴木', '高橋', '田中', '伊藤'];

• ここに並んでいる順番をランダムに入れ替えたい

---

2. シャッフル関数の流れ

const shuffleArray = (ary) => {
  let len = ary.length;
  while (len) {
    let i = Math.floor(Math.random() * len);
    let last = ary[--len];
    ary[len] = ary[i];
    ary[i] = last;
  }
  return ary;
};

処理の流れ

1. len = ary.length で配列の長さを取得
2. while(len) で未処理部分がある限りループ
3. i = Math.floor(Math.random() * len) でランダムに位置を選ぶ
4. last = ary[--len] で未処理部分の最後の要素を取得
5. ary[len] = ary[i] と ary[i] = last で入れ替える
6. ループ終了後にシャッフル済みの配列を返す

---

3. 配列の動きのイメージ

初期配列：

[佐藤, 鈴木, 高橋, 田中, 伊藤]

1回目入れ替え（末尾 伊藤 とランダム位置 鈴木）：

[佐藤, 伊藤, 高橋, 田中, 鈴木]

2回目入れ替え（末尾 田中 とランダム位置 佐藤）：

[田中, 伊藤, 高橋, 佐藤, 鈴木]

3回目入れ替え（末尾 高橋 とランダム位置 伊藤）：

[田中, 高橋, 伊藤, 佐藤, 鈴木]

4回目入れ替え（末尾 高橋 とランダム位置 田中）：

[高橋, 田中, 伊藤, 佐藤, 鈴木]

• このように、末尾から順に入れ替えを行うことで、全体がランダムに並び替わります。

---

4. 注意点

• この関数は元の配列を直接書き換えます（破壊的操作）
• 元の配列を残したい場合は、コピーしてから使うと安全です：

const shuffled = shuffleArray([...members]);

• Math.random() を使うため、実行するたびに順番は変わります

---

5. まとめ

• このコードは Fisher–Yatesアルゴリズム に基づく標準的なシャッフル方法
• 後ろから順に入れ替えることで偏りの少ないランダム化ができる
• 配列をランダムに並び替えたい場合にすぐ使えるシンプルな関数

配列シャッフル機能を使って作ったWebアプリ

おしゃれなグラデーションを集めたギャラリーです。
コードをコピーして使うことができます。

シャッフルボタンを押すと順番が変わります