新進気鋭のJS(TS)ユーティリティライブラリ es-toolkit の紹介

こんにちは。フロントエンドエンジニアの辻です。
Gaji-Labo では Next.js や React をはじめとして、その時々のモダンなフロントエンド技術を積極的に採用しています。

今回は、それにちなんで新進気鋭のユーティリティライブラリ es-toolkit を紹介します！

es-toolkit とは

es-toolkit は比較的最近に登場した JavaScript (TypeScript) のユーティリティライブラリです。
公式サイト: https://es-toolkit.slash.page/

JS (TS) のユーティリティライブラリと言えば、Lodash や Ramda が有名ですね。
es-toolkit は後発ということもあり、先発のユーティリティライブラリよりもバンドルサイズが小さく、非常に高速に動作するのが特徴です。

その性能から、2024 年後半より驚異的なスピードで広まっています。
例えば、Storybook では v8.4.0 より Lodash に代わり es-toolkit が採用されました。
https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md#840

es-toolkit の便利な関数

さて、ここからは個人的によく利用する es-toolkit の便利な関数を紹介していきます。

cloneDeep

ユーティリティライブラリで最も利用する機能といえば「要素の複製」と言っても過言ではないでしょう。
es-toolkit では cloneDeep() 関数がそれにあたります。
使い方は簡単で cloneDeep() に複製したい要素を投げるだけです。

また、複製元がオブジェクトなら、元オブジェクトを参照しない全く新しいオブジェクトを生成できます。

import { cloneDeep } from "es-toolkit";

const obj = { a: 1, b: 2, c: 3 };
const obj2 = cloneDeep(obj);
console.log(obj2); // { a: 1, b: 2, c: 3}

cloneDeep: https://es-toolkit.slash.page/reference/object/cloneDeep.html

isEqual

「2 つの要素が等価か」を判定する関数です。
こちらもユーティリティライブラリでよく利用される機能の 1 つですね。

import { isEqual } from "es-toolkit";

const obj = { a: 1, b: 2, c: 3 };
const obj2 = { a: 1, b: 2, c: 3 };
const obj3 = { a: 4, b: 5, c: 6 };
console.log(isEqual(obj, obj2)); // true
console.log(isEqual(obj, obj3)); // false

isEqual: https://es-toolkit.slash.page/reference/predicate/isEqual.html

flow

「引数の関数を順次実行する関数として生成する」関数です。
使い方としては ramda における pipe() と似ていますね。

小さい関数をたくさん作成した後に、1つの大きな関数を合成する時に便利です。

import { flow } from "es-toolkit";

const add = (target: number) => target + 8;
const sub = (target: number) => target - 6;
const mul = (target: number) => target * 4;
const div = (target: number) => target / 2;

const calc = flow(add, sub, mul, div); // 引数に +8 して -6 して *4 して /2 する関数を生成
console.log(calc(20)); // 44

flow: https://es-toolkit.slash.page/reference/function/flow.html

delay

「指定した時間分だけ処理を待機させる」関数です。
注意点として、delay は Promise を返すので、呼び出す際は await をつけるなりしないと、適切に動作しません。

テストコードにおける「任意のタイミングだけ遅延させて、次の処理を…」って時に便利ですね。

import { delay } from "es-toolkit";

const main = async () => {
  console.log("Run");
  await delay(3 * 1000); // 3 秒待機後に Complete を出力する
  console.log("Complete");
};

main()

delay: https://es-toolkit.slash.page/reference/promise/delay.html

curry

任意の関数に対して「引数と関数の実行を1セットにして、順次実行する関数に変換する」関数です。いわゆる「カリー化」を適用してくれる関数ですね。
使い所を選びますが、うまくハマると強力な機能です。

引数を大量にもつ関数に対して curry() を利用すれば、引数の適用と実行を分離できてコードが見やすくなりますね。

import { curry } from "es-toolkit";

const calc = (a: number, b: number, c: number, d: number) => {
  return a + b * (c - d);
};

const curriedCalc = curry(calc);
const curriedCalc1 = curriedCalc(10); // 引数 a に 10 をセット
const curriedCalc2 = curriedCalc1(5)(4); // 引数 b に 5 を。引数 c には 4 をセット。
console.log(curriedCalc2(2)); // 引数 d に 2 をセットして実行。実行結果は 20

curry: https://es-toolkit.slash.page/reference/function/curry.html

まとめ

以上、es-toolkit の簡単な紹介と、よく利用する便利な関数を見てきました。
es-toolkit を導入すれば開発効率もグッとあがりますし、わざわざ車輪の再発明をせずに済みますね。

Gaji-Labo では、その時々のモダンなフロントエンド技術を積極的に採用しています。
技術的にも積極的にチャレンジできる環境が整っていますので、フロントエンドエンジニア職に興味のある方はお気軽にご応募ください！

Gaji-Labo フロントエンドエンジニア向けご案内資料