入門
第1回 Backbone.jsとは

本シリーズではBackbone.jsというJavaScriptのライブラリを扱います。第1回目はBackbone.jsが持つ設計手法や、基本的な機能について概観しましょう。

2012年11月15日発行

目次

本シリーズではBackbone.jsというJavaScriptのライブラリを扱います。Backbone.jsとは何か、具体的にどうのような機能があり、どういう場面で使うのかということや、Backbone.jsを使ったJavaScriptのアプリケーションの設計について解説していきます。

クライアントサイドMVCとは

まずはBackbone.jsを学ぶ前にクライアントサイドMVCとは何かということについて解説します。

jQueryの登場により、面倒だったJavaScriptでのDOM操作などが、とても簡単に記述できるようになりました。しかし、大規模なJavaScriptのアプリケーションを作ろうとした時に、jQueryを使うだけではJavaScriptのプログラムを管理するのが難しくなります。

なぜならjQueryは基本的にDOM操作やAjaxなどをクロスブラウザで使うことを簡単にするという目的であるため、大規模なプログラムのコードを管理しやすくするという機能はもっていないからです。

それでは大規模なアプリケーションのプログラムを管理しやすくするにはどうすればいいでしょうか。答えはプログラムをきちんと設計することです。しかし「設計」と一口にいっても、機能ごとにプログラムを分割したり、よく使う機能をクラスとして抽象化したりと、さまざまな手法が考えられます。

よい設計の手法として代表的なものがMVCです。MVCというのは、Model(ビジネスロジックを担当する部分)、View(表示・出力を担当する部分)、Controller(入力を受け取りModelとViewをつなぐ部分)という、大きく3つにコードを分けてプログラムを記述する設計の手法です。

MVCは元々サーバーサイドのプログラムでよく使われる設計手法ですが、最近ではクライアントサイドでも、このMVCの考え方を設計に取り入れることが多くなってきています。サーバーサイドのMVCと区別するため「クライアントサイドMVC」と呼ばれることが多いようです。

Backbone.jsとは

クライアントMVCを実現するためのフレームワークは数多くのライブラリが存在しています。その中でもよく使われている人気のあるライブラリがBackbone.jsです。

執筆現在(2012年11月中旬)の最新バージョンは0.9.2。

現在のバージョンは0.9.2なので、本シリーズではこちらのバージョンを元に解説していきます。

Backbone.jsが解決しないこと

Backbone.jsを使うとMVCの設計にプログラムを分割することができます。しかし、Backbone.jsを使えば、すべてのプロジェクトがうまくいってハッピーになるというわけではありません。例えばBackbone.jsを使って解決できないことに、次のようなものがあります。

  • 短期的な生産性の向上
  • コード量の削減

jQueryを使うと画像のロールオーバーやアコーディオンメニューなどを開発するときに格段に生産性が上がり、コード量も大幅に削減できることが期待されます。しかしBackbone.jsを導入したからといって、それがさらに改善されるということはほぼないと思っていいでしょう。

Backbone.jsが解決することは、中規模から大規模のJavaScriptのプログラムを実装し、メンテナンスしていくうえでの長期的な生産性の向上です。

また、そのためにはプログラムを設計する力というものが必要になってきます。

Backbone.jsはある程度設計の手助けをしてくれますが、ガチガチに制約を設けるということはしません。ですのでBackbone.jsを使う開発者が、どのように設計すればメンテナンスしやすいプログラムにできるかということを、自ら考えてプログラムを組む必要があります。面倒で難しいように感じるかもしれませんが、その分、柔軟でさまざまなケースに対応できるフレームワークとなっています。

Backbone.jsのアーキテクチャ

Backbone.jsには主に次のような機能があります。

名前MVCでの分類役割の概要
Backbone.ModelModel一つのデータの管理を行う
Backbone.CollectionModel一連のデータの管理を行う
Backbone.ViewViewDOM操作や表示の管理を行う
Backbone.RouterControllerURLによる処理の振り分けを行う
Backbone.HistoryController履歴の管理を行う

表を見て分かるように、Backbone.ModelBackbone.Collectionの2つがMVCのModelに相当するので、単にModelといった場合、どちらを指すかわかりづらいので注意してください。

本シリーズでは単にModelといった場合にはBackbone.ModelBackbone.Collectionの両方を含めた意味で使い、Backbone.Modelを指す場合は、Backbone.Modelと記述します。

また、表のように役割が分担されていますが、その役割を厳密に守らなくてもコードが正しければ動作はします。例えば、Modelの中でjQueryを使ってDOM操作を行うことも可能です。しかし、それをやってしまうとせっかくBackbone.jsを使って役割分担した設計が意味を持たなくなるので、DOM操作は必ずViewの中で行うというルール決めが重要なのです。

Backbone.jsの使い方

