![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2024/05/30
こんにちは、デジナーレ福岡オフィスの徳安です。
今回は、プロジェクトでlodashを使用する機会があったので、
lodashについて調べた内容と、
今後活用できそうなメソッドを記事にまとめてみました。
lodashとは
Lodashとは、配列、数値、オブジェクト、文字列などの
操作をまとめて提供してくれるライブラリ。
・配列、オブジェクト、文字列の反復処理
・値の操作とテスト
・複合関数の作成
などの操作で使用するのが最適。
使い方
インストール
|
1 2 |
npm i -g npm npm i --save lodash |
インストール後に、使用するファイルでインポートして使用する。
|
1 |
import _ from 'lodash'; |
Array(配列)
_.chunk(array, [size=1])
配列を引数の数で分割してくれるメソッド
|
1 2 3 4 5 6 7 8 9 10 11 |
// Example _.chunk(['a', 'b', 'c', 'd'], 2); // => [['a', 'b'], ['c', 'd']] _.chunk(['a', 'b', 'c', 'd'], 3); // => [['a', 'b', 'c'], ['d']] _.chunk(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'], 2); // [["a","b"],["c","d"],["e","f"],["g","h"]] |
_.compact(array)
配列の中から falsyな値 を全て排除してくれるメソッド
*falsyな値 （false、空文字、NaN、0、undefined、null）
|
1 2 3 4 5 6 |
// Example _.compact([0, 1, false, 2, '', 3]); // => [1, 2, 3] _.compact([0, 1, false, true, null, 2, '', 3, NaN, undefined]) // [1,true,2,3] |
_.difference(array, [values])
array : 比較したい配列
values : 除外したい値
二つの配列を比較して、
第二引数(values)で指定された配列に含まれない値を、返却してくれるメソッド。
返却された配列の順序は、最初の配列の順列で決まる。
|
1 2 3 4 5 6 |
// Example _.difference(['Nao', 'Tom', 'Taro', 'Jun'], ['Liz', 'Nao']) // ["Tom","Taro","Jun"] _.difference([2, 1], [2, 3]); // => [1]` |
_.drop(array, [n=1])
先頭から[n=1]で指定した要素の数だけ削除し
配列を作成してくれるメソッド。
n個指定しないと、先頭の1つだけ削除される。
array (配列) : 照会する配列
[n=1] (数値) : 削除する要素の数
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Example _.drop([1, 2, 3]); // => [2, 3] _.drop([1, 2, 3], 2); // => [3] _.drop([1, 2, 3], 5); // => [] _.drop([1, 2, 3], 0); // => [1, 2, 3] |
_.dropRight(array, [n=1])
末尾から[n=1]で指定した要素の数だけ削除し、
配列を作成してくれるメソッド。
n個指定しないと、先頭の1つだけ削除される。
array (配列) : 照会する配列
[n=1] (数値) : 削除する要素の数
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Example _ .dropRight ([ 1 , 2 , 3 ] ); // => [1, 2] _ .dropRight ([ 1 , 2 , 3 ] , 2 ) ; // => [1] _ .dropRight ([ 1 , 2 , 3 ] , 5 ) ; // => [] _ .dropRight ([ 1 , 2 , 3 ] , 0 ) ; // => [1, 2, 3] |
_.flatten(array)
配列のネストを1つ浅くすることができるメソッド。
|
1 2 3 |
// Example _ .flatten ([ 1 , [ 2 , [ 3 , [ 4 ]] , 5 ] ]); // => [1, 2, [3, [4]], 5] |
_.flattenDeep(array)
_.flattenDeepは配列のネストをなくして、全てフラットにすることができるメソッド。
|
1 2 3 |
// Example _ .flattenDeep ([ 1 , [ 2 , [ 3 , [ 4 ]] , 5 ] ]); // => [1, 2, 3, 4, 5] |
_.fromPairs(pairs)
二つの配列のkey、valueからオブジェクトを生成してくれるメソッド。
pairs (配列) : キーと値のペア
|
1 2 3 |
// Example _ .fromPairs ([[ 'a' , 1 ] , [ 'b' , 2 ] ]); // => { 'a': 1, 'b': 2 } |
_.union([arrays])
指定された配列から、一意の値の配列を順番に作成してくれるメソッド。
[arrays] : 検査する配列
|
1 2 3 4 |
// Example _.union([2], [1, 2]); // [2, 1] _.union([1, 2, 3, 4, 5, 6, 7], [5, 6, 7]) // [1,2,3,4,5,6,7] |
_.uniq(array)
配列から一意な値を取得してくれるメソッド。
結果値の順序は、配列内での出現順序によって決まる。
|
1 2 3 |
// Example _.uniq([2, 1, 2]); // => [2, 1] |
そのほかのメソッド
_.isEqual(value, other)
2 つの値を比較して、値が等しいかどうかを判断してくれるメソッド。
value : 比較する値
other : 比較するもう一方の値
|
1 2 3 4 5 6 7 8 |
const object = { 'a': 1 }; const other = { 'a': 1 }; _.isEqual(object, other); // => true object === other; // => false |
_.uniqueId([prefix=''])
一意の ID を生成してくれるメソッド。
prefixが指定されている場合は、prefixの後にID が追加される。
|
1 2 3 4 5 6 |
// Example _.uniqueId('contact_'); // => 'contact_104' _.uniqueId(); // => '105' |
_.castArray(value)
引数に入れた値を配列として返却してくれるメソッド。
配列が来た場合は、そのまま返却される。
value : 検査する値
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Example _.castArray(1); // => [1] _.castArray({ 'a': 1 }); // => [{ 'a': 1 }] _.castArray('abc'); // => ['abc'] _.castArray(null); // => [null] _.castArray(undefined); // => [undefined] _.castArray(); // => [] |
_.clone(value)
valueに入れた値を、1階層までコピーしてくれるメソッド。
（シャローコピー）
value : 複製する値
|
1 2 3 4 5 6 |
// Example const objects = [{ 'a': 1 }, { 'b': 2 }]; const shallow = _.clone(objects); console.log(shallow[0] === objects[0]); // => true |
_.cloneDeep(value)
valueに渡された値を再帰的にコピーしてくれるメソッド。
（ディープコピー）
value : 再帰的に複製する値
|
1 2 3 4 5 6 |
// Example const objects = [{ 'a': 1 }, { 'b': 2 }]; const deep = _.cloneDeep(objects); console.log(deep[0] === objects[0]); // => false |
lodashを使用することによって、
配列の操作、抽出、オブジェクトへの変換などが簡単にできます。
コードもすっきりし、可読性が上がるため、
プロジェクトで使用している場合は、効率よく組み込んでいきたいと思います。
ここまで読み進めていただきありがとうございます。
