JavaScriptで交互シャッフル配列を作成する方法【サンプルコード付き】

交互シャッフルとは？

JavaScriptにおける「交互シャッフル」とは、数値の配列を並べ替えて、最大値の直後に最小値、2番目に大きい値の直後に2番目に小さい値……というように、大きい値と小さい値を交互に配置する手法のことです。

たとえば、次の入力配列があったとします。

const arr = [11, 7, 9, 3, 5, 1, 13];

この場合、期待される出力は以下のとおりです。

const output = [13, 1, 11, 3, 9, 5, 7];

実装コード

以下が交互シャッフルを実現するコードです。slice() で元の配列のコピーを作成してから処理するため、入力元の配列は変更されません。

const arr = [11, 7, 9, 3, 5, 1, 13];

// 交互シャッフルを行う関数
const alternateShuffle = (arr) => {
  // 元の配列を壊さないようコピーし、昇順にソート
  const sorted = arr.slice().sort((a, b) => a - b);

  // 末尾の最大値を取り出し、偶数番目の位置に挿入
  for (let start = 0; start < sorted.length; start += 2) {
    sorted.splice(start, 0, sorted.pop());
  }
  return sorted;
};

console.log(alternateShuffle(arr));

出力結果

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

[
    13, 1, 11, 3,
    9, 5,  7
]

仕組みのポイント

1. slice() + sort()：元の配列をコピーして昇順に並べ替えます。
2. pop()：ソート済み配列の末尾から、その時点で最大の値を取り出します。
3. splice()：取り出した値を偶数番目のインデックス（0, 2, 4…）に挿入します。

これらの操作を繰り返すことで、「最大 → 最小 → 2番目に大きい → 2番目に小さい……」という交互の並び順が完成します。元の配列を保持しつつ新しい配列を返す設計のため、副作用がなく再利用しやすいのも大きなメリットです。