Backbone.jsはそれ単体では使えず、Underscore.jsというライブラリに依存しています。Underscore.jsはCodeGridでも解説しているのでそちらを参照してください*。

*注:Underscore.jsの記事

Underscore.jsは「おすすめライブラリつまみ食い」シリーズで解説しています。

また、Backbone.ViewBackbone.Syncなど、いくつかの機能はjQueryに依存しています(Zepto.jsなどのjQuery互換のライブラリでも可)。jQueryに依存していない機能だけを使うのであればjQueryを読み込む必要はありませんが、Backbone.Viewなどの中核を担う機能が依存しているため、ほとんどの場合jQueryやZepto.jsなどと一緒に使うことになります。本シリーズではjQueryを使います。

ですので、Backbone.jsを使うためにはBackbone.js、Underscore.js、jQueryをそれぞれ公式サイトからダウンロードし、次のように読み込みます。

<script src="underscore.js"></script>
<script src="jquery.js"></script>
<script src="backbone.js"></script>

そしてこのあとにBackbone.jsを使ったアプリケーションのプログラムを追加していきます。

具体的な機能や使い方は次回以降で解説しますが、少しだけ使い方を見てみましょう。例えばBackbone.Modelを使ってユーザーのデータを扱うUserモデルを作りたいと思ったら次のように記述します。

var User = Backbone.Model.extend({
  defaults: {
    name: null,
    age: null
  },
 
  say: function() {
    alert('僕は' + this.get('name') + '!' + this.get('age')  + '歳!');
  }
});

Backbone.Model.extendという関数を使ってBackbone.Modelを継承したUserモデルを作りました。作ったUserモデルはnewすることでUserのインスタンスを得ることができます。

var user = new User({ name: 'hokaccha', age: 28 });
user.say(); //=> 「僕はhokaccha!28歳!」というアラートが表示される
Backbone.Modelを継承したUserモデルの使用
前述のコードを記述したデモ。サンプルを再生すると「僕はhokaccha!28歳!」というアラートが表示される。

Backbone.CollectionBackbone.Viewも基本的にはこのようにextendを使い、Backbone.jsの機能を継承したクラスをつくることでアプリケーションを構築していきます。

その他のクライアントサイドMVCのライブラリ

クライアントサイドMVCのフレームワークはBackbone.jsだけでなく、さまざまなライブラリがあります。例えば次のようなものです。

この他にもたくさんありますが、列記したライブラリはBackbone.jsと比較されることが多いようです。それぞれのライブラリで特徴や設計思想が異なり、必ずしもBackbone.jsが最適だということはないので、自分の好みや作りたいものに合わせてライブラリを選ぶことが重要です。

これらのMVCライブラリを比較する試みのひとつに、「TodoMVC」という、同じ仕様のTodoアプリケーションを、それぞれのMVCフレームワークを使って構築するというプロジェクトがあります。

同一のTodoアプリケーションを異なるMVCフレームワークを使って構築し、それぞれのフレームワークの特徴や機能を比較するプロジェクト。

Todoアプリケーションが基準となっている理由は、フォームの入力やデータの永続化、DOMのイベントやURLによるルーティングなど、さまざまな機能をシンプルに実装することができるので、クライアントサイドMVCのサンプルとして、とても相性がいいからです(もちろんTodoアプリの仕様によりますが)。

MV*とは

これらのライブラリはよくMVCフレームワークとして比較されますが、正確にはMVCではないものあります。例えば、Knockout.jsはMVVM(Model、View、ViewModel)という設計手法にもとづいています。他にもMVP(Model、View、Presentation)、MOVE(Model、Operation、View、Event)などさまざまな設計手法が存在しており、それらをまとめてMV*という表現があります。*はワイルドカードで、MVC的な設計には、さまざまなバリエーションがあり得ることを示した用語です。

しかし大事なことは、抽象的な概念をどのような言葉で表すかではなく、プログラムを分割して管理できるようにするということです。ですから、本シリーズではこれらの違いにあまりとらわれず、MV*的な設計手法の総称という広義の意味合いでMVCという言葉を使います。

まとめ

今回はクライアントサイドMVCとBackbone.jsの概要について解説しました。次回からは具体的にBackbone.jsの機能や使い方について解説していきます。

外村 和仁
外村 和仁
フロントエンド・エンジニア

HTMLコーダー、JavaScriptプログラマ、PHP、Perlのプログラマといった職務を経験後、2010年に株式会社ピクセルグリッドに入社。大規模サイトの運用、開発の経験を活かしてバックエンドからフロントエンドまで幅広く担当。2015年、退社。好きな言語はJavaScriptとRuby。 著書に『ノンプログラマのためのJavaScriptはじめの一歩』(単著:技術評論社、2012年11月7日)があり、共著も多数。このほか、WEB+DB PRESS、Software Designなどにも寄稿。