es-toolkit入門：最先端JavaScriptユーティリティライブラリの特徴・インストール・Lodash移行を徹底解説

es-toolkit入門最先端JavaScriptユーティリティライブラリの特徴・インストール・Lodash移行を徹底解説【免费下载链接】es-toolkitA modern JavaScript utility library thats 2-3 times faster and up to 97% smaller, a major upgrade to lodash.项目地址: https://gitcode.com/GitHub_Trending/es/es-toolkit本記事は、es-toolkit の日本語公式ドキュメントトップページをベースに、そのコアコンセプトである「高速なパフォーマンス」「小さなバンドルサイズ」「Lodash 互換レイヤー」「モダンな実装」を、リポジトリ内のソースコード・テスト・ベンチマークと照らし合わせて解説する実践ガイドです。読み終える頃には、es-toolkit を Node.js / Deno / Bun / ブラウザの各環境で導入し、es-toolkit/compatを使って既存の Lodash コードベースを段階的に移行する手順までを、実際のコード例とともに理解できます。es-toolkitとはes-toolkit は「最先端State-of-the-artの JavaScript ユーティリティライブラリ」を謳う、日常的な開発で使用するさまざまな関数を集めたライブラリです日本語トップページ、英語イントロダクション。Lodashより同じ関数基準で最大97%小さいバンドルサイズバンドルサイズに関するドキュメント2〜3倍高速な実行時パフォーマンスパフォーマンスに関するドキュメントこれらは「最新の JavaScript API を活用した現代的モダンな実装」によって達成されています。さらに、堅固な TypeScript 型を内蔵しており、信頼性を高めるために 100% のテストカバレッジを目指しています。パッケージ自体の説明文にも、src/index.ts の冒頭コメントで「2〜3倍高速で最大97%小さく、lodash からのメジャーアップグレード」と明記されています。ホームページが掲げる8つのコアバリュー日本語トップページdocs/ja/index.mdのfeaturesセクションでは、es-toolkit の強みが8項目に整理されています。それぞれについて、ドキュメントの記述とリポジトリ内の裏付けを確認していきます。1. 高速なパフォーマンストップページでは「同様の機能を提供する他のライブラリと比較して、平均2〜3倍高速な実行時パフォーマンス」と説明されています。パフォーマンスドキュメントによれば、平均で2倍、関数によっては最新の JavaScript API を最大限に活用することで最大11倍の性能向上を実現する関数もあるとのことです。これらの数値は、リポジトリ内の benchmarks/performance ディレクトリに置かれた多数のベンチマーク例chunk.bench.ts、debounce.bench.ts などによって検証可能です。ベンチマークはyarn benchpackage.jsonのbenchスクリプトで実行できます。2. 小さなバンドルサイズ「同等の機能を持つ関数を基準に、最大97%小さな JavaScript サイズ」というのがトップページの主張です。バンドルサイズドキュメントによると、ユーティリティ関数の中には100バイト未満のものもあるとされ、バンドルサイズ効率の高さが強調されています。測定方法も公開されており、esbuild 0.28.0を用いて、以下のようなコードを解析してサイズを計測していますbundle-size.md よりimport { chunk } from es-toolkit; // or import { chunk } from lodash-es; console.log(chunk);計測用のコードは benchmarks/bundle-size にあり、package.jsonにはsideEffects: falseが設定されているため、ツリーシェイキングが効きやすく、使った関数だけがバンドルに残ります。3. 簡単なLodashの代替compatレイヤートップページは「es-toolkit は Lodash を簡単に代替できる完全な互換性レイヤーを提供する」と説明しています。これがes-toolkit/compatです。詳細は後述の「Lodash互換レイヤーes-toolkit/compat」セクションで解説します。4. モダンな実装「最新の JavaScript API を使用しているため、実装が直感的でシンプル」というのがトップページの記述です。実際の実装例は後述の「モダンな実装の具体例」セクションで、src/array/chunk.ts を題材に詳しく見ていきます。5. 堅牢な型定義「すべての関数に対してシンプルながら堅牢な型定義」が提供されています。例として、型ガード関数 isNotNil は、nullやundefinedを除外した型に絞り込む TypeScript の型ガードとして機能します。型定義は各ソースファイルに直接記述されており、jsr.jsonやpackage.jsonの exports 構成からも、TypeScript 型がファーストクラスでサポートされていることがわかります。6. 幅広い採用トップページでは「Storybook、Recharts、ink、MUI、CKEditor などの人気のオープンソースプロジェクトから信頼され、採用されている」と紹介されています公式ドキュメントの記述に基づくものです。7. テストカバレッジ100%「すべての関数とブランチに対して、綿密なテストが作成されている」とされています。リポジトリを見ると、各関数に対応する*.spec.tsテストファイルが並んでおり例src/array/chunk.spec.ts、vitest.config.mts ではvitest --coveragepackage.jsonのtestスクリプトによるイスタンブール・カバレッジ計測が設定されています。カバレッジ対象はsrc/**/*で、src/compat/_internalと*.spec.tsが除外指定されています。8. あらゆる環境で使用可能「Node.js、Deno、Bun、そしてブラウザまで、幅広い JavaScript 環境をサポート」しています。具体的なインストール方法は次のセクションで詳しく説明します。インストールと使用方法日本語の使用ガイドでは、環境ごとのインストール方法が詳述されています。以下、環境別にまとめます。Node.jses-toolkit はNode.js 18 以降をサポートしています。パッケージマネージャーに応じて以下のコマンドでインストールしますnpm install es-toolkitpnpm add es-toolkityarn add es-toolkit使用例は以下の通りですimport { sum } from es-toolkit; sum([1, 2, 3]);DenoJSRDeno では JSR からインストールします。JSR の制約により、npm とは異なり追加のスコープが必要になる点に注意してくださいdeno add jsr:es-toolkit/es-toolkitimport { sum } from es-toolkit/es-toolkit; sum([1, 2, 3]);jsr.json のnameがes-toolkit/es-toolkitであることからも、JSR 側のパッケージ名がスコープ付きであることが確認できますjsr.json。BunBun でも npm レジストリ経由でそのまま利用できますbun add es-toolkitブラウザCDNjsdelivr や unpkg などの CDN から利用できます。Lodash と同様に、_変数にすべての関数が含まれます。実際、package.jsonにはjsdelivr: ./dist/browser.global.jsとunpkg: ./dist/browser.global.jsが定義されており、グローバルビルドが CDN 向けに提供されていることがわかります。script srchttps://cdn.jsdelivr.net/npm/es-toolkit%5E1/script script var arr _.chunk([1, 2, 3, 4, 5, 6], 3); /scriptscript srchttps://unpkg.com/es-toolkit%5E1/script script var arr _.chunk([1, 2, 3, 4, 5, 6], 3); /scriptモダンなブラウザでは、ES Modules 対応の esm.sh も利用できます。importmapを使うことで、バンドラなしでも名前付きインポートが可能ですscript typeimportmap { imports: { es-toolkit: https://esm.sh/es-toolkit%5E1 } } /script script typemodule import { chunk } from es-toolkit; chunk([1, 2, 3, 4, 5, 6], 3); /scriptサブパスインポートカテゴリ別・関数別の読み込みpackage.json のexportsフィールドを見ると、トップレベルのes-toolkitに加えて、カテゴリごとのサブパスが公開されていますes-toolkit/array→ src/array/index.tses-toolkit/compat→ src/compat/index.tses-toolkit/function、es-toolkit/math、es-toolkit/object、es-toolkit/predicate、es-toolkit/promise、es-toolkit/string、es-toolkit/utilなどこれにより、import { chunk } from es-toolkit/arrayのように必要なカテゴリだけを読み込むこともできます。また compat では関数単位のエントリポイント後述も提供されています。Lodash互換レイヤーes-toolkit/compatcompat イントロダクションによると、es-toolkit/compatはLodash のインターフェースと挙動を 1:1 でミラーリングする互換レイヤーです。既存の Lodash コードベースを呼び出し箇所を書き換えずに es-toolkit へ移行し、その後ゆっくりと strict な APIes-toolkitへ移行するための踏み台として設計されています。なお、Lodash をまだ使っていないプロジェクトでは、es-toolkitstrict APIを使うことが推奨されています。さらに、es-toolkit/compatはv1.39.3 以降、Lodash 自身のテストスイートを通過しており、挙動が同一でありながら軽量かつ高速です。// lodash と同じ呼び出しシグネチャ。ただし import 元は es-toolkit/compat import { chunk } from es-toolkit/compat; chunk([1, 2, 3, 4], 0); // Returns [], identical to lodash移行フロー既存コードベースから Lodash を除去する推奨パスは次の2ステップですlodash/lodash-esの import パスをes-toolkit/compatに置き換える呼び出し箇所はそのまま時間をかけて呼び出し箇所を整理し、import をes-toolkitstrict APIへ切り替える。これにより、より小さなバンドルと高速な実行時性能が得られる関数単位のインポートlodash/mergeと同様に、compat のすべての関数は個別のエントリポイントとしても利用できます。これは、モジュール全体ではなくその関数が必要とするファイルだけを読み込む仕組みですimport merge from es-toolkit/compat/merge;これは、ツリーシェイキングが使えない環境CommonJS のrequire()、React Native、バンドラなしで直接 Node.js 上で動かすコードなどで特に役立ちますconst merge require(es-toolkit/compat/merge);es-toolkitとの違いcompat レイヤーと strict API の主な違いは以下の通りですdocs/compat/intro.md よりAPI 形状Lodash と 1:1 で一致暗黙の型変換、複数の引数形状、非推奨ヘルパーを含む。一方es-toolkitは型安全でモダンな形式のみを公開バンドルサイズと速度Lodash の挙動に合わせるための追加ロジックがあるため、es-toolkitよりわずかに大きく、わずかに遅い非推奨関数compat には互換性のため残されているが、es-toolkitには含まれない。移行時に整理する必要がある設計原則と対象外compat レイヤーは、以下の3つのソースから 100% の正確さで機能のパリティを目指していますlodash にテストケースとして書かれている機能types/lodashまたはtypes/lodash-esの型から推論できる機能lodash から es-toolkit への移行中に発見された機能差異issues ページへの報告が呼びかけられています一方、以下はes-toolkit/compatの対象外とされています空文字列をゼロや false に変換するような暗黙の型変換sortedUniqのように特定の型の配列に特化した実装を持つ関数Array.prototypeなど内部オブジェクトのプロトタイプが改変されているケースの処理JavaScript のレルムrealmをまたぐケースの管理_(arr).map(...).filter(...)のようなメソッドチェーンモダンな実装の具体例chunkのソースコードトップページの「モダンな実装」の主張を、実際のソースコードで確認してみましょう。src/array/chunk.ts の実装は次のようになっていますexport function chunkT(arr: readonly T[], size: number): T[][] { if (!Number.isInteger(size) || size 0) { throw new Error(Size must be an integer greater than zero.); } const chunkLength Math.ceil(arr.length / size); const result: T[][] Array(chunkLength); for (let index 0; index chunkLength; index) { const start index * size; const end start size; result[index] arr.slice(start, end); } return result; }この実装から読み取れるポイントは以下の通りです厳格な入力検証Number.isIntegerとsize 0のチェックで、正の整数以外をエラーとして拒否します。これは「型安全でモダンな形式のみを公開する」という strict API の設計思想と一致します同じchunkでも compat 版は lodash と同じくsize: 0で[]を返します。両者の差が移行フローの理解に役立ちます。事前割り当てによるメモリ最適化Array(chunkLength)で結果配列の長さを事前に確保してからsliceで埋めるため、配列の再成長を避けられます。Math.ceilによる末尾要素の扱い割り切れない場合、最後のサブ配列に残りの要素が入ります例chunk([1, 2, 3, 4, 5], 2)は[[1, 2], [3, 4], [5]]。このように、関数はどれも小規模で読みやすく、最新の標準 APINumber.isInteger、Array、sliceだけで構成されています。ソースコメントにも「指定された長さの小さな配列に分割する」という役割と、引数・戻り値・例外・使用例が JSDoc として完備されていることが確認できます。パフォーマンスとバンドルサイズの測定方法公式ドキュメントの数値がどのように測定されているかも確認しておきましょう。パフォーマンスについては、benchmarks/performance に lodash などとの比較ベンチマークが大量に置かれていますadd、chunk、debounce、throttle、mergeなど数百ファイル。ドキュメントの performance.md には、実行環境別の比較テーブルと、benchmark code への言及があります。バンドルサイズについては、bundle-size.md のとおり esbuild 0.28.0 を使用し、単一関数を import したコードの出力サイズを解析して比較しています。計測コードは benchmarks/bundle-size にあり、docs/data/bundle-size.jsonやdocs/data/benchmark-results.jsonに結果データが保存されています。注記具体的な性能数値やサイズ削減率2〜3倍、最大97%、100バイト未満などは公式ドキュメントの記載をそのまま引用したものです。実際の値は実行環境・関数・測定条件によって変動するため、導入時には自身の環境でベンチマークを実行して確認することをおすすめします。まとめと次のステップes-toolkit は、モダンな実装による高速性と軽量性、堅牢な TypeScript 型、100% テストカバレッジ、そしてLodash 互換レイヤーによるシームレスな移行という価値提案を持つユーティリティライブラリです。Node.js 18 以降・DenoJSR・Bun・ブラウザCDNと、あらゆる主要な JavaScript 環境で利用できます。本記事で紹介した内容をさらに深掘りしたい場合は、以下のドキュメントが役立ちますes-toolkit の紹介日本語インストールと使用方法日本語バンドルサイズへの影響日本語パフォーマンス日本語compat レイヤーの紹介英語関数リファレンスuniq・difference・debounce・throttle・sum・round・pick・omit・isNotNil・delay・snakeCaseソースコードエントリポイント、実装例、パッケージ構成【免费下载链接】es-toolkitA modern JavaScript utility library thats 2-3 times faster and up to 97% smaller, a major upgrade to lodash.项目地址: https://gitcode.com/GitHub_Trending/es/es-toolkit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考