copy_people copy_things copy_matter copy_heart copy_txt ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2018/03/06

Lodashで配列処理

Written by Miki Shima

  • JavaScript

INDEX

    だんだんと春めいてきましたね🌸こんばんは、エンジニアのシマです。
    今回は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の使用例

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View