【Underscore.js】eachの使い方と解説

明けましておめでとうございます！2013年最初の投稿です^^;　ちょっとだけサクッと近況報告で、年末年始は色々ありまして、2月に入ってから少し落ち着き、1月20日に入籍しました。
とまぁ、近況はこんなもんで。(´∀｀∩)

Underscore.jsとは

簡単に言いますと、Underscore.jsというのは、JavaScriptのライブラリです。簡単すぎますが、つべこべ言わずに何がどう便利なのか、Underscore.jsのドキュメンに書かれている最初のメソッド、eachのサンプルを見てみましょう。

underscore.js eachの使い方

underscore.js

ライブラリはこれで、読み込むと _ ←アンダースコアを定義します。これで連想配列をパースしてみましょう。

1
2
3
4
5

obj = {A: 'a', B: 'b'};
_.each(obj, function(v) {
  console.log(v);
  // a b と出力されます。
});

さて、もうお気づきかもしれませんが、連想配列などをパースする際には、for in やjQuery.eachなどを使っていました。キーとバリューを出力する際、必ずキーが必要でしたが、Underscore.jsのeachを使えば、最初にバリューが第一引数で戻ってきます。たったこれだけですが、わかりやすくていいですよね。

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

obj = {A: 'a', B: 'b'};
 
/*
for in の場合、オブジェクトにキーを付けなければ
バリューが出ません。
*/
for (k in obj) {
  console.log(obj[k]);
  // a b と出力
}
 
/*
jQueryの場合は、第二引数にバリューが出るので、
必要なくてもキーを付けなければならない
*/
$.each(obj, function(k, v) {
  console.log(v);
  // a b と出力
}
 
/*
Underscore.jsでキーが必要であれば、
第二引数に変数を渡します。
第三引数はlistが戻ってきます。
*/
_.each(obj, function(v, k, l) {
  console.log(v);
  // a b と出力
  console.log(k);
  // A B と出力
  console.log(l);
  // [object Object] [object Object] と出力
});

簡単なまとめ

最近流行ってきている、軽量なMVCフレームワークのbackbone.jsは、このUnderscore.jsに依存しています。また、Rubyライクなコードの書き方になっていたり、これもまたCoffee Scriptなどでも言える、より短いコードで書ける方法として、Underscore.jsは便利といえるでしょう。最後に、jsdoitにテストを書いたので貼っておきます。