配列を決まった数ずつに分ける

slice() を繰り返して塊にします。端数の扱い、空配列のとき、要素数より大きい数を渡したとき、そして 0 を渡すと止まらなくなる理由まで、実行して確かめます。

答え

slice() を繰り返します。

example.js

function chunk(list, size) {
  const out = [];

  for (let i = 0; i < list.length; i += size) {
    out.push(list.slice(i, i + size));
  }

  return out;
}

console.log(chunk([1, 2, 3, 4, 5], 2));

出力書き換えて実行できます

Ctrl+Enter でも実行JS · UTF-8

[ [ 1, 2 ], [ 3, 4 ], [ 5 ] ]

example.js

function chunk(list, size) {
  const out = [];

  for (let i = 0; i < list.length; i += size) {
    out.push(list.slice(i, i + size));
  }

  return out;
}

console.log(chunk([1, 2, 3], 5));
console.log(chunk([], 2));
console.log(chunk([1, 2, 3], 1));

出力書き換えて実行できます

Ctrl+Enter でも実行JS · UTF-8

[ [ 1, 2, 3 ] ] [] [ [ 1 ], [ 2 ], [ 3 ] ]

標準のメソッドはありません。 これだけで足ります。

端は自然に処理される

example.js

function chunk(list, size) {
  return Array.from({ length: Math.ceil(list.length / size) }, (_, i) =>
    list.slice(i * size, i * size + size));
}

console.log(chunk([1, 2, 3, 4, 5], 2));
console.log(Math.ceil(5 / 2));

出力書き換えて実行できます

Ctrl+Enter でも実行JS · UTF-8

[ [ 1, 2 ], [ 3, 4 ], [ 5 ] ] 3

javascript

for (let i = 0; i < list.length; i += 0) {
  // i がずっと 0 のまま。永久に終わらない
}

要素数より大きい数を渡すと、塊は1つ
空配列なら空配列（[[]] にはならない）
1 を渡すと、1個ずつの塊

slice() は範囲を超えても落ちないので、割り切れないときの場合分けが要りません。 → slice() と splice()

`Array.from()` で書く

先に個数を決めてから作る書き方もあります。

example.js

function chunk(list, size) {
  if (!Number.isInteger(size) || size < 1) {
    throw new RangeError('size は 1 以上の整数にしてください');
  }

  const out = [];

  for (let i = 0; i < list.length; i += size) {
    out.push(list.slice(i, i + size));
  }

  return out;
}

console.log(chunk([1, 2, 3], 2));

try {
  chunk([1, 2, 3], 0);
} catch (error) {
  console.log(error.name + ': ' + error.message);
}

出力書き換えて実行できます

Ctrl+Enter でも実行JS · UTF-8

[ [ 1, 2 ], [ 3 ] ] RangeError: size は 1 以上の整数にしてください

example.js

function chunk(list, size) {
  const out = [];

  for (let i = 0; i < list.length; i += size) {
    out.push(list.slice(i, i + size));
  }

  return out;
}

console.log(chunk('abcdef', 2));

出力書き換えて実行できます

Ctrl+Enter でも実行JS · UTF-8

[ 'ab', 'cd', 'ef' ]

Math.ceil() で切り上げるのが要点です。5 / 2 は 2.5 なので、塊は3つ。

どちらでも構いません。 for のほうが読み手を選ばないので、迷ったらそちらで。

気をつけること：`0` を渡すと止まらない

example.js

function chunk(list, size) {
  const out = [];

  for (let i = 0; i < list.length; i += size) {
    out.push(list.slice(i, i + size));
  }

  return out;
}

const rows = [{ id: 1 }, { id: 2 }, { id: 3 }];
const pages = chunk(rows, 2);

pages[0][0].id = 99;

console.log(rows[0].id);
console.log(pages.length, pages.flat().length);

出力書き換えて実行できます

Ctrl+Enter でも実行JS · UTF-8

99 2 3

size に 0 が入ると i が進まず、無限ループになります。

