🔧
Lodashで使える便利な関数と代替可能なJavaScriptの標準機能
はじめに
この記事は、個人開発するにあたり、参考にするコードでよく見かける Lodash がどんなものか気になったため、使われていた関数をまとめてみました。
個人的なメモも兼ねていますので、便利なものがあれば追加していこうと思っています。
Lodash とは？
Lodash とは、JavaScript で作業を効率化するためのユーティリティライブラリです。多くの一般的なプログラミングタスクを簡単に実行できるようにするための関数群を提供しています。
インストール
CDN
node.js
npm install --save lodash
npm install --save @types/lodash
yarn add lodash
yarn add -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 | |
| 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 標準機能 |
|---|---|---|---|
| clamp | 数値を指定した範囲内に制限します。 | lodash/clamp |
配列操作
| 関数名 | 活用方法 | パス | JavaScript 標準機能 |
|---|---|---|---|
| chunk | 配列を指定したサイズのチャンクに分割します。 | lodash/chunk | |
| differenceWith | カスタム比較関数を使用して 2 つの配列の差分を取得します。 | lodash/differenceWith | |
| filter | 条件に一致する配列の要素をフィルタリングします。 | lodash/filter | Array.prototype.filter |
| findIndex | 条件に一致する配列の最初の要素のインデックスを返します。 | lodash/findIndex | Array.prototype.findIndex |
| forEach | 配列やオブジェクトの各要素に対して関数を実行します。 | lodash/forEach | Array.prototype.forEach |
| groupBy | 配列の要素を指定したプロパティでグループ化します。 | lodash/groupBy | |
| intersection | 2 つの配列の共通要素を抽出します。 | lodash/intersection | |
| keyBy | 配列の要素を指定したプロパティでキーとしたオブジェクトに変換します。 | lodash/keyBy | |
| orderBy | 配列の要素を指定したプロパティでソートします（昇順・降順を指定可能）。 | lodash/orderBy | |
| remove | 配列から指定した条件に一致する要素を削除します。 | lodash/remove | |
| sortBy | 配列の要素を指定したプロパティでソートします。 | lodash/sortBy | |
| takeRight | 配列の末尾から指定した数の要素を取得します。 | lodash/takeRight | |
| toArray | オブジェクトやその他の値を配列に変換します。 | lodash/toArray | Array.from |
| uniqBy | 指定したプロパティで配列の重複を排除します。 | lodash/uniqBy | |
| uniqWith | カスタム比較関数を使用して配列の重複を排除します。 | lodash/uniqWith |
さいごに
今回紹介した関数を使用することで少しでもみなさんの作業効率に繋がればと思いますのでぜひ使用してみたご感想などをお聞かせ頂けると嬉しいです！
また、ここに掲載されている関数以外にも Lodash で便利な関数が御座いましたらご教示頂けますと幸いです。
最後まで拙い文章でしたがお付き合い頂きありがとうございました。
Discussion