今回は、Lodashの小技について紹介します。
LodashはJavaScriptのユーティリティライブラリで、配列、オブジェクト、文字列、関数など、多岐にわたる汎用的なメソッドが用意されています。
Lodash Documentsを見れば、全てのメソッドに関する説明が書かれていますが、知っていると少し便利な、Collectionのショートハンドについて紹介します。ショートハンドとは、コードを記述するとき、通常の方法とは別に、短く記述する方法を指します。
Collection関連のメソッドにはショートハンドがある
Lodashには、find、filter、mapなどの、配列やオブジェクトに対して順繰りに操作をする、Collection関連のメソッドが用意されています。そして、これらにはショートハンドがあります。_.filterを例に説明します。まず、以下にコードを示します。なお、例には、ES2015のconstやアロー関数が含まれています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
const users = [ { name: 'Alice', active: true, age: 30 }, { name: 'Bob', active: false, age: 40 }, ]; // ------------------------------------------------------------ // 1. usersからactiveがtrueの項目のみ取得(関数を定義) // ------------------------------------------------------------ console.log( _.filter( users, user => user.active ) ); // ------------------------------------------------------------ // 2. usersからactiveがtrueの項目のみ取得(_.propertyのショートハンド) // ------------------------------------------------------------ console.log( _.filter( users, 'active' ) ); // ショートハンドを使わない場合 console.log( _.filter( users, _.property( 'active' ) ) ); // ------------------------------------------------------------ // 3. usersからageが30でactiveがtrueの項目のみ取得(_.matchesのショートハンド) // ------------------------------------------------------------ console.log( _.filter( users, { age: 30, active: true } ) ); // ショートハンドを使わない場合 console.log( _.filter( users, _.matches( { age: 30, active: true } ) ) ); // ------------------------------------------------------------ // 4. usersからageが30の項目のみ取得(_.matchesPropertyのショートハンド) // ------------------------------------------------------------ console.log( _.filter( users, [ 'age', 30 ] ) ); // ショートハンドを使わない場合 console.log( _.filter( users, _.matchesProperty( 'age', 30 ) ) ); // すべての実行結果は、以下になる // [ // { name: 'Alice', active: true, age: 30 }, // ] |
1の例では、第二引数に関数を与えている通常の方法です。
filterなので、この関数でtrueを返した項目のみが抽出されます。
2、3、4の例が、それぞれのショートハンドの例です。
2では、ショートハンドを使って、1と同じことをしていますが、短く記述できます。
3は、複数の項目がマッチするか、4は、単一の項目がマッチするかを指定しています。
単一か複数かで使い分けると良いでしょう。
どのメソッドでどのショートハンドが使えるかについては、ドキュメントのExampleを見てください。
次に、よく使いそうな場面の例を示します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const users = [ { id: 1, name: 'Alice', sex: 'female' }, { id: 2, name: 'Bob', sex: 'male' }, { id: 3, name: 'Charlie', sex: 'male' }, ]; // 名前のみの配列を取得する console.log( _.map( users, 'name' ) ); // 結果: [ 'Alice', 'Bob', 'Charlie' ] // idが2のユーザを取得する console.log( _.find( users, [ 'id', 2 ] ) ); // 結果: { id: 2, name: 'Bob', sex: 'male' } // 性別ごとの人数を数える console.log( _.countBy( users, 'sex' ) ); // 結果: { female: 1, male: 2 } |
Lodash Documentsはその場でコードを実行できる
もうひとつ小技を紹介します。Lodash Documentsのページで、Exampleの箇所を見ると、「Try in REPL」が右下にあるかと思います。これをクリックすることで、ソースコードが編集できるとともに、その場で実行して結果を見ることができます。
Lodashのメソッドを組合せて関数を作るときなどに、その場で試すことができるので便利です。
最後に
Lodashには、とても多くのユーティリティメソッドが含まれています。一部でも把握しておけば、幾つかのLodashのメソッドの組合せで、簡単に処理を実装できるようになるので、どんなものが用意されているか、Lodash Documentsに目を通してみてください。
キー・ポイントでは、どんどん便利な書き方を取り入れるエンジニアを募集しています。