JavaScriptで配列を均等に分割する関数の実装方法（reduce活用）

配列をn個のサブ配列に分割するとは

今回は、文字列や数値のリテラルを含む配列 arr を第一引数に、数値 n を第二引数として受け取る関数（例えば chunk()）を作成する必要があります。

この関数は、それぞれ最大 arr.length / n 個の要素を持つ n 個のサブ配列からなる配列を返します。

要素の振り分けルール

要素の分配は以下のように行われます。

• 1番目の要素は1つ目のサブ配列へ、2番目の要素は2つ目のサブ配列へ…という具合に順番に振り分けていきます。
• すべてのサブ配列に1要素ずつ入ったら、再び最初のサブ配列に2つ目の要素を追加していきます。
• すべてのサブ配列が2要素になった後で初めて、3つ目の要素を最初のサブ配列に入れる…という流れを繰り返します（いわゆる「ラウンドロビン方式」の分配です）。

具体例

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

const input = [656, 756, 5345, 67, 43, 76, 54, 768, 34];

分割数 n が 3 の場合、期待される出力は以下のようになります。

const output = [
    [ 656, 67, 54 ],
    [ 756, 43, 768 ],
    [ 5345, 76, 34 ]
];

元の配列の要素が、各サブ配列に順番通りかつ均等に振り分けられているのが分かりますね。

実装コード：Array.prototype.reduce()を使う

この関数を実装するには、元の配列に対して Array.prototype.reduce() メソッドを使用し、目的の構造の配列を構築するのが効果的です。インデックスを分割数 n で割った余り（剰余演算）を使うことで、「どのサブ配列に格納すべきか」を簡単に判定できます。

サンプルコード

const input = [656, 756, 5345, 67, 43, 76, 54, 768, 34];

const divideArray = (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(divideArray(input, 3));

実行結果

コンソールには次の出力が表示されます。

[ [ 656, 67, 54 ], [ 756, 43, 768 ], [ 5345, 76, 34 ] ]

処理のポイント

• 剰余演算子（%）の活用： ind % size によって、現在の要素がどのサブ配列に属するべきかを一発で計算できます。これにより、複雑な条件分岐やネストしたループが不要になります。
• 初期値として空配列を指定： reduce() の第二引数に [] を渡すことで、アキュムレータ（蓄積変数）として空の配列から処理を開始できます。
• 存在チェック： Array.isArray(acc[subIndex]) で該当するサブ配列の有無を確認し、なければ作成、あれば要素をプッシュする、という安全な処理になっています。

この手法は、データをページング表示したり、グリッドレイアウト用にデータを整形したりする場面でも応用できる便利なパターンなので、ぜひ覚えておきましょう。