es-toolkit、Lodash の代替品

Rishi Purwar 著✏️

JavaScript アプリケーションをしばらく構築している場合は、おそらく Lodash などのユーティリティ ライブラリを使用したことがあるでしょう。これらのライブラリには、JavaScript でのコーディングをより簡単かつ効率的にする便利な機能が満載されています。ただし、プロジェクトが成長し、より多くのユーティリティ関数を使用し始めると、バンドルのサイズも増加し始めることに気付くかもしれません。

これは、Lodash のような重いライブラリに依存している場合に特に当てはまり、より良い代替手段はないのかと疑問に思うでしょう。

そこで es-toolkit が登場します。これは、軽量で堅牢な TypeScript サポートを備えた最新の高性能 JavaScript ユーティリティ ライブラリであり、Lodash のような人気のあるライブラリの優れた代替品となります。

es-toolkit と Lodash の主な比較は次のとおりです。

• es-toolkit は、関数、配列、オブジェクト、文字列、数学、述語、Promise などの領域をカバーする、Lodash と同様の主要なユーティリティ関数を提供します
• es-toolkit の関数は、実装で最新の JavaScript API を使用し、型チェックに TypeScript を使用し、追加の防御コードの必要性を減らすため、Lodash の関数よりも高速であることがよくあります。
• パフォーマンス ベンチマークは、es-toolkit 関数が Lodash の同等の関数よりも優れており、場合によっては大幅なマージンを上回っていることを示しています
• es-toolkit の関数は、Lodash の同等の関数と比較してバンドル サイズが大幅に小さいため、読み込み時間が短縮され、パフォーマンスが向上します
• es-toolkit は、最新の JavaScript 機能を活用し、Lodash に見られる相互依存関係を回避することで、パフォーマンスとバンドル サイズの課題に対処します
• es-toolkit 関数はほとんどがスタンドアロンであり、ユーティリティ関数が相互依存していることが多い Lodash とは異なり、不要なコードが意図せず組み込まれることを防ぎます

これらの違いについて核心を説明し、JavaScript プロジェクトで es-toolkit を使用する方法を見てみましょう。

es-toolkitの主な機能

es-toolkit がもたらすものを簡単に見てみましょう:

• 関数の結果をキャッシュするためのメモ化や、関数の呼び出し頻度を制限するためのデバウンスなどの関数
• 配列間の相違点を見つけるために重複と差異を除外するための uniq のような配列
• ディープ クローン作成用の cloneDeep やネストされたオブジェクトをフラット構造に変換する flattenObject など、JavaScript オブジェクトを処理するためのツール
• 文字列を Kebab-case に変換する kebabCase などの文字列操作ツール
• 数学ヘルパーは、乱数を生成する Random や四捨五入する Round などを使用します
• isNil などの型ガード関数を使用して、null または未定義の値を簡単にチェックできます
• 実行を少し一時停止するための遅延など、非同期コードを操作するためのユーティリティ

パフォーマンスとバンドル サイズの比較

es-toolkit の利点を真に理解するために、そのパフォーマンスとバンドル サイズを Lodash と比較してみましょう。

パフォーマンス

es-toolkit の関数は、実装で最新の JavaScript API を使用しているため、Lodash の関数よりも高速であることがよくあります。たとえば、es-toolkit の省略関数は、lodash の省略関数よりも約 11.8 倍高速です。

これは、さまざまな関数に対する es-toolkit と lodash-es のパフォーマンスを比較した表です。

Function	es-toolkit@0.0.1	lodash-es@4.17.21	Difference
omit	4,767,360 times	403,624 times	11.8×
pick	9,121,839 times	2,663,072 times	3.43×
differenceWith	9,291,897 times	4,275,222 times	2.17×
difference	10,436,101 times	5,155,631 times	2.02×
intersectionWith	8,074,722 times	3,814,479 times	2.12×
intersection	9,999,571 times	4,630,316 times	2.15×
unionBy	6,435,983 times	3,794,899 times	1.69×
union	5,059,209 times	4,771,400 times	1.06×
dropRightWhile	7,529,559 times	5,606,439 times	1.34×
groupBy	5,000,235 times	5,206,286 times	0.96×

バンドルサイズ

バンドルのサイズに関して言えば、es-toolkit は本当に優れています。バンドル サイズが小さいほど、Web アプリケーションの読み込みが速くなり、特に低速のネットワークでのパフォーマンスが向上します。

ここでは、es-toolkit と lodash-es のいくつかの一般的な関数のバンドル サイズの比較を示します。

