Underscore.jsの入り口

第1回 Underscore.jsとは

この記事を読むのに必要な時間:およそ 3 分

本連載では,JavaScriptライブラリの1つ,Underscore.jsを解説していきます。第1回目となる今回は,Underscore.jsの概要と特徴,動かすところまでを紹介します。

Underscore.jsの概要

UnderscorejsはDocumentCloud Inc.とJeremy Ashkenasが開発しているJavaScriptライブラリです。DocumentCloud Inc.によりオープンソースとして提供されています。ファイルサイズは圧縮したもので4.9Kバイト(現バージョン1.5.2)と軽量なライブラリです。

Underscore.jsは,配列,オブジェクトの操作をはじめ,関数,オブジェクトなどを扱う際の便利関数が80あまり定義されています。配列,オブジェクトの操作の記述がネイティブな機能だけで書くよりも簡潔にシンプル書けるため非常に便利です。

また,Prototype.js,Rubyなどで実装されているmap,select,invokeなどの関数型プログラミングもサポートしています。

Underscore.jsで用意されているforEach,reduce,mapなどは,ECMAScript5の機能が実装されている環境ではそちらを使います。これにより無駄な処理が増えないため,実行速度が低下しません。その他,JavaScriptのビルトインのオブジェクト(object,Arrayなど)の拡張も行いませんので,プロトタイプ汚染の心配もありません。

Underscore.jsを動かす

どれくらいか便利になるか実際のソースコードを2つ取り上げて紹介します。

まず,数字の配列からそれぞれの要素を二乗して新しい配列を作る場合を考えます。通常ですと下記のようにfor 文を使うのが一般的だと思います。

var nos = [2,11,3,17,75,39,10,14];
var squaringNos = [];
 
for (i=0; i<nos.length; i++){

   squaringNos.push(nos[i] * nos[i]);

}
 
console.log(squaringNos);

//=> [4, 121, 9, 289, 5625, 1521, 100, 196] 

下記はUnderscore.jsのmapを使った例です。慣れないとはじめはわかりにくいかもしれませんが,非常にシンプルに書くことができます。

var nos = [2,11,3,17,75,39,10,14];

var squaringNos = _.map(nos,function(no){ return no * no; }) 
 
console.log(squaringNos);

//=> [4, 121, 9, 289, 5625, 1521, 100, 196]

次に数列のデータから奇数のデータを抜き出して新しい配列を作る場合を考えてみます。通常コードを書くとしたら下記のようになると思います。

var nos = [143,3343,343,344,556,344,5876,543,7764,83477,92340,1045,1100,1200];

var evenNos = [];
 
for (i=0; i<nos.length; i++){

   if ( nos[i] % 2 == 0 ){

      evenNos.push(nos[i]);
 
   }

}
 
console.log(evenNos);

//=> [344, 556, 344, 5876, 7764, 92340, 1100, 1200]

次はUnderscore.jsのfilterを使って書き直した場合です。

var nos = [143,3343,343,344,556,344,5876,543,7764,83477,92340,1045,1100,1200];

var evenNos = _.filter( nos, function(no){ return no % 2 == 0;} );
 
console.log(evenNos);

//=> [344, 556, 344, 5876, 7764, 92340, 1100, 1200]

いかがでしょうか。こちらも簡潔に書くことができました。ソースコードが簡潔になるだけではなく配列の処理の見通しもよくなると思います。

動かす準備

Underscore.jsのソースコードは公式サイトからダウンロードできます。

Downloadsの項にある「Production Version」を右クリックしてファイルを保存してください。

図1 ダウンロードリンク

図1 ダウンロードリンク

ダウンロードしたファイルを,次のようにHTMLにスクリプトタグで組み込めば使用できます(※Underscore.jsはこのファイルの他に依存するファイルはありません)。

<script type="text/javascript" src="underscore.js"></script>

下記のソースコードを実行して確認します。組み込んだUnderscore.jsのバージョンがコンソールに表示されまたしたら組み込み完了です。

Underscore.jsでは「_(アンダースコア)」を使用します。

console.log(_.VERSION);

//=> 1.5.2 
//※現状の最新バージョンです。

ほかにもGitHub Repositoryからも関連ドキュメント含めてダウンロードできます。

著者プロフィール

早瀬まこと(はやせまこと)

大規模Webサイトの運用更新にフロントエンドエ ンジニアとして従事しています。

DOMと組み合わせたフロントエンドの開発を主に行っています。

コメント

  • 「Underscore.jsを動かす」のサンプルについて

    お世話になっております。

    「Underscore.jsを動かす」の2番目のサンプルで「奇数のデータを抜き出す」とありますが、サンプルプログラムでは偶数のデータを抜き出しているように見えます。
    それとも、「抜き出す」は「抽出する」ではなく「取り除く」「除外する」の意味でしょうか。

    Commented : #1  山本学 (2014/04/24, 07:17)

コメントの記入