Underscore.jsの入り口

第1回 Underscore.jsとは

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

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(配列とオブジェクト)の機能
  • 配列の機能
  • オブジェクトの機能

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

著者プロフィール

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

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

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