このページでは実行できません。 止まらないコードは実行の枠を使い切ってしまいます。

size が変数から来るなら、先に確かめてください。

javascript

function wrong(list, size) {
  const out = [];

  for (let i = 0; i < list.length; i++) {
    out.push(list.slice(i, i + size));
  }

  return out;
}

console.log(wrong([1, 2, 3, 4], 2));

[ [ 1, 2 ], [ 2, 3 ], [ 3, 4 ], [ 4 ] ]

example.js

async function load(n) {
  return n * 10;
}

const ids = [1, 2, 3, 4, 5];
const out = [];

for (let i = 0; i < ids.length; i += 2) {
  const part = ids.slice(i, i + 2);

  console.log('この回:', part);
  out.push(...await Promise.all(part.map(load)));
}

console.log(out);

出力書き換えて実行できます

Ctrl+Enter でも実行JS · UTF-8

この回: [ 1, 2 ] この回: [ 3, 4 ] この回: [ 5 ] [ 10, 20, 30, 40, 50 ]

外から来る値は、使う前に確かめる。 これは分割に限りません。

文字列にも使える

slice() は文字列にもあるので、同じ関数がそのまま動きます。

example.js

function chunk(list, size) {
  const out = [];

  for (let i = 0; i < list.length; i += size) {
    out.push(list.slice(i, i + size));
  }

  return out;
}

const rows = ['あ', 'い', 'う', 'え', 'お'];

chunk(rows, 2).forEach((page, i) => {
  console.log(`${i + 1}ページ目: ${page.join(', ')}`);
});

出力書き換えて実行できます

Ctrl+Enter でも実行JS · UTF-8

1ページ目: あ, い 2ページ目: う, え 3ページ目: お

example.js

const pages = [[1, 2], [3, 4], [5]];

console.log(pages.flat());
console.log(pages.flat().length);

出力書き換えて実行できます

Ctrl+Enter でも実行JS · UTF-8

[ 1, 2, 3, 4, 5 ] 5

ただし絵文字は途中で割れます。 文字として分けたいなら、先に [...text] で配列にしてから渡してください。 → 文字を正しく数える

中身は複製されない

slice() は浅いコピーなので、塊の中身は元と同じオブジェクトです。分けただけで安全になったわけではありません。

よくある間違い

進める幅を間違える

i++ にすると1つずつずれた窓になり、要素が重複します。 進める幅は size です。

ちなみに、この「1つずつずらした窓」が欲しい場面もあります（移動平均など）。そのときは意図してこう書きます。

何に使うか

いちばん多いのは、まとめて処理する数を抑えるときです。

塊の中は同時、塊どうしは順番になります。 1000件を一度に投げて断られる、という事故を防げます。 → 複数の非同期処理を同時に走らせる

表示を何行かごとに区切る、まとめて登録する、といった用途にも同じ形が使えます。

何番目の塊かを一緒に持つ

表示するときは、塊の番号が要ることが多くあります。

forEach() の第2引数が何番目かです。 → 配列を繰り返す

逆に、平らに戻す

flat() で1段だけ戻せます。

分けて、処理して、戻すという形がそのまま書けます。 → 入れ子の配列を平らにする

まとめ

slice() を size ずつずらすだけ。標準のメソッドは無い
端数・空配列・大きすぎる size は自然に処理される。場合分けは要らない
size に 0 を渡すと止まらない。 外から来るなら先に確かめる
同時に走らせる数を抑えるのが、いちばん多い使い道

配列を決まった数ずつに分ける

答え

端は自然に処理される

Array.from() で書く

気をつけること：0 を渡すと止まらない

文字列にも使える

中身は複製されない

よくある間違い

進める幅を間違える

何に使うか

何番目の塊かを一緒に持つ

逆に、平らに戻す

まとめ

この記事の根拠

関連するページ

Array.prototype.slice() と splice()

複数の非同期処理を同時に走らせる

Array.prototype.map()

`Array.from()` で書く

気をつけること：`0` を渡すと止まらない