日常的なJavaScriptユーティリティとしてes-toolkitを使う

入力のデバウンス、配列のチャンク化、オブジェクトからのキー抽出のために Lodash を利用したことがあるなら、よく設計されたJavaScriptユーティリティライブラリの価値はすでにご存知でしょう。今、問うべきは、Lodashが依然としてデフォルトとして適切なのか、それともモダンなTypeScriptおよびESMベースのプロジェクトには、よりスリムな選択肢の方が適しているのか、という点です。

es-toolkit は、TypeScript、ESM、そしてモダンなJavaScript APIを念頭に置いてゼロから構築された、活発にメンテナンスされているJavaScriptユーティリティライブラリです。フロントエンド開発者が最も頻繁に利用するヘルパー関数群をカバーしており、Lodashと比べて顕著に小さなフットプリントでそれを実現しています。

es-toolkitとは何か、なぜ重要なのか

es-toolkitは、一般的なヘルパー関数の型付きでツリーシェイキング可能な実装を提供するモダンなJavaScriptユーティリティライブラリです。完全にTypeScriptで書かれており、独自の型定義を同梱しているため、別途 @types/ パッケージをインストールする必要はありません。

es-toolkitドキュメント に記載されているように、本ライブラリはStorybook、Recharts、CKEditor、Material UI、Nuxtを含むプロジェクトやエコシステムですでに利用されています。これほどの採用実績は、プロジェクトが活発にメンテナンスされており、本番環境での使用に適していることを示す良い指標です。

ライブラリは明確なカテゴリ — array、object、function、string、math、asyncユーティリティ — に整理されており、それぞれが独立したモジュールとして提供されています。この構造により、モダンなバンドラーであればツリーシェイキングが容易に機能します。

日常的なヘルパー関数を網羅

es-toolkitが得意とするユーティリティの実例を見てみましょう：

配列ユーティリティ

import { chunk, groupBy, uniq, difference } from 'es-toolkit';

chunk([1, 2, 3, 4, 5], 2);                          // [[1, 2], [3, 4], [5]]
groupBy(['one', 'two', 'three'], (s) => s.length);  // { 3: ['one', 'two'], 5: ['three'] }
uniq([1, 2, 2, 3]);                                 // [1, 2, 3]
difference([1, 2, 3], [2, 3]);                      // [1]

オブジェクトユーティリティ

import { pick, omit, mapValues } from 'es-toolkit';

pick({ a: 1, b: 2, c: 3 }, ['a', 'c']);    // { a: 1, c: 3 }
omit({ a: 1, b: 2, c: 3 }, ['b']);         // { a: 1, c: 3 }
mapValues({ a: 1, b: 2 }, (v) => v * 2);   // { a: 2, b: 4 }

関数ユーティリティ

import { debounce, throttle, once } from 'es-toolkit';

const handleSearch = debounce((query: string) => fetchResults(query), 300);
const handleScroll = throttle(() => updatePosition(), 100);
const initialize = once(() => setupApp());

Nullチェックと型ガード

import { isNotNil } from 'es-toolkit';

const values = [1, null, 2, undefined, 3];
values.filter(isNotNil); // [1, 2, 3] — number[] として型付けされる

ここでTypeScriptは絞り込まれた型を正しく推論します — Lodashと @types/lodash の組み合わせでは、より多くの手作業が必要になる部分です。

バンドルサイズ：実用的な差

Viteプロジェクトでes-toolkitから単一の関数をインポートすると、その関数のコードのみがバンドルに含まれます。ユーティリティによっては、追加されるバンドルサイズはLodashの同等のインポートと比較して極めて小さくなります。

この差は、ツリーシェイキングなしで lodash パッケージ全体からインポートする場合に最も顕著で、圧縮後で20 kB以上の追加になることがあります。

この差が最も重要なのは、バンドルサイズがロード時間とCore Web Vitalsに直接影響するクライアントサイドJavaScriptです。

Lodashからの移行

既存のコードベースを移行する場合、es-toolkitは互換性レイヤーを提供しています：

// 移行前
import _ from 'lodash';

// 移行後（互換モード）
import _ from 'es-toolkit/compat';

es-toolkit/compat はLodash自身のテストスイートに対してテストされており、Lodashとの完全な互換性を目指しています。とはいえ、標準の es-toolkit パッケージの方が長期的には望ましい選択です — より小さく、より高速で、TypeScriptの型もより厳密だからです。

標準パッケージはLodashよりもAPIサーフェスが小さくモダンであるため、大規模な移行の前には 公式ドキュメント を確認しておくことをお勧めします。

es-toolkitが適しているケース

以下の場合にes-toolkitを使用しましょう：

• 新しいTypeScriptまたはESMプロジェクトを開始しており、重い依存関係なしに型付きユーティリティが欲しい場合。
• バンドルサイズが懸念事項で、クリーンなツリーシェイキングを実現したい場合。
• AbortController をサポートする delay のようなモダンな非同期ヘルパーが必要な場合。
• 別途 @types/ パッケージをインストールせずに型定義を組み込みで利用したい場合。

以下の場合はLodash（またはネイティブJavaScript）を継続して使いましょう：

• 既存のLodashコードベースが大規模で、移行コストが利益を上回る場合。
• 古いアプリケーション全体でLodash特有のパターンに依存している場合。
• ランタイム環境がモダンなJavaScriptツールチェーンより前のものである場合。

まとめ

es-toolkitは、モダンなJavaScriptおよびTypeScriptプロジェクト向けの実用的でメンテナンスの行き届いたLodashの代替です。すべてのLodashワークフローをすぐに置き換えるわけではありませんが、新規プロジェクトや、バンドルサイズと型安全性が重要な任意のコードベースにおいては、デフォルトのユーティリティライブラリとして検討する価値があります。

よくある質問

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.