JavaScript配列の分割（chunk）の基本と実践
「配列を一定サイズごとに分割したい」場面はよくあります。例えば、ページネーションやバッチ処理など。JavaScriptには標準で chunk 関数はありませんが、forループ＋slice を使えば簡単に実現できます。
基本の仕組み
const chunks = [];
for (let i = 0; i < arr.length; i += n) {
chunks.push(arr.slice(i, i + n));
}
- arr: 元の配列
- n: 分割サイズ（例：3なら3個ずつ）
- slice(i, i+n): 配列の一部を切り出す（iからi+n未満まで）
- chunks: 分割後の配列をまとめた二次元配列
すぐ使えるテンプレート集
基本：3個ずつ分割
const arr = [1, 2, 3, 4, 5, 6, 7];
const n = 3;
const chunks = [];
for (let i = 0; i < arr.length; i += n) {
chunks.push(arr.slice(i, i + n));
}
console.log(chunks);
// [[1,2,3],[4,5,6],[7]]
- ポイント: 最後のグループは要素が足りなくてもそのまま残る。
文字列配列を分割（例：ページネーション）
const items = ["A","B","C","D","E","F","G"];
const pageSize = 2;
const pages = [];
for (let i = 0; i < items.length; i += pageSize) {
pages.push(items.slice(i, i + pageSize));
}
console.log(pages);
// [["A","B"],["C","D"],["E","F"],["G"]]
- ポイント: ページサイズごとに分割できるので、UI表示に便利。
関数化して再利用
function chunkArray(arr, size) {
const chunks = [];
for (let i = 0; i < arr.length; i += size) {
chunks.push(arr.slice(i, i + size));
}
return chunks;
}
console.log(chunkArray([1,2,3,4,5], 2));
// [[1,2],[3,4],[5]]
- ポイント: 関数化すればどんな配列でも簡単に分割できる。
よくある落とし穴と対策
- sizeが0や負数: 無限ループや空配列になる。必ず
size > 0をチェック。 - 元配列は変更されない: sliceは非破壊的。元配列を壊さないので安心。
- 最後のグループが小さい: 仕様として自然。必要なら埋める処理を追加。
他の手段との比較
| 手段 | 特徴 |
|---|---|
| for＋slice | シンプルで標準的 |
| whileループ | 同じ仕組みを別の書き方で |
lodashの _.chunk | ライブラリで一発（便利だが依存が増える） |
練習問題（手を動かして覚える）
1. 5個ずつ分割
const nums = [1,2,3,4,5,6,7,8,9,10,11];
console.log(chunkArray(nums, 5));
// [[1,2,3,4,5],[6,7,8,9,10],[11]]
2. 名前リストを3人ずつのグループに
const names = ["Aki","Mao","Ren","Mika","Ken","Sara","Leo"];
console.log(chunkArray(names, 3));
// [["Aki","Mao","Ren"],["Mika","Ken","Sara"],["Leo"]]
3. ページネーション用に分割
const posts = Array.from({length:10}, (_,i)=>`Post${i+1}`);
console.log(chunkArray(posts, 4));
// [["Post1","Post2","Post3","Post4"],["Post5","Post6","Post7","Post8"],["Post9","Post10"]]
直感的な指針
- 小分けにしたい: for＋sliceでchunk化
- 再利用したい: 関数化して
chunkArray(arr, size) - ライブラリ利用: lodashの
_.chunkが一発
