はじめに

本シリーズでは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です。

現在のバージョンは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には主に次のような機能があります。

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

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

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

Backbone.jsの使い方

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

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

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

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

• Spine.js
• Knockout.js
• AngularJS
• Ember.js
• YUI

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

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

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

まとめ

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