【JS】【TS】Lodash ～ 入門編 ～

JavaScript TypeScript

■ はじめに

仕事で、Lodash って出てきたので、調べてみた。

目次

【１】Lodash (ロダッシュ) とは？
　１）フルセットでインストールすると、でかい
　２）import の仕方で環境が変わるとエラーになる場合がある
【２】使用上の注意
【３】環境設定
【４】サンプル
　例１：ディープクローン（cloneDeep）

【１】Lodash (ロダッシュ) とは？

* JavaScript/TypeScript のための便利ツール

公式サイト
https://lodash.com/docs/

【２】使用上の注意

１）フルセットでインストールすると、でかい

* いいことばかりではないらしいので、
　以下のサイトなどを参照。

https://qiita.com/mizchi/items/af17f45d5653b76f6751
解決案 (後日談) 

* 個別にインストールできる！
 => 詳細は、以下の関連記事の「【１】Lodash の個別インストール」を参照のこと。

https://dk521123.hatenablog.com/entry/2021/02/26/170608

２）import の仕方で環境が変わるとエラーになる場合がある

開発環境（会社と自宅。Vueのバージョンの違い？）によって
以下のように import の指定したら、
一方は実行できたが、片方ではエラーになった。

Case1 : import uniqBy from 'lodash.uniqby';
Case2 : import { uniqBy } from 'lodash';

 => 詳細は、以下の関連記事の「【３】トラブル」を参照のこと。

https://dk521123.hatenablog.com/entry/2021/02/26/170608

【３】環境設定

npm install --save lodash

Lodash の個別インストール 

以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2021/02/26/170608

【４】サンプル

例１：ディープクローン（cloneDeep）

sample.ts 

import * as _ from 'lodash';

const users = [
  { "id": "x0001", "name": "Mike" },
  { "id": "x0002", "name": "Tom" },
  { "id": "x0003", "name": "Kevin" },
  { "id": "x0004", "name": "Sam" }  
];

const clonedUsers = _.cloneDeep(users);
console.log(users);
console.log(clonedUsers);

実行 

# コンパイル
tsc sample.ts

# 実行
node sample.js

実行結果 

[
  { id: 'x0001', name: 'Mike' },
  { id: 'x0002', name: 'Tom' },
  { id: 'x0003', name: 'Kevin' },
  { id: 'x0004', name: 'Sam' }
]
[
  { id: 'x0001', name: 'Mike' },
  { id: 'x0002', name: 'Tom' },
  { id: 'x0003', name: 'Kevin' },
  { id: 'x0004', name: 'Sam' }
]

参考文献

https://qiita.com/sitilma/items/a08e28def541c28458a0
Collection
https://qiita.com/Hitomi_Nagano/items/d51b65eb5dc8fcda8eb8

関連記事

TypeScript ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/12/21/180904
Lodash ～ 基本編 ～
https://dk521123.hatenablog.com/entry/2021/02/26/170608
TypeScript での 日付 / 日時 の扱い
https://dk521123.hatenablog.com/entry/2021/01/29/231952