こんにちは。
最近は自社サービスのHerlockを使ってJavascriptばかり書いているジョニーです。
今回は、以前の記事（【中級編】Herlockにおけるライブラリの使用 ）でも紹介されているライブラリの一つであるUnderscore.jsについて紹介したいと思います。
Javascriptに限らずプログラミングするときに扱うことの多い「配列」の値の操作をするのに便利な機能がこのUnderscore.jsには数多く用意されています。
ただ説明するだけでは分かりにくい部分もあると思いますので、Underscore.jsで使えるメソッドの中から配列操作のメソッドに限定して、その中でもよく使いそうなメソッドを10個サンプルコードを交えて紹介したいと思います。
またUnderscore.jsとほぼ同じ使い方が出来るLo-dashについても少しだけ説明します。
目次
目次
Underscore.js, Lo-Dashとは
UnderscoreもLo-Dashもどちらもユーティリティメソッドと言われるものを色々まとめたものです。
今回配列についての説明をするので配列に限定していうと、以下のように配列とその配列にどのような処理をして欲しいかといった、どの配列でも使いそうな共通の処理をまとめたものです。
- 配列を値の小さい順に並べ替える
- 配列に入っている値を順番に取り出す
- 配列の中から一番大きい値を取り出す
- 配列の中に特定の値が含まれているか確かめる
UnderscoreとLo-Dashは名前こそ違うものの、ほぼ全く同じメソッドが用意されています。
違いはLo-DashはUnderscoreを改良してパフォーマンスを良くしたものくらいと思っていただいても良いかもしれません。
ただ今回はドキュメントがきちんと整備されているUnderscoreを元に紹介したいと思います。
(Lo-Dashのドキュメントはところどころ説明が欠けているものがあるため)
- Underscoreのドキュメント (http://underscorejs.org/)
- Lo-Dashのドキュメント (http://lodash.com/docs)
便利な配列操作メソッド10選
- each
- find
- filter
- where
- findWhere
- contains
- pluck
- max
- min
- sortBy
使い方
はじめにUnderscore, Lo-Dashともに_.〇〇といった書き方で〇〇に使いたいメソッド名を書くことになります。
前提として以下で説明に使う共通の配列として配列の値として以下の値を使うものとします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
[code]var numbers = [1,2,3,4,5]; var persons = [ { name : "jonny", age : 24, birth_month : 8, gender : 0 // 0 : male, 1, female }, { name : "paul", age : 52, birth_month : 7, gender : 1 }, { name : "under score", age : 32, birth_month : 8, gender : 0 } ];[/code] |
each
|
1 2 3 |
[code]_.each(numbers, function (number) { console.log("number : " + number); });[/code] |
結果
|
1 2 3 4 5 6 7 |
[code] number : 1 number : 2 number : 3 number : 4 number : 5 [/code] |
結果を見てもらうとわかるように第一引数でセットした配列の値が順番に処理されています。
第二引数にセットした関数の引数に順番に配列の値がセットされていることがわかると思います。
find
|
1 2 3 4 5 6 |
[code]var even = _.find(numbers, function (number) { return number % 2 === 0; }); console.log("even : " + even); [/code] |
結果
|
1 |
[code]even : 2[/code] |
結果を見てもらうと配列で一番最初に出てくる偶数の値が返ってきているのがわかると思います。
第二引数にセットした関数の戻り値で一番最初に真偽値で「真」の値が返ってきます。
今回の場合は 「number % 2 === 0」、偶数の値が真となるような条件をセットしているので値として2が返ります。
filter
|
1 2 3 4 5 |
[code]var evens = _.filter(numbers, function (number) { return number % 2 === 0; }); console.log("evens : " + evens);[/code] |
結果
|
1 |
[code]evens : 2,4[/code] |
findが一番最初の条件にあう値1件だけ返すのに対して、こちらは条件にあう値を全部配列として返します。
今回の場合は2と4が条件にあうので2と4の値が含まれた配列が戻り値としてセットされます。
where
|
1 2 3 |
[code]var males = _.where(persons, {gender : 0}); console.log(JSON.stringify(males));[/code] |
結果
|
1 2 3 4 |
[code][ {"name":"jonny","age":24,"birth_month":8,"gender":0}, {"name":"under score","age":32,"birth_month":8,"gender":0} ][/code] |
こちらはオブジェクトの配列に対して使うと便利なメソッドで、条件にあう値を配列にして返します。
第一引数に対象の配列、第二引数に条件をオブジェクトでセットします。
今回の場合は、genderプロパティの値が0のオブジェクトの配列を返しています。
findWhere
|
1 2 3 |
[code]var male = _.findWhere(persons, {gender : 0}); console.log(JSON.stringify(male));[/code] |
結果
|
1 |
[code]{"name":"jonny","age":24,"birth_month":8,"gender":0}[/code] |
4つめのwhereと同じ使い方で、こちらの場合は条件にあうオブジェクト全部を返すのではなく一番最初に条件にあう値1つを返します。
contains
|
1 2 3 4 5 |
[code]var isContain1 = _.contains(numbers, 1); var isContain2 = _.contains(numbers, 100); console.log("isContain1 : " + isContain1); console.log("isContain2 : " + isContain2);[/code] |
結果
|
1 2 |
[code]isContain1 : true isContain2 : false[/code] |
こちらのメソッドは配列内に指定した値が含まれているかチェックして、含まれていればtrue, 含まれていなければfalseを返します。
第一引数に対象の配列、 第二引数に含まれているか確認したい値をセットします。
pluck
|
1 2 3 |
[code]var names = _.pluck(persons, "name"); console.log("names : " + names);[/code] |
結果
|
1 |
[code]names : jonny, paul,under score[/code] |
こちらのメソッドはオブジェクトの配列に使うと便利なメソッドです。
第一引数に渡したオブジェクトの配列の中から第二引数で渡したプロパティに対応する値を配列で返します。
今回の場合は「persons」のそれぞれのオブジェクトの値のなかから「name」の値が配列として返ってきています。
max
|
1 2 3 4 5 6 |
[code] var oldestPerson = _.max(persons, function (person) { return person.age; }); console.log(JSON.stringify(oldestPerson));[/code] |
結果
|
1 |
[code]{"name":"paul","age":52,"birth_month":7,"gender":1}[/code] |
こちらのメソッドは第一引数で渡した配列の中の値から一番大きな値が返ります。
今回の場合はpersonsのageを比較対象としていて、一番ageの値が大きいpaulのオブジェクト値が返ってきています。
min
|
1 2 3 4 5 |
[code]var youngestPerson = _.min(persons, function (person) { return person.age; }); console.log(JSON.stringify(youngestPerson));[/code] |
結果
|
1 |
[code]{"name":"jonny","age":24,"birth_month":8,"gender":0}[/code] |
こちらは8つめに紹介したmaxとは反対に第一引数に渡した配列の中から一番小さい値を返します。
今回の場合もmaxと同じようにpersonsのageを比較対象としていて、一番ageの値が小さいjonnyのオブジェクト値が返ってきています。
sortBy
|
1 2 3 4 5 |
[code]var orderByYoung = _.sortBy(persons, function (person) { return person.age; }); console.log(JSON.stringify(orderByYoung));[/code] |
結果
|
1 2 3 4 5 |
[code][ {"name":"jonny","age":24,"birth_month":8,"gender":0}, {"name":"under score","age":32,"birth_month":8,"gender":0}, {"name":"paul","age":52,"birth_month":7,"gender":1} ][/code] |
第一引数に配列をわたして、第二引数に配列の各値を返す引数をもつコールバックをセットして、returnで返す値が小さい順の配列を戻り値として返します。
今回の場合はpersonsを対象配列としてセットして、personsの各オブジェクトのageが小さい順の値を返しています。
まとめ
今回は10個だけ個人的に覚えておくと便利だと思うものを紹介しましたが、ドキュメントを見ると配列操作のメソッドもまだまだあります。
配列以外にも関数に対してや、オブジェクトに対しての便利メソッドもたくさんあるので一度ご覧になると開発の助けとなるものが見つかるかもしれません。
先程も書きましたが以下はUnderscore, Lo-Dashのドキュメントが書かれているサイトになります。
- Underscoreのドキュメント (http://underscorejs.org/)
- Lo-Dashのドキュメント (http://lodash.com/docs)
今回は取り上げませんでしたが、クライアントサイドMVCフレームワークの一つである「Backbone.js」はUnderscore.jsに依存していて、Backbone.jsのメソッドの中にもUnderscoreを利用したものもあるので、Underscore.jsを覚えるとBackbone.jsを学習するときの学習コストがさがるかもしれないので、そのような意味でもUnderscore(Lo-Dash)を 一度触ってみてはいかがでしょうか。
