JavaScriptで配列をチャンクに分割する方法｜reduce()を使った実装を解説

配列をチャンクに分割するとは

JavaScriptでは、配列を指定した数のサブ配列（チャンク）に分割したいケースがよくあります。本記事では、文字列や数値からなる配列 arr を第1引数に、分割数 n を第2引数として受け取り、n 個のサブ配列を返す関数 chunk() を実装する方法を解説します。

要素の分配ルール

各サブ配列には、最大で arr.length / n 個の要素が含まれます。要素の分配は以下のルールに従います。

• 1番目の要素は1番目のサブ配列へ、2番目の要素は2番目のサブ配列へ、というように順番に振り分ける
• すべてのサブ配列に1つずつ要素が入ったら、再び1番目のサブ配列から2つ目の要素を詰めていく
• すべてのサブ配列に2つずつ要素が入ったら、3つ目の要素を1番目のサブ配列から順に詰めていく

つまり、要素が「行方向」ではなく「列方向」に振り分けられる点がポイントです。

具体例

例えば、入力配列が以下の場合を考えてみましょう。

// 入力配列が以下の場合:
const input = [1, 2, 3, 4, 5, 6];
// 出力は次のようになります:
const output = [
   [1, 4],
   [2, 5],
   [3, 6]
];

reduce()を使った実装

それでは、実際にコードを書いていきましょう。ここでは Array.prototype.reduce() メソッドを使って、元の配列から目的の配列を構築します。

コード例

const input = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const chunk = (arr, size) => {
   return arr.reduce((acc, val, ind) => {
      const subIndex = ind % size;
      if(!Array.isArray(acc[subIndex])){
         acc[subIndex] = [val];
      } else {
         acc[subIndex].push(val);
      };
      return acc;
   }, []);
};
console.log(chunk(input, 4));

実行結果

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

[ [ 1, 5, 9 ], [ 2, 6 ], [ 3, 7 ], [ 4, 8 ] ]

コードの解説

この実装のポイントは、現在のインデックス ind を size で割った余り（ind % size）を使って、要素の振り分け先となるサブ配列の位置を決定しているところです。剰余演算によって、要素は0番目、1番目、2番目…とサブ配列を循環するように分配されます。

また、Array.isArray() で該当するサブ配列がまだ存在しない場合は新しく配列を作成し、すでに存在する場合は push() で要素を追加しています。この処理により、元の配列を一度走査するだけで目的のチャンク構造を効率的に構築できます。