【JavaScript】lodashの使い方

lodashとは？

便利な関数をまとめて提供しているライブラリです。
値の操作に長けた便利関数が数多く存在します。
あまりに多いためこの記事では私よく見るものや便利だと思ったものを紹介していきます。

気になった方は公式ドキュメントを眺めてみてください。

Github | lodash
公式ドキュメント

使い方

npmを使ってインストール

npm install --save lodash

yarnを使ってインストール

yarn add lodash

インストール後インポートして使用する

import _ from 'lodash';

関数

is系

真偽値を返す関数群です。数十種類存在するため大抵のものはカバーされています。
引数にとった値が期待通りならtrueを返し、そうでなければfalseを返します。
主にif文での判定に使うでしょう。

_.isString("abc"); // true
_.isString(1); // false

_.isNumber(1); // true
_.isNumber('abc'); // false

_.isArray([1,2,3]); // true
_.isArray(20); // false

// nullもしくはundefinedならtrueを返す
_.isNil(null) // true
_.isNil(undefined) // true
_.isNil("abc") // false

each / forEach

配列やオブジェクトを第一引数に受け取り、繰り返し処理を行う関数です。
ES5で追加されたforEachメソッドとは違い、オブジェクトに対しても使うことができます。
eachはforEachのaliasなのでどちらを使っても処理結果自体は同じです。

const user = { name: "taro", age: 25, score: 90 };

// オブジェクトに対して繰り返し処理を行う
_.forEach(user, (value, key) => console.log(value));
// taro
// 25
// 90

sortBy

配列やオブジェクトを第一引数に受け取り、昇順ソートを行います。
標準サポートされているsortメソッドと違い、非破壊的なため元の配列やオブジェクト自体は変わりません。
そのためソートした値を使う場合は、変数に代入するか更新する必要があります。

const users = [
  { name: "taro", age: 25 },
  { name: "hanako", age: 55 },
  { name: "taro", age: 10 },
  { name: "hanako", age: 28 }
];

// 名前順にソート
_.sortBy(users, "name");
// [ 
//    {name: "hanako", age: 55},
//    {name: "hanako", age: 28},
//    {name: "taro", age: 25},
//    {name: "taro", age: 10}
// ]

// 名前=>年齢の順番でソート
_.sortBy(users, ["name", "age"]);
// [ 
//    {name: "hanako", age: 28},
//    {name: "hanako", age: 55},
//    {name: "taro", age: 10},
//    {name: "taro", age: 25}
// ]

orderBy

配列やオブジェクトを第一引数に受け取り、ソートを行います。
sortByと近い関数ですがこちらは昇順、降順を指定することができます。

const users = [
  { name: "taro", age: 25 },
  { name: "hanako", age: 55 },
  { name: "taro", age: 10 },
  { name: "hanako", age: 28 }
];

// 名前順に降順でソート
_.orderBy(users, "name", "desc");
// [ 
//    {name: "taro", age: 25},
//    {name: "taro", age: 10},
//    {name: "hanako", age: 55},
//    {name: "hanako", age: 28}
// ]

// 名前は降順=>年齢は昇順でソート
_.orderBy(users, ["name", "age"], ["desc", "asc"]);
// [ 
//    {name: "taro", age: 10},
//    {name: "taro", age: 25},
//    {name: "hanako", age: 28},
//    {name: "hanako", age: 55}
// ]

最後に

ここで紹介した関数は非常にほんの一部です。
どういった事ができるかを簡単に覚えておくと便利だと思います。