JavaScriptで配列をn個ずつのグループに分割する方法

本記事では、要素の配列と数値を引数として受け取り、第1引数の配列を第2引数で指定した長さ n ごとのグループに分割し、その結果得られる二次元配列を返すJavaScript関数の実装方法を詳しく解説します。

要件の確認

たとえば、配列と数値が以下のように与えられたとします。

const arr = ['a', 'b', 'c', 'd'];
const n = 2;

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

const output = [['a', 'b'], ['c', 'd']];

このように、元の配列が2要素ずつのかたまり(チャンク)に分割され、それらをまとめた新しい配列が返されます。

forループと剰余演算子を使った実装

まずは、基本的なforループと剰余演算子(<code>%</code>)を組み合わせた実装例を見てみましょう。

const arr = ['a', 'b', 'c', 'd'];
const n = 2;

const chunk = (arr, size) => {
   const res = [];
   for(let i = 0; i < arr.length; i++) {
      if(i % size === 0){
         // インデックスがsizeの倍数なら、新しいグループを作成
         res.push([arr[i]]);
      } else {
         // それ以外は、直前に作成したグループへ要素を追加
         res[res.length - 1].push(arr[i]);
      }
   }
   return res;
};

console.log(chunk(arr, n));

出力結果

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

[ [ 'a', 'b' ], [ 'c', 'd' ] ]

コードの解説

このコードの仕組みは以下のとおりです。

• 結果を格納するための空配列 <code>res</code> を用意します。
• <code>i % size === 0</code>(インデックスがsizeの倍数)のときは、現在の要素を先頭とする新しいグループ配列を <code>res</code> に追加します。
• それ以外の場合は、<code>res</code> の最後のグループに現在の要素を追加していきます。
• ループが完了したら <code>res</code> を返します。

slice()メソッドを使ったより簡潔な実装

もう少しシンプルに書きたい場合は、<code>Array.prototype.slice()</code> を活用する方法もおすすめです。

const chunk = (arr, size) => {
   const res = [];
   for(let i = 0; i < arr.length; i += size) {
      res.push(arr.slice(i, i + size));
   }
   return res;
};

console.log(chunk(['a', 'b', 'c', 'd'], 2));
// [ [ 'a', 'b' ], [ 'c', 'd' ] ]

この方法では、ループのカウンタをsize分ずつ進めながら、<code>slice()</code>で該当範囲の要素を切り出して新しい配列に追加しています。コードが短くなり、意図も読み取りやすくなるのがメリットです。

まとめ

配列を固定長のグループに分割する処理(チャンク化)は、ページネーションやデータの一括処理など、実際の開発でもよく使われるテクニックです。可読性重視なら <code>slice()</code> を使う方法、ロジックを細かく制御したい場合は剰余演算子を使う方法と、状況に応じて使い分けてください。