yoshida

2013.11.08

Underscore.jsの使い方

JavaScript

今回は、javascriptのライブラリ「Underscore.js」の使い方をご紹介します。

■ 公式
Underscore.js(http://underscorejs.org/)
■ 日本語訳
enja-oss/Underscore ・ GitHub

Underscore.jsとは

Underscore.jsは、主にjavascriptの関数や配列、オブジェクトを扱う際に頻繁に発生する処理が、
100種類程度のメソッドとしてまとめられている軽量なライブラリです。
（投稿時の最新バージョンは1.5.2。圧縮版のサイズは4.9kb）

リリースからは既に数年が経過しており、
JavaScriptのフレームワークであるBackborn.jsで依存ファイルとして使用されていたり、
Backborn.jsとともにVersion 3.5以上のWordPressに同梱されていたりするようですので、
既に使用されている方もたくさんいらっしゃるかもしれません。

jQueryが変数「$」や「jQuery」内で様々な処理をしているのと同様に、
Underscore.jsでは「_（アンダースコア）」を使用します。

ほぼ全てのUnderscore.jsのメソッドは、下記のように記述します。

_.methodName();

Underscore.jsのメソッドの使い方

Underscore.jsは、ライブラリ本体を読み込むだけで使用することが可能です。

<script type="”text/javascript”" src="”http://underscorejs.org/underscore-min.js”"></script>

以下に簡単な使用例をご紹介します。
こちらでご紹介するサンプルはごく一部になりますので、
詳細は公式のドキュメントや、下記の参考で紹介しているページをご確認ください。

1. each, map

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

_.each()は配列やオブジェクトのlistを順に処理します。
第一引数にはリストを、第二引数には処理内容となる関数を記述します。

_.each([1,2,3], function(v){
 console.log(v);
});

/*
［結果］
1
2
3
*/

iteratorに指定する関数の引数は、listがオブジェクトの場合は「値」「キー」「リスト」、
配列の場合は「値」「インデックス」「リスト」の順になります。

.each()のようにリストを処理した結果を配列として返す.map()も便利です。

_.map([1,2,3], function(v){
   return v * 3;
});

/*
［結果］
[3, 6, 9]
*/

2. filter, find, reject

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

_.filter()はlistの値を順にiteratorで指定された関数で処理していき、
trueを返却した全ての値を返します。

_.filter([1, 2, 3, 4, 5, 6], function(v){
    return v % 2 == 0;
});

/*
［結果］
[2, 4, 6]
*/

最初にtrueを返却した値のみを返す場合は.find()、
.filter()の反対でtrueを返却した全ての値を除いた値を返す場合は_.reject()
を使用します。

3. groupBy, countBy

_.groupBy(list, iterator)

_.groupBy()はlistの値をiteratorで指定された関数で処理し、
結果をグループ化したリストにして返します。

_.groupBy(["1-3", "2-1", "2-4"], function(v){
return v.substring(0, 1);
});

/*
［結果］
{1: [1-3], 2: [2-1, 2-4]}
*/

グループ化されたリストではなく、リストの数を返す場合は、_.countBy()を使用します。

_.countBy(["1-3", "2-1", "2-4"], function(v){
return v.substring(0, 1);
});

/*
［結果］
{1: 1, 2: 2}
*/

4. shuffle

_.shuffle(list)

_.shuffle()はlistのコピーをシャッフルした結果を返します。

_.shuffle(["いち", "に", "さん", "よん", "ご", "ろく"]);

/*
［結果］
["よん", "ご", "いち", "さん", "に", "ろく"]
*/

5. first, rest, last, initial

_.first(array, [n])

_.first()は配列の最初からn個分の要素を返します。
第二引数を指定しない場合、最初の1つを返します。

_.first([5, 4, 3, 2, 1], 2);

/*
［結果］
[5, 4]
*/

最初からn個分の要素以外を返す場合は、.rest()を使用します。
最初では無く、最後からn個分の要素を返す場合は、.last()を使用します。
最後からn個分以外の要素を返す場合は、_.initial()を使用します。

_.rest([5, 4, 3, 2, 1], 2);

/*
［結果］
[3, 2, 1]
*/

_.last([5, 4, 3, 2, 1], 2);

/*
［結果］
[2, 1]
*/

_.initial([5, 4, 3, 2, 1], 2);

/*
［結果］
[5, 4, 3]
*/

6. zip

_.zip(*arrays)

_.zip()はarraysで指定した複数の配列の同じインデックスにある値同士でまとめられた新しい配列を返します。

_.zip(["Aさん", "Bさん","Cさん"], [80, 50, 60], ["○", "×", "×"]);

/*
［結果］
[["Aさん", 80, "○"], ["Bさん", 50, "×"], ["Cさん", 60, "×"]]
*/

7.mixin

_.mixin(object)

_.mixin()はUnderscore.jsのメソッドを新たに追加するために使用します。

.mixin({
  capitalize : function(string) {
    return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
  }
});
_("fabio").capitalize();

/*
［結果］
"Fabio"
*/

追加したメソッドはUnderscore.jsの標準のメソッドと同じように使用することができます。

まとめ

javasciptの組み込み関数を補うようなメソッドは、
jQueryにも含まれています（$.each(), $.map(), $.unique()・・・）が、
jQueryで用意されているメソッドは、どちらかというとDOM操作がメインとなっているのに対して、
Underscore.jsはjavascriptのコアな部分の処理に特化しており、メソッドの種類も非常に豊富です。

javascriptを多用するサイト（例えば、JSONやXMLから取得したデータをHTMLに整形する場合など）ではjQueryと一緒に読み込んでおくと何かと使う機会が多いと思います。

他のライブラリとの関係について、公式サイトでは下記のように書かれています。