Function	es-toolkit@0.0.1	lodash-es@4.17.21	Difference
sample	88 bytes	2,000 bytes	-95.6 percent
difference	91 bytes	3,190 bytes	-97.2 percent
sum	152 bytes	413 bytes	-63.2 percent
debounce	144 bytes	1,400 bytes	-89.7 percent
throttle	110 bytes	1,460 bytes	-92.5 percent
pick	657 bytes	3,860 bytes	-83.0 percent
zip	797 bytes	1,790 bytes	-55.5 percent

es-toolkit の機能は、Lodash の対応する機能と比較してはるかに小さいです。たとえば、es-toolkit のサンプル関数はわずか 88 バイトですが、Lodash の同じ関数は 2,000 バイトで、ほぼ 96% 小さいです!

JavaScript アプリでの es-toolkit の使用

いくつかの例を見て、JavaScript アプリケーションで es-toolkit を使用するのがいかに簡単かを見てみましょう。このセクションでは、デバウンス、スロットル、オブジェクトからの特定のプロパティの選択、配列からの重複の削除などの一般的なタスクを es-toolkit がどのように処理するかを見ていきます。

それでどうなるでしょうか？作業をさらに簡単にするために、クローンを作成してすぐに実験を開始できるスターター コード リポジトリを GitHub にまとめました。ここで取り上げるすべての例の HTML および CSS コードと、開始するために必要なものがすべて含まれています。ここのリポジトリをチェックして、フォローしてください。

デバウンスの例

ユーザーがさまざまなトピックに関する情報を検索できる Web サイトの検索機能を構築しているとします。

ユーザーが入力するたびにデータをフェッチしたいが、キーストロークごとにリクエストを送信する必要はありません。そうしないと、API が過剰な呼び出しであふれてしまう可能性があります。ここで、es-toolkit のデバウンス機能が役立ちます。

その仕組みは次のとおりです:

import { debounce } from "es-toolkit";

// a function that simulates an API call
function fetchData(query) {
  console.log(`Fetching data for: ${query}`);
}

// Using es-toolkit debounce function
const debouncedFetchData = debounce(fetchData, 1000);

document.getElementById("search-input").addEventListener("input", (event) => {
    const query = event.target.value;
    debouncedSearch(query);
});

以下のデモでは、5 文字を入力しましたが、fetchData 関数は入力を少し止めた後にのみ呼び出されます。

このようにして、デバウンス機能を使用してキーを押すたびに不要な API リクエストを行うことを回避できます。

スロットルの例

Web ページ上に、クリックするとさらに投稿を読み込むボタンがあるとします。ボタンがあまりにも早くクリックされた場合に複数の API 呼び出しが行われないようにするには、es-toolkit の throttle 関数を使用できます。これにより、ボタンが複数回クリックされた場合でも、API 呼び出しが設定された間隔でのみ発生することが保証されます。

使用方法は次のとおりです:

// Throttle Example
import { throttle } from "es-toolkit";

// Function to fetch posts from an API
async function fetchPosts() {
  console.log("Fetching new posts...");
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();
  console.log("Posts fetched:", posts);
}
// Create a throttled version of fetchPosts
const throttledFetchPosts = throttle(fetchPosts, 2000);

// Set up an event listener on the button
document.getElementById("fetch-more-posts").addEventListener("click", () => {
  console.log("button clicked");
  throttledFetchPosts();
});

この例では、ユーザーが「Fetch More Posts」ボタンを素早くクリックしても、以下のデモに示すように、fetchPosts 関数は 2 秒に 1 回しかトリガーされません。

選択例

詳細なユーザー プロファイル データがあるが、ユーザー名、電子メール、年齢などの特定のプロパティのみをユーザー概要コンポーネントに表示したいとします。 pick 関数を使用すると、これらのプロパティを簡単に抽出できます。

これがどのように機能するかを示すデモです:

// Pick Example
import { pick } from "es-toolkit";

// dummy user data
const user = {
  id: 1,
  username: "johndoe",
  firstName: "John",
  lastName: "Doe",
  email: "john.doe@example.com",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    country: "USA",
  },
  phoneNumber: "1234-5678",
};

// Use pick to select specific properties
const pickedUser = pick(user, ["username", "email", "age"]);

console.log("pickedUser", pickedUser)

この例では、pick 関数はユーザー オブジェクトからユーザー名、電子メール、および年齢のプロパティを抽出します。コンソール ログには次が出力されます:

import { debounce } from "es-toolkit";

// a function that simulates an API call
function fetchData(query) {
  console.log(`Fetching data for: ${query}`);
}

// Using es-toolkit debounce function
const debouncedFetchData = debounce(fetchData, 1000);

document.getElementById("search-input").addEventListener("input", (event) => {
    const query = event.target.value;
    debouncedSearch(query);
});

ユニークな例

