tです。
今回は、JavaScriptのユーティリティライブラリである、Lodashについて書きます。
最近では、Lodashの機能も、JavaScriptに標準で用意されるようになりました。
例えば、Lodashの_.keys関数や_.some関数は、JavaScriptに標準で用意されています。
_.some関数Array.prototype.some()
| Lodash | JavaScript標準 |
|---|---|
| _.keys関数 | Object.keys() |
実行環境
例に挙げるコードは、以下の環境で動作確認しています。- Node v7.9.0
- Lodash v4.17.4
_.chunk関数
_.chunk関数は、配列の要素を一定の要素数ごとに分ける関数です。大量の要素を少しずつ処理したい場合に、一定数ごとに分けることができるので便利です。
基本的な使い方
3要素ごとに分けられていることが分かります。|
1 2 3 4 5 6 7 8 9 |
const _ = require( 'lodash' ); // データ const array = [ 1, 2, 3, 4, 5, 6, 7, 8 ]; // _.chunk関数で、配列の要素を3つずつに分ける console.log( _.chunk( array, 3 ) ); // 結果: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8 ] ] |
ユーザデータを100件ずつサーバに送信する場合
大量のユーザデータがあり、それを分割してサーバに送信する例を挙げています。1万件など大量のデータを送信する時、ネットワークに負荷を与えないように、何件か区切りでデータを送信することがあるかと思います。そういう時に、簡単に分割できるので便利です。
サーバに送信する場合は、Fetch APIなど、Promiseを返す非同期関数が利用されることが多いかと思います。
なのでそれを想定し、async functionとfor...ofを組み合わせて、sendData関数を逐次実行しています。
|
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 |
const _ = require( 'lodash' ); // 大量のデータ (1万件ほど) const users = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }, /* 続く・・・ */ ]; // サーバに非同期でデータを送信して、Promiseを返す function sendData( chunk ) { // 送信処理 return Promise.resolve( true ); } // sendData関数を逐次実行する async function execute() { // _.chunk関数で、配列の要素を100ずつ分ける for ( const chunk of _.chunk( users, 100 ) ) { // 100ずつの配列をsendData関数に渡す await sendData( chunk ); } } execute(); |
_.partition関数
_.partition関数は、条件によって、配列を2つのグループに分ける関数です。LodashのCollectionのショートハンドについてで紹介した、ショートハンドが利用できる関数です。
基本的な使い方
年齢によって2つのグループに分けています。戻り値は、2つの配列で構成される配列になります。
前の配列にtrueを返した要素、後の配列にfalseを返した要素が含まれます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
const _ = require( 'lodash' ); // 名前と年齢の配列データ const users = [ { id: 1, name: 'Alice', age: 20 }, { id: 2, name: 'Bob', age: 15 }, { id: 3, name: 'Charlie', age: 10 }, ]; // 年齢によって、2つのグループに分ける console.log( _.partition( users, user => user.age < 20 ) ); /* 結果: [ [ { id: 2, name: 'Bob', age: 15 }, { id: 3, name: 'Charlie', age: 10 } ], [ { id: 1, name: 'Alice', age: 20 } ] ] */ |
_.partition関数を使ったほうが良い場合
_.filter関数と_.reject関数を使っている場面で、_.partition関数に置き換えられる場合を紹介します。先に_.filter関数で抽出している箇所に、後から手を加えて、_.filter関数で抽出した逆の条件の要素も使いたい場合、_.reject関数を使いがちです。
しかし、_.filterと_.rejectを同じ条件で実行するのではなく、_.partition関数を使えば、一度の処理で、2つのグループを抽出できます。
|
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 |
const _ = require( 'lodash' ); // 名前と年齢の配列データ const users = [ { id: 1, name: 'Alice', age: 20 }, { id: 2, name: 'Bob', age: 15 }, { id: 3, name: 'Charlie', age: 10 }, ]; let young, old; // _.filter関数と_.reject関数を使う場合、可能だが、2度同じような処理をすることになる young = _.filter( users, user => user.age < 20 ); old = _.reject( users, user => user.age < 20 ); console.log( young, old ); // _.partition関数の場合、一度の処理で取得できる [ young, old ] = _.partition( users, user => user.age < 20 ); console.log( young, old ); /* 結果(どちらの場合も一緒): young = [ { id: 2, name: 'Bob', age: 15 }, { id: 3, name: 'Charlie', age: 10 } ] old = [ { id: 1, name: 'Alice', age: 20 } ] */ |
最後に
LodashのCollectionのショートハンドについてに引き続き、Lodashの紹介でした。Lodashには、とても多くのユーティリティメソッドが含まれています。
知っていると便利に使えるので、一度Lodash Documentsに目を通してみてください。
キー・ポイントでは、いろいろなライブラリを使いこなすエンジニアを募集しています。
