Recruit

Lodashで配列処理

Blog

だんだんと春めいてきましたね?こんばんは、エンジニアのシマです。
今回はLodashを使って配列処理してみましたというお話です。
私事ですが、プログラマ出身（もとい本来文系）のコーダーとしては、コードがちょっとでも短くなると嬉しくなります。?

Lodashとは？

A modern JavaScript utility library delivering modularity, performance & extras.

直訳すると、「モジュール性・パフォーマンス・臨時性のある（余力な）、モダンなjsユーティリティライブラリ」ということで、主に配列（コレクション）をどうこうしたいときに、かゆいところに手が届く、そんなユーティリティ（関数）集です。

まずはお手軽に試してみたい方は、こちらでオンラインで実行できます。

インストール

最新版はv4.17.5になります。（18/03/06時点）
インストール方法は、

のいずれかです。
今回は、ひとまず使ってみるということで、Full Buildを.zipで落とし、gulpでコンパイルして使いました。
ちなみに、Core BuildとFull Buildとの違いについてはこちらにまとまっていますが、配列のみの処理であれば、Core Buildでも関数的にはある程度はカバーされるようです。（検索の仕方やメモリ部分まで考慮した細かい指定をする場合はFullが良さそう）

実際に利用したシーン

条件に一致するものを取り出したい

_.find(collection, [predicate=_.identity], [fromIndex=0])

var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];

_.find(users, function(o) { //①
    return o.age < 40;
});
// => object for 'barney'

// The `_.matches` iteratee shorthand. //②
_.find(users, {
    'age': 1,
    'active': true
});
// => object for 'pebbles'

// The `_.matchesProperty` iteratee shorthand. //③
_.find(users, ['active', false]);
// => object for 'fred'

// The `_.property` iteratee shorthand. //④
_.find(users, 'active');
// => object for 'barney'

第1引数のcollectionは、(Array|Object)ということで、連想配列を扱う場合はCollectionも対象とされる関数を使います。
こちらもネイティブのJSの関数Array.prototype.find()で同様のことは実現できますが、
②〜④のように、_.matchesや_.matchesPropertyといった、Lodash独自のプロパティセットを渡すことで記述量を減らすことができます。
Lodash Documentation “_.find”

条件に一致するもの・しないもので2つの配列に分割したい

_.partition(collection, [predicate=_.identity])

var users = [
  { 'user': 'barney',  'age': 36, 'active': false },
  { 'user': 'fred',    'age': 40, 'active': true },
  { 'user': 'pebbles', 'age': 1,  'active': false }
];

_.partition(users, function(o) { return o.active; });
// => objects for [['fred'], ['barney', 'pebbles']]

// The `_.matches` iteratee shorthand.
_.partition(users, { 'age': 1, 'active': false });
// => objects for [['pebbles'], ['barney', 'fred']]

// The `_.matchesProperty` iteratee shorthand.
_.partition(users, ['active', false]);
// => objects for [['barney', 'pebbles'], ['fred']]

// The `_.property` iteratee shorthand.
_.partition(users, 'active');
// => objects for [['fred'], ['barney', 'pebbles']]

こちらはLodash独自の関数になります。
一致させたい条件をセットするだけで、条件に一致するものとしないものに分別された結果が配列として返却されるという！
シンプルで便利。
Lodash Documentation “_.partition”

やってみた結果

●利用シーンが多いものは、ネイティブのJSで実現可能なものが多かったです。が、少しだけ短く書けます。（参照の深さに違いがあったりするものもあるようですが、新規変数用意して利用する場合は挙動に大差なさそうでした。）

●実務の中で煩雑な処理が出てきたときに、_.partitionのような拡張された関数を使いこなせると利用価値あがると思います。
●せっかく導入するのであれば、配列以外のユーティリティメソッドも効率化に活かせるとベターだと思います。
●ネイティブの.jsもしかり、Lodashもしかり、ドキュメントを読む大切さを感じました。

リンク

Lodash公式ドキュメント
Lodash/Underscoreは必要ない（かも）
lodashの.throttleと.debounceの使用例

Return back

Recommend

Contact Us