.NET開発者のためのJavaScriptライブラリカタログ（MVCフレームワーク編）：特集：今から始めるJavaScriptアプリ開発（3/3 ページ）
Backbone.js
Backbone.jsは古参のMVCフレームワークであり、現在でも広く使われている。AngularJSと比べるとシンプルで、その分柔軟性も高い。また、MVCフレームワークに分類されてはいるが、ビューとモデルの結合度が高いのも特徴といえる。コントローラーと呼ばれるオブジェクトはBackbone.jsには存在せず、これに相当するものとして、Routerオブジェクトが提供されている。
また、Backbone.jsはUnderscore.js（ユーティリティ関数を多数含んだJavaScriptライブラリ）に依存している他（Backbone.jsとUnderscore.jsは作者が同じ）、DOM操作を行ったりRESTfulなAPIを利用して永続化したりするにはjQueryがほぼ必須となる。そのため、Backbone.jsはこれら二つのJavaScriptライブラリと同時に使用するのが一般的だ。
Backbone.jsではModel／Collection／View／Routerの各オブジェクトが重要な役割を果たしている。
- Backbone.Model： 単一のデータを表現するオブジェクト
- Backbone.Collection： Modelのコレクションを表現するオブジェクト
- Backbone.View： Webページの特定箇所を描画するビュー
- Backbone.Router： 主にURLのルーティング制御を行う
以下に簡単な（という割には長くなってしまったが）例を示す。
<!DOCTYPE html>
<html>
…… 省略 ……
<body>
<div id="msgbody"></div>
<form id="myform">
<input type="text" id="msg">
<input type="submit" val="submit">
</form>
<script src="js/app.js"></script>
</body>
</html>
(function() {
var Msg = Backbone.Model.extend({
defaults:{
body : "world",
},
});
var MsgView = Backbone.View.extend({
render: function(){
$(this.el).html('hello ' + this.model.get('body'));
return this;
},
initialize: function() {
this.model.on('change', this.render, this);
},
});
var MyFormView = Backbone.View.extend({
el: '#myform',
events: {
'submit': 'submit'
},
submit: function(e) {
e.preventDefault();
this.model.set({body: $('#msg').val()});
}
});
var msg = new Msg();
var msgView = new MsgView({model: msg});
var myFormView = new MyFormView({model: msg});
$('#msgbody').html(msgView.render().el);
})();
ここではコレクションを使用せずに、単一データを表すBackbone.Modelオブジェクトを拡張したMsgオブジェクトを作成し、そのインスタンスを二つのビュー（MsgViewオブジェクトとMyFormViewオブジェクト）に関連付けている。
var Msg = Backbone.Model.extend({
…… 省略 ……
});
…… 省略 ……
var msg = new Msg();
var msgView = new MsgView({model: msg});
var myFormView = new MyFormView({model: msg});
そして、ビューにはそれぞれrender関数があり、これが実際のHTML描画を行う。MsgViewオブジェクトのrender関数は「this.model.get(...)」というプロパティゲッターを使用して、bodyプロパティの値を取得して、文字列“hello ”とそれを連結したものを描画している。一方、MyFormViewオブジェクトではテキストボックスに入力された値を利用して、このモデルの値を更新している。
ここで重要なのが、モデルに更新が起こるとイベントが発生することだ。上に抜粋したように、二つのビューは同一のMsgオブジェクトをそのモデルとしているため、ここでは、MyFormViewオブジェクトで行われた変更が‘change’イベントを介して、MsgViewオブジェクトに伝えられる。そこで、このイベントをMsgViewオブジェクトでは監視して、値が変更されたらrender関数を呼び出すことで、表示内容を更新するようにしている。
initialize: function() {
this.model.on('change', this.render, this);
},
AngularJSと比べるとかなりコード量が多い。また、あくまでもBackbone.js自体はアプリを抽象化したようなクラス／オブジェクトが用意されているわけでもない。モデルとビュー（とここでは触れなかったがルーター）をうまく切り分けて、アプリを設計できるようにするためのシンプルなフレームワークであり、目指すところはフルスタックなAngularJSとは異なるだろう。
実際にはBackbone.jsでのアプリ開発をサポートするフレームワークとしてMarionette.jsや、双方向データバインディングを実装するBackbone.stickitなどのフレームワーク／ライブラリも存在するので、興味のある方はそれらについても調査してみよう。
クライアントサイドのMVCフレームワーク競争は、現状、AngularJSが大きくリードをしているが、Backbone.jsはまだまだ使われているテクノロジでもあり、これからAngularJS→Angular 2への移行がうまくいかなければ、枯れたテクノロジとしてこれからも使い続けられるかもしれない。
今回は三つのクライアントサイドMVCフレームワークを駆け足で見た。本当のところは、もっとコンパクトにして、より多くの種類のライブラリ／フレームワークを紹介するつもりだったのだが、筆者が原稿を書くのが遅すぎた（Vue.jsやReact.jsも取り上げたかったのだが……。それにつけても、定期的にきちんと原稿を書き上げてくださる筆者の皆さんには尊敬と感謝の念しかありません）。それらについては次回以降に取り上げることにしよう。
Copyright© Digital Advantage Corp. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。