🔧
Lodashで使える便利な関数と代替可能なJavaScriptの標準機能
はじめに
この記事は、個人開発するにあたり、参考にするコードでよく見かけるLodashがどんなものか気になったため、使われていた関数をまとめてみました。
個人的なメモも兼ねていますので、便利なものがあれば追加していこうと思っています。
Lodash とは？
Lodashとは、JavaScriptで作業を効率化するためのユーティリティライブラリです。多くの一般的なプログラミングタスクを簡単に実行できるようにするための関数群を提供しています。
インストール
CDN
Node.js
npm install --save lodash
npm install --save-dev @types/lodash
yarn add lodash
yarn add -D @types/lodash
pnpm install lodash
pnpm install -D @types/lodash
インポート
CDNの場合は基本的にフルインポートになりますが、Node.jsの場合、インポートの方法によってバンドルサイズを抑えられるため、部分的にLodashの関数を利用する場合は個別機能インポートを活用するといいそうです。
フルインポート
const _ = require("lodash");
import _ from "lodash";
分割インポート ( バンドルサイズはフルインポートと同じ )
const { isEqual } = require("lodash");
import { isEqual } from "lodash";
個別機能インポート
const isEqual = require("lodash/isEqual");
import isEqual from "lodash/isEqual";
Lodash 関数
オブジェクト操作
| 関数名 | 活用方法 | パス | JavaScript 標準機能 |
|---|---|---|---|
| assign | オブジェクトにプロパティをコピーします。 | lodash/assign | Object.assign |
| cloneDeep | オブジェクトや配列を深くコピーします。ネストされた構造も保持します。 | lodash/cloneDeep | |
| get | オブジェクトのプロパティ値を取得し、存在しない場合はデフォルト値を返します。 | lodash/get | |
| isEmpty | 値が空かどうかを判定します（オブジェクト、配列、文字列など）。 | lodash/isEmpty | |
| isEqual | 2 つの値を深く比較し、等しいかどうかを判定します。 | lodash/isEqual | |
| isEqualWith | カスタム比較関数を使用して 2 つの値を深く比較します。 | lodash/isEqualWith | |
| mapValues | オブジェクトのプロパティ値を変換します。 | lodash/mapValues | |
| merge | 2 つ以上のオブジェクトをマージします。ネストされたプロパティもマージします。 | lodash/merge | |
| omit | オブジェクトから指定したプロパティを除外します。 | lodash/omit | |
| pick | オブジェクトから指定したプロパティだけを抽出します。 | lodash/pick | |
| pickBy | 条件に一致するプロパティを持つオブジェクトのプロパティを抽出します。 | lodash/pickBy | |
| toPairs | オブジェクトのキーと値をペアにした配列を作成します。 | lodash/toPairs | |
| values | オブジェクトの値を配列として取得します。 | lodash/values | Object.values |
関数操作
| 関数名 | 活用方法 | パス | JavaScript 標準機能 |
|---|---|---|---|
| bind | 関数にコンテキスト（this）をバインドします。 | lodash/bind | Function.prototype.bind |
| debounce | 関数の呼び出しを遅延させ、指定した時間内に再度呼ばれた場合はその時間をリセットします。 | lodash/debounce | |
| memoize | 関数の結果をキャッシュし、同じ引数で呼び出された場合にキャッシュを返します。 | lodash/memoize | |
| once | 関数を一度だけ実行します。 | lodash/once | |
| throttle | 関数の呼び出し頻度を制限し、指定した時間内に一度だけ実行します。 | lodash/throttle |
文字列操作
| 関数名 | 活用方法 | パス | JavaScript 標準機能 |
|---|---|---|---|
| camelCase | 文字列をキャメルケースに変換します。 | lodash/camelCase | |
| escape | HTMLエスケープを行います。 | lodash/escape | |
| escapeRegExp | 正規表現の特殊文字をエスケープします。 | lodash/escapeRegExp | |
| unescape | HTMLエスケープを解除します。 | lodash/unescape | |
| upperFirst | 文字列の最初の文字を大文字にします。 | lodash/upperFirst |
数値操作
| 関数名 | 活用方法 | パス | JavaScript 標準機能 |
|---|---|---|---|
| clamp | 数値を指定した範囲内に制限します。 | lodash/clamp | |
| max | 配列の最大値を取得します。 | lodash/max | Math.max |
配列操作
| 関数名 | 活用方法 | パス | JavaScript 標準機能 |
|---|---|---|---|
| chunk | 配列を指定したサイズのチャンクに分割します。 | lodash/chunk | |
| difference | 2 つの配列の差分を取得します。 | lodash/difference | |
| differenceWith | カスタム比較関数を使用して 2 つの配列の差分を取得します。 | lodash/differenceWith | |
| fill | 配列を指定した値で埋めます。 | lodash/fill | |
| filter | 条件に一致する配列の要素をフィルタリングします。 | lodash/filter | Array.prototype.filter |
| findIndex | 条件に一致する配列の最初の要素のインデックスを返します。 | lodash/findIndex | Array.prototype.findIndex |
| flatten | 配列を1階層だけ平坦化します。 | lodash/flatten | Array.prototype.flat |
| flattenDeep | 配列を完全に平坦化します。 | lodash/flattenDeep | Array.prototype.flat |
| forEach | 配列やオブジェクトの各要素に対して関数を実行します。 | lodash/forEach | Array.prototype.forEach |
| groupBy | 配列の要素を指定したプロパティでグループ化します。 | lodash/groupBy | |
| intersection | 2 つの配列の共通要素を抽出します。 | lodash/intersection | |
| keyBy | 配列の要素を指定したプロパティでキーとしたオブジェクトに変換します。 | lodash/keyBy | |
| last | 配列の最後の要素を取得します。 | lodash/last | Array.prototype.at |
| orderBy | 配列の要素を指定したプロパティでソートします（昇順・降順を指定可能）。 | lodash/orderBy | |
| range | 指定範囲の数値配列を生成します。 | lodash/range | |
| remove | 配列から指定した条件に一致する要素を削除します。 | lodash/remove | |
| sortBy | 配列の要素を指定したプロパティでソートします。 | lodash/sortBy | |
| shuffle | 配列をシャッフルします。 | lodash/shuffle | |
| takeRight | 配列の末尾から指定した数の要素を取得します。 | lodash/takeRight | |
| times | イテレータを指定回数呼び出し処理結果の配列を生成します。 | lodash/times | |
| toArray | オブジェクトやその他の値を配列に変換します。 | lodash/toArray | Array.from |
| uniq | 配列の重複を排除します。 | lodash/uniq | |
| uniqBy | 指定したプロパティで配列の重複を排除します。 | lodash/uniqBy | |
| uniqWith | カスタム比較関数を使用して配列の重複を排除します。 | lodash/uniqWith |
テンプレート操作
| 関数名 | 活用方法 | パス | JavaScript 標準機能 |
|---|---|---|---|
| template | 文字列テンプレートを処理します。 | lodash/template |
代替候補について
ES5やES6で機能が追加されたことにより、LodashやUnderscoreを使わなくても標準機能のみで簡潔に書ける場合があるそうですので、ご興味がありましたらこちらも参照してみてください！
さいごに
今回紹介した関数を使用することで少しでもみなさんの作業効率に繋がればと思いますのでぜひ使用してみたご感想などをお聞かせ頂けると嬉しいです！
また、ここに掲載されている関数以外にもLodashで便利な関数が御座いましたらご教示頂けますと幸いです。
最後まで拙い文章でしたがお付き合い頂きありがとうございました。
Discussion