ユーザーがタグを追加して投稿を分類できるブログを運営していると想像してください。各タグが 1 回だけ表示されるようにする必要があります。ここで、es-toolkit の uniq 関数が非常に役立ちます。これは、配列から重複を除外し、一意のタグのリストを取得するのに役立ちます。

これが実際的な例です:

// Throttle Example
import { throttle } from "es-toolkit";

// Function to fetch posts from an API
async function fetchPosts() {
  console.log("Fetching new posts...");
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();
  console.log("Posts fetched:", posts);
}
// Create a throttled version of fetchPosts
const throttledFetchPosts = throttle(fetchPosts, 2000);

// Set up an event listener on the button
document.getElementById("fetch-more-posts").addEventListener("click", () => {
  console.log("button clicked");
  throttledFetchPosts();
});

上記の例では、uniq 関数はタグ配列から重複を削除します。コンソール ログには次が出力されます:

// Pick Example
import { pick } from "es-toolkit";

// dummy user data
const user = {
  id: 1,
  username: "johndoe",
  firstName: "John",
  lastName: "Doe",
  email: "john.doe@example.com",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    country: "USA",
  },
  phoneNumber: "1234-5678",
};

// Use pick to select specific properties
const pickedUser = pick(user, ["username", "email", "age"]);

console.log("pickedUser", pickedUser)

es-toolkit がパフォーマンスとバンドル サイズの課題にどのように対処するか

es-toolkit がこれらの課題にどのように取り組むかについて興味があるかもしれません。 es-toolkit は内部的に最新の JavaScript API を活用して、より高速なパフォーマンスと大幅に小さいバンドル サイズを実現します。

それに加えて、es-toolkit は TypeScript を使用します。これにより、通常は実行時に引数の型をチェックする余分な防御コードの多くを削減できます。これにより、コードがより効率的に実行されるだけでなく、処理速度を低下させる可能性がある不要なオーバーヘッドが最小限に抑えられます。

もう 1 つの重要な違いは、Lodash ユーティリティ関数は多くの場合相互依存していることです。つまり、1 つの関数をインポートすると、他の多くの関数も一緒にドラッグできることになります。対照的に、es-toolkit の機能はほとんどがスタンドアロンであるため、バンドルを軽量に保つことができます。

違いを実際に確認するには、webpack-bundle-analyzer を使用してバンドルのサイズを視覚化します。すべての設定は完了したので、メイン ブランチにチェックアウトして、クローンされたリポジトリのルートから npm i && npm run build を実行するだけで、バンドルに関するすべての詳細が記載されたページが開きます。

下の画像は、es-toolkitを使用した場合のバンドルサイズを示しています。ほとんどの es-toolkit 関数はスタンドアロンであるため、バンドル サイズが小さくなっていることがわかります。

ここで、上記の例の import ステートメント内の es-toolkit を lodash-es に置き換え、npm run build を再度実行して、lodash-es バンドル サイズを確認してみましょう。

下の画像は、Lodash 関数がほとんど相互依存しており、1 つだけをインポートするときに他の多くのユーティリティを取り込んでいることを示しています。

結論

es-toolkit は、特にパフォーマンスとバンドル サイズが重要な考慮事項である場合に、Lodash などのユーティリティ ライブラリの優れた代替手段となります。バンドルのサイズが小さく、最新の JavaScript 機能の使用法、および堅固な TypeScript サポートにより、開発者にとって優れた選択肢となります。

この es-toolkit の探索が JavaScript プロジェクトに役立つことを願っていますが、ここで終わらないでください。ご自身のアプリケーションで es-toolkit を試して、以下のコメントで経験を共有することをお勧めします。コーディングを楽しんでください!

---

パフォーマンスを向上させたり、新しい機能を構築したりするために、新しい JS ライブラリを追加していますか?彼らが逆のことをしていたらどうなるでしょうか？

フロントエンドがより複雑になっていることは疑いの余地がありません。新しい JavaScript ライブラリやその他の依存関係をアプリに追加するときは、ユーザーが未知の問題に遭遇しないように、可視性を高める必要があります。

LogRocket は、JavaScript エラーを自分のブラウザで発生したかのように再生できるフロントエンド アプリケーション監視ソリューションで、バグにより効果的に対応できます。

LogRocket は、フレームワークに関係なく、あらゆるアプリで完璧に動作し、Redux、Vuex、@ngrx/store からの追加のコンテキストをログに記録するプラグインを備えています。問題が発生する原因を推測する代わりに、問題が発生したときにアプリケーションがどのような状態にあったかを集計してレポートできます。 LogRocket はアプリのパフォーマンスも監視し、クライアントの CPU 負荷、クライアントのメモリ使用量などのメトリクスをレポートします。

自信を持って構築 — 無料でモニタリングを始めましょう。

以上がes-toolkit、Lodash の代替品の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。