アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

Underscore.js で JavaScript を楽にしよう


こんばんは、サドルのない生活にも随分慣れた高橋です。

いきなりですが、JavaScript面白いですよね!んでガリガリ書いてコード膨らんでしまって若干依存があって分割めんどくせー!という経験をされた方はいませんか?もしかしたら「あんな事したいなぁ」が Underscore.js でスマートに解決するかもしれませんよ。

Underscore.js とはユーティリティライブラリです。非依存のため、稼働中のアプリケーションにも導入できます。
実績については Backbone.js に組み込まれているのもあって十分でしょうか。
使い方は _.size() みたいな書き方で超簡単。 ものすごいUnderscoreです・・・

さて、数あるライブラリの中でUnderscore.jsを使う理由なんですが、やはりドキュメントが充実していう点でしょうか。これに一度目を通しておけば、あれやこれやしなくて済むかもしれません。
http://underscorejs.org/#collections
さらにソースコードに注釈がついたドキュメント
http://underscorejs.org/docs/underscore.html

以下は実際に使ってメソッド or テクってるなぁ〜と感じたメソッドを3つ抜粋しました。
Collection(オブジェクトか配列で使えるメソッド)です。

each




_.each(list, iterator, [context])

forEachです。


_.each([1, 2, 3], function (value, key) {
    alert(value);
});

と、コールバックの第一引数が value となります。



_.each([1, 2, 3], alert);
=> alerts each number in turn...
_.each({one : 1, two : 2, three : 3}, alert);
=> alerts each number value in turn...


every




_.every(list, iterator, [context])

listがすべて真ならtrueを返す



_.every([true, 1, null, 'yes'], _.identity);
=> false


複数の検証結果を判定するロジックで活躍しました。


groupBy




_.groupBy(list, iterator, [context])

listをグループ別けしてオブジェクトを返す



_.groupBy([1.3, 2.1, 2.4], function(num){ return Math.floor(num); });
=> {1: [1.3], 2: [2.1, 2.4]}

_.groupBy(['one', 'two', 'three'], 'length');
=> {3: ["one", "two"], 5: ["three"]}


これがあれば年代やカテゴリ等でスパっとグループソートできます。
にしてもサンプルがテクってるなぁ〜〜〜!と思いました


おまけ



他のライブラリ(jQueryとか)にもeachがあるのに
なぜわざわざ他のeachを使う必要があるのかという点についてお話します。

その理由としては、ユーティリティという役割や関心はUnderscore.jsにあるからです。
ですので、私はUnderscore.jsのeachをあえて使っています。
jQueryAjaxやDOM操作を担当させるみたいな考え方です

またユーティリティのライブラリは新しいものがどんどん出るし
新しい発想や良いものがたくさんあると思うので、みなさんも色々試してみてください。

あと、こんなのもありました。。
Underscore.php