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

JavaScriptでは、リテラルを格納した配列を受け取り、その要素の順序を元の配列を直接書き換える形（in-place）でランダムにシャッフルする関数を実装したいケースがあります。

本記事では、配列の要素をランダムな順序に並べ替えるシンプルな関数の実装例を紹介します。

実装例

コードは以下のとおりです。

const letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
const unorderArray = arr => {
    let i, pos, temp;
    for (i = 0; i < 100; i++) {
        pos = Math.random() * arr.length | 0;
        temp = arr[pos];
        arr.splice(pos, 1);
        arr.push(temp);
    };
}
unorderArray(letters);
console.log(letters);

出力結果

コンソールには次のように出力されます。

[
    'b', 'e', 'c',
    'a', 'g', 'f',
    'd'
]

なお、これは数ある出力結果のひとつにすぎません。Math.random()を使用しているため、実行するたびに異なる順序で出力されます。

コードの仕組み

この関数は、100回のループ処理の中で、毎回Math.random()を使って配列からランダムな位置の要素を1つ取り出し、それを配列の末尾に移動させています。これを繰り返すことで、元の配列そのものの要素順がランダムに入れ替わります。

なお、より厳密で偏りのないシャッフルを行いたい場合は、古典的なアルゴリズムである「フィッシャー–イェーツのシャッフル（Fisher–Yates shuffle）」を採用するのが一般的です。この手法は要素数に比例した計算量で動作し、すべての並び順が等しい確率で現れることが保証されているため、実用的な場面で広く使われています。