TypeScript開発時に便利なライブラリ(lodash)を活用しよう。
lodashを使って面倒な処理をシンプルにしたい
株式会社テイク-ワンのH.Tです。
TypeScriptでの開発を行う際、その基本仕様で困る事や痒い所に手が届かない事が多々出てくると思います。
そういう部分を補助してくれるユーティリティライブラリ「lodash」を活用して、少しでも手間を省いて行きましょう。
環境の準備
使用したいライブラリ、lodashが、開発環境に入って無ければインストールから。
環境に合わせて、yarnやnpmでインストールを行う。
例)yarn add lodash または npm install lodash
次に、使用する箇所のts内でインポートする。
import _ from 'lodash';
※この例ではlodashを_(アンダーバー)と言う名前で定義してインポートしている。
名前は何でも良いがlodashを使用していると分かるシンプルなものにすると良い。
使用出来る環境が出来たら、開発の際に必要になった場面に合う機能を探して使用する。
例1)オブジェクトの参照渡しをしたくない時
例)参照渡しになってしまうパターン
let a = { data: 1};
let b = { data: 2};
b = a; // オブジェクトbにオブジェクトaを代入
console.log(b); // { data: 1}
a.data = 5; // aのdataを5に更新
console.log(b); // { data: 5 } ※aを更新したことで、参照渡しになっているbも値が自動的に更新されている
こういう事象が起きるが、実際の作業上ではbに渡した値は別の物としてその後使用したい(参照渡しをしたくない)場合がある。
この場合、参照渡しにならないようにする為の手段はいくつかあるが、lodashというライブラリの関数「cloneDeep」を使うと楽に対応出来る。
lodashを使った例)参照渡しにならないパターン
let a = { data: 1};
let b = { data: 2};
b = _.cloneDeep(a); // オブジェクトbにオブジェクトaをクローンして代入(参照渡しにしないようにする)
console.log(b); // { data: 1}
a.data = 5; // aのdataを5に更新
console.log(b); // { data: 1 } ※aを更新したが、bは更新されていないので変化していない
例2)配列やオブジェクトの中身を操作したい時
■uniq
配列から同じ数字を除外する。
let a = [1, 2, 3, 3, 4, 5, 5];
let b = _.uniq(a);
console.log(b); // [1, 2, 3, 4, 5] ※重複していた数値が排除される
■orderBy
オブジェクトの中身を並べ替える。
let data = [{ id: "AAA", number: 10 },{ id: "BBB", number: 30 },{ id: "CCC", number: 50 }];
console.log(_.orderBy(data, ["number"],["desc"])); // [{ id: "CCC", number: 50 },{ id: "BBB", number: 30 },{ id: "AAA", number: 10 }]
※numberの降順でソートされた。昇順にしたい場合はascにする。または、orderByではなくsortByを使う。
■maxBy
let data = [{ id: "AAA", number: 10 },{ id: "BBB", number: 30 },{ id: "CCC", number: 50 }];
console.log(_.maxBy(data, "number")); // { id: "CCC", number: 50 }
オブジェクト内の指定したキーの最大が含まれるオブジェクトが返される。
実際に使って便利だったその他の機能
■debounce
入力項目でキーを押下する度ではなく一定時間内に入力された内容で検索処理などを行いたい場合に、入力受付を指定秒数遅延出来る機能。
例えば、検索窓で入力される情報によってデータ取得処理を実行する必要がある場合に、ユーザーがキーを入力の都度検索していては負荷が掛かり過ぎるので、一定時間遅延することでa、b、c、d、e、と入力した場合などは入力情報を「a」「b」「c」「d」「e」の5回分の入力情報ではなく、「abcde」を1回分の入力情報として処理を行える。
■zip
配列を結合する
const dataA = ['A'，'B'，'C'];
const dataB = [1，2，3];
const dataC = ['あ'，'い'，'う'];
console.log(_.zip(dataA，dataB，dataC)); // [['A'，1，'あ']，['B'，2，'い']，['C'，3，'う']]
おわりに
実際に開発時に使用していて便利だったものをいくつか抜粋して例として紹介したが、これ以外にも利便性のあるライブラリがあるので実際にやりたい事を解決するライブラリがないか探して、使用してみてはいかがでしょうか。