閲覧上の注意

この記事で対象としているバージョン0.5.3は結構古いので注意してください。

その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。

（追記ここまで）

予定では View の日ですが、当初の予定を変更して、今回は Backbone.js における MVC について解説したいと思います。
なお、今回の内容は、私の認識方法の紹介であり、異なる考え方をする人もいると思います。
とりあえず大事なことは「Rails の MVC と同じものだと考えてはいけない」ということです。

Backbone.js と MVC

Ruby on Railsに代表される MVC アーキテクチャを採用した WEB アプリケーションフレームワーク (WAF) に慣れ親しんでいる人にとって、MVC という単語は馴染み深いものだと思います。
しかしながら、本来 MVC は GUI を持ったアプリケーションを設計するために開発されたものであり、そのような本来の MVC と WAF における MVC は、登場人物の名前は同じですが、根本的に異なるものです。
Backbone.js はどちらかというと、ここでいうところの 本来の MVC に近いアーキテクチャになっており、本記事を読む人の大半が慣れ親しんでいる Rails 型の MVC とは考え方が 異なる ということをまず意識することが大切です。

Backbone.js と Rails の MVC の違い

参考: サバクラ両方で動く JavaScript の大規模開発を行うために — Gist

両者の違いが生まれるのは、それぞれの ユーザとのインタラクションの仕方が違うから です。

Rails の場合

詳しくは参考ページに譲りますが、WAF では基本的にユーザとのやり取りは HTTP を用い、ユーザから与えられるのは、ユーザが見ようとしているページの URL です。(参考ページ内では Model2 という名前で解説されています。)
そして、ユーザには HTTP を用いて主に HTML が返されます。
HTTP リクエストを受け取った Controller は内部で Model を介して DB にアクセスし、得られたデータを View に埋め込む形で HTML を生成し、HTTP レスポンスとしてユーザに返します。まるで Model と View は Controller の為のユーティリティモジュールのようです。

伝統的な MVC

一方 GUI アプリケーションでは、ユーザは「ボタンをクリックする」などの動作によって、システムとやり取りをします。
この時最初にユーザのインタラクションを受け取るのは、クリックされたボタンに対応する View なのです。
そこから、ボタンクリックに設定されたアクションを、Controller を呼び出す形で実行し、Controller 内部で Model が更新され、その更新がトリガーとなって View が変更されます。

Backbone.js の MVC

Backbone.js でもこれとほぼ同様で、ユーザが発生させた様々なイベントを View が捕捉することが起点となって、処理が始まります。
伝統的な GUI アプリケーションと少し異なるのは、URL の変更イベント (hashchange, popstate) を監視するために、Router と呼ばれる専用のオブジェクトが用意されていることですが、Router もユーザの行動を捕捉して処理の起点になるという意味においては、URL バーを管理する View である、つまり、Router は View の一種だと考えることができます。
実は Backbone.js の古いバージョンでは Router が Controller という名前でしたが変更されました。詳しい事情は知りませんが、おそらく、先に述べたように、Router は Controller というよりは View に近くこのような名前付けはミスリーディングである、と考えたのではないでしょうか。では Controller はどこにあるのでしょう？
Backbone.js では View が Controller を内包していると言えるのではないかと、筆者は考えています。（ここから先は意見の別れるところかも知れません）
実際、次回以降で見ていくように View が捕捉したイベントで起動されるのは View のメソッドであり、その中で Model の操作を行う場面が多々あります。
本来の MVC において View は Model を参照しませんが、Backbone.js では View が Model を保持していることを取り上げて、「Backbone.js はここが違う」という風に説明している場合がありますが、このように View が Controller の機能も含んでいると考えれば、View が Model を参照しているのは元々の MVC アーキテクチャの構造と一致します。また、「Router が Controller なのか」というような記述を見かけることがありますが、上記の話からも「Backbone.js の View は、旧来の View と Controller の両方の役割を担っている」と言った方が的を得ているのではないかと思います。

まとめ

Backbone.js の MVC と Rails の MVC は似て非なるもの
Backbone.js には Controller という名前のオブジェクトがない
Backbone.js では View の役割が大きい(一般的な View と Controller の両方の役割を持っている)

今回はここまで

当初の予定では View の使い方について解説する予定でしたが、準備として MVC について書き始めたら意外と分量が行ったので今回はここまで。
次回こそは View について扱います。
ではまた明日。

BackboneJS 日本語メーリングリスト

Backbone.js入門 「MVC」