Asial Blog

Recruit! Asialで一緒に働きませんか?

Underscore.js で JavaScript を楽にしよう

カテゴリ :
フロントエンド(HTML5)
タグ :
JavaScript
ライブラリ紹介
Underscore.js
HTML5
PHP

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

いきなりですが、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


  1. _.each(list, iterator, [context])
forEachです。
  1. _.each([1, 2, 3], function (value, key) {
  2.     alert(value);
  3. });
と、コールバックの第一引数が value となります。

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

every


  1. _.every(list, iterator, [context])
listがすべて真ならtrueを返す

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

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


groupBy


  1. _.groupBy(list, iterator, [context])
listをグループ別けしてオブジェクトを返す

  1. _.groupBy([1.3, 2.1, 2.4], function(num){ return Math.floor(num); });
  2. => {1: [1.3], 2: [2.1, 2.4]}
  3. _.groupBy(['one', 'two', 'three'], 'length');
  4. => {3: ["one", "two"], 5: ["three"]}

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


おまけ



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

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

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

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