【初心者向け】JavaScriptのshuffle関数とは？配列をランダムに並び替える方法を解説

配列の順番をランダムに入れ替えたい！
クイズアプリ、ガチャ、ランダム表示などを作るときに必ず必要になるのが shuffle（シャッフル）関数 です。

この記事では、JavaScriptで「配列をランダムに並べ替える正しい方法」を、初心者向けにわかりやすく解説します。

---

shuffle関数とは？

配列の要素をランダムに並べ替えるための関数です。

例：

const arr = [1, 2, 3, 4, 5];
// シャッフル後： [3, 5, 1, 4, 2]

ゲーム、クイズ、ランダム表示などでとてもよく使われます。

---

最も正しいシャッフル方法：Fisher–Yates（フィッシャー・イェーツ）アルゴリズム

「適当に並び替えればよい」と思いがちですが、実は 正しいランダム性を持つシャッフルは特別なアルゴリズムが必要 です。

その中で最も有名なのが Fisher–Yates アルゴリズム（フィッシャー・イェーツ法）。

偏りがなく、全パターンが同じ確率で出るので信頼性が高いです。

---

正しい shuffle 関数の書き方

以下が、最も推奨されるシャッフル関数です。

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1)); // 0〜i のランダムな数
    [array[i], array[j]] = [array[j], array[i]];  // 値を入れ替える
  }
  return array;
}

---

使い方はとても簡単

const numbers = [1, 2, 3, 4, 5];
const shuffled = shuffle(numbers);

console.log(shuffled);

---

shuffle関数のポイント

① ランダム性が高い

Fisher–Yates法は すべての並び順が同じ確率 で出ます。

② 元の配列が変更される

shuffle(numbers); 

と書いた場合、numbers の順番そのものが書き換わります。

元の配列を残したい場合はコピーしましょう。

const shuffled = shuffle([...numbers]);

---

初心者がやりがちなNGなシャッフル方法

以下の書き方を見たことがある人は多いはず。

array.sort(() => Math.random() - 0.5);

一見動くように見えますが、
ランダム性に偏りが出るため正しいシャッフルには使えません。

---

オブジェクトが入った配列でも使える

例えば、カードゲームや問題集のデータでもそのままシャッフル可能です。

const items = [
  { id: 1, text: "A" },
  { id: 2, text: "B" },
  { id: 3, text: "C" }
];

shuffle(items);

---

Summary

ポイント	内容
shuffle関数とは	配列をランダムに並び替える関数
おすすめの方法	Fisher–Yates アルゴリズム
やってはいけない方法	sort(() => Math.random() - 0.5)
活用場面	ゲーム、クイズ、ランダム表示など

JavaScriptで正しいランダム処理を書けるようになると、制作の幅が一気に広がります。
ぜひご自身の制作でも使ってみてください！

その他関連記事はこちら→Programming Notes