JavaScriptで配列を指定した個数のサブ配列に分割（チャンク化）する方法

JavaScriptでは、数値の配列を第1引数として受け取り、単一の数値 num を第2引数として受け取る関数を実装する必要があります。ここで num は常に配列の長さ以下であるものとします。

この関数の役割は、num 個のサブ配列を含む新しい配列を生成することです。元の配列の長さが num でちょうど割り切れる場合、すべてのサブ配列は同じ要素数を持ちます。割り切れない場合は、最後のサブ配列だけが異なる要素数になります。

入力例と期待される出力

たとえば、入力が以下のようなケースを考えてみましょう。

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const num = 3;

この場合の出力は次のようになります。

const output = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8]
];

8個の要素を持つ配列を3つのサブ配列に分割しているため、最初の2つのサブ配列には3要素ずつ格納され、最後のサブ配列には残りの2要素が入ります。

実装コード

この処理を実現するコードは以下の通りです。

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const num = 3;
const chunkArray = (arr = [], num = 1) => {
    const { length: l } = arr;
    const elPerArr = Math.ceil(l / num);
    const res = arr.reduce((acc, val, ind) => {
        const curr = Math.floor(ind / elPerArr);
        if(!acc[curr]){
            acc[curr] = [val];
        }else{
            acc[curr].push(val);
        }
        return acc;
    }, []);
    return res;
};
console.log(chunkArray(arr, num));

コードのポイント

• Math.ceil(l / num): 各サブ配列に割り当てる要素数を切り上げて算出します。これにより、割り切れない場合でも余りの要素を最後のサブ配列で処理できます。
• reduce(): 配列を走査しながら、各要素が属するサブ配列のインデックスを Math.floor(ind / elPerArr) で計算し、適切な位置へ要素を振り分けます。
• acc[curr] の存在チェック: 対象のサブ配列がまだ存在しない場合は新規作成し、既に存在する場合は push() で要素を追加していきます。

実行結果

コンソールに出力される結果は以下の通りです。

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

このように chunkArray 関数を使えば、任意の配列を指定した個数のサブ配列に柔軟に分割できます。データのページネーションやグリッドレイアウトへの分割表示など、実務のさまざまな場面で活用できる便利なテクニックです。