Zenn
Open1

JavaScript/TypeScriptでデータのチャンク分割をするならlodash.chunkがおすすめ

JavaScript
TypeScript
lodash
chunk
チャンク分割
まさぴょんまさぴょん

TypeScriptでlodash.chunkを使用して配列をチャンク分割する方法

lodash.chunkを使用すると、配列を指定したサイズで簡単に分割できます。
TypeScriptでも型定義をインストールすることで、型安全に利用できます。

インストール

まず、lodash.chunkパッケージをプロジェクトにインストールします。

npm install lodash.chunk

TypeScriptの型定義もインストールします。

npm install --save-dev @types/lodash.chunk

使用方法

chunk関数は、配列を指定したサイズの小さな配列（チャンク）に分割します。

シンタックス: 

chunk(array, [size=1])
  • array: 分割したい元の配列
  • size: 各チャンクの要素数（デフォルトは1）

基本的な使用例: 

import chunk from "lodash.chunk";

const array = [1, 2, 3, 4, 5, 6];

const chunkedArray = chunk(array, 2);

console.log(chunkedArray);
// 出力: [[1, 2], [3, 4], [5, 6]]

サイズが配列の長さを割り切れない場合: 

import chunk from "lodash.chunk";

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

const chunkedArray = chunk(array, 2);

console.log(chunkedArray);
// 出力: [[1, 2], [3, 4], [5]]

最後のチャンクは残りの要素を含みます。

注意点

  • sizeが0または負の値の場合、空の配列が返されます。
  • sizeが配列の長さ以上の場合、元の配列を含む1つのチャンクが返されます。

TypeScriptでの型推論

chunk関数はジェネリック関数であり、元の配列の要素の型を保持します。

const array: number[] = [1, 2, 3, 4, 5];
const chunkedArray: number[][] = chunk(array, 2);