JavaScriptで1次元配列を2次元配列に分割する方法を解説

JavaScriptでは、1次元配列を指定した行数のサブ配列に分割し、2次元配列として扱いたい場面があります。本記事では、第1引数に1次元配列、第2引数に分割したい行数nを受け取り、親配列の中にn個のサブ配列を作成して要素を振り分ける関数の実装方法を解説します。

分割時のルール

要素数が行数で割り切れない場合には注意が必要です。例えば、配列に9個の要素が含まれており、4つのサブ配列を作成したいとします。1サブ配列あたり2要素ずつ割り当てると5つのサブ配列が必要になり、3要素ずつ割り当てると3つのサブ配列で収まります。このようなケースでは、「最後のサブ配列を除き、各サブ配列にできるだけ均等な数の要素を配分する」という要件を満たすため、より小さい側の値(この場合は3)にフォールバックする必要があります。

期待される出力の例

例えば、以下のような入力が与えられた場合を考えてみましょう。

// 入力配列が以下の場合:
const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
// 指定する行数が2の場合
// 出力は次のようになります:
const output = [ [ 'A', 'B', 'C', 'D', 'E' ], [ 'F', 'G', 'H', 'I' ] ];

それでは、この関数のコードを書いていきましょう。

実装コード

const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
const splitArray = (arr, rows) => {
    const itemsPerRow = Math.ceil(arr.length / rows);
    return arr.reduce((acc, val, ind) => {
        const currentRow = Math.floor(ind / itemsPerRow);
        if(!acc[currentRow]){
            acc[currentRow] = [val];
        }else{
            acc[currentRow].push(val);
        };
        return acc;
    }, []);
};
console.log(splitArray(arr, 2));

コードの解説

この関数の仕組みは以下の通りです。

まず、Math.ceil()を使って「1行あたりの要素数(itemsPerRow)」を計算します。9個の要素を2行に分割する場合、ceil(9 / 2) = 5 となるため、1行目に5要素が割り当てられます。

次に、reduce()で配列を走査しながら、各要素のインデックスをitemsPerRowで割り、その商(Math.floor)から「現在の行番号」を判定します。まだ存在しない行であれば新しいサブ配列を作成し、既存の行であればそのサブ配列に要素をpushしていきます。

実行結果

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

[ [ 'A', 'B', 'C', 'D', 'E' ], [ 'F', 'G', 'H', 'I' ] ]

このように、Math.ceil()とreduce()を組み合わせることで、要素数が割り切れない場合でも、各サブ配列に均等に近い形で要素を配分した2次元配列を簡単に生成できます。ページネーション処理やグリッドレイアウト用のデータ整形など、さまざまな場面で応用できるテクニックなので、ぜひ活用してみてください。