Underscore.jsの入り口

第1回Underscore.jsとは

本連載では、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からも関連ドキュメント含めてダウンロードできます。

Underscore.jsの書き方

Underscore.jsは、⁠_」という変数の中にそれぞれ便利な機能が入っております。

たとえばWebブラウザのコンソールでも

_.

とコマンドを入力と機能がたくさんあるのがわかると思います。

図2 Underscore.jsにはさまざまな機能が用意されている
図2 Underscore.jsにはさまざまな機能が用意されている

Underscore.jsは関数的に書く方法とオブジェクト指向的に書く方法の2種類あります。下記のコードの結果はまったく同じです。

//関数的
_.map([1,3,6,7], function(no){ return no * 2; } );
//=> [2, 6, 12, 14]

//オブジェクト指向的
_([ 1,3,6,7]).map(function(no){ return no * 2; } );
//=> [2, 6, 12, 14]

Underscore.jsの機能

Underscore.jsは80あまりの便利関数から構成されています。公式サイトではこれらを大きく6つの機能群に分けて紹介しています。

Collection(配列とオブジェクト)の機能

配列とオブジェクトの操作が用意されいます。条件にあうものを探す、配列とオブジェクトの真偽判定などが用意されています。

配列の機能

配列の操作が用意されています。配列の和集合や積集合、真偽判定などが用意されています。

オブジェクトの機能

オブジェクトのプロパティを操作する機能が用意されています。どのようなオブジェクトか判定するためのis関数も多数用意されています。

関数の機能

関数の複雑な操作を簡単にする機能が用意されています。関数のbind機能(thisの参照を引数で渡せる)やメモ化の機能が用意されています。

ユーテリティ

その他の便利機能です。テンプレートを作成する機能が用意されています。こちらはJavaScriptのオブジェクトのデータからHTML文字列を生成することができます。

Chaining

こちらはUnderscore.jsの関数をメソッドチェーンでつなぐための機能です。

こちらの6つ機能群は次回から詳しく説明します。

他のJavaScriptライブラリとの関わりについて

最後に、他のJavaScriptライブラリとの比較をしてみます。

たとえば、jQueryにはeachやbindといった機能はありますが、Underscore.jsにはdomの操作の機能はありません。しかし配列やオブジェクトの操作をする場合にUnderscore.jsのほうができる幅が広がります。それ以上にdomの操作はjQuery、データの処理はUnderscore.jsと役割を分けることで処理を明確にすることができるので、コーディングの観点から見やすくなりわかりやすくできると言えるでしょう。

JavaScriptMVCフレームワークのbackbone.jsは開発者が同じJeremy Ashkenasということもあるのですが、Underscore.jsに依存しています。MVCのモデルの部分で用意されているメソッドはほぼそれといってもいいです。

公式ドキュメントには「UnderscoreはjQueryのタキシードとBackbone.jsのサスペンダーにあうようなネクタイです」と解説されているほどです。

役割がまったく違うので、backbone.jsとjqueryとの親和性は非常に高いものになると思います。

まとめ

今回はUnderscore.jsの概要と特徴を紹介しました。

最後に公式サイトを紹介します。

公式サイトでは、HTMLに下記ソースコードのコメント文とともにUnderscore.jsが読み込まれています。

<!-- Include Underscore, so you can play with it in the console. -->

これによりサイトの情報を読みながらUnderscore.jsを実際に動かせるのです。英語のサイトですが、サンプルソースコードもたくさんありますので、サイトを読みながらの関数の確認もできます。

また、参考情報として、Underscore.jsのソースコードと注釈がそのままページになっているページがあります。

ソースコードも注釈もあり読みやすいので非常に参考になると思います。

次回は

  • Collection(配列とオブジェクト)の機能
  • 配列の機能
  • オブジェクトの機能

を紹介する予定です。お楽しみに。

おすすめ記事

記事・ニュース一覧