Backbone.js入門 「MVC」

### 閲覧上の注意

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

その他の割りと新しい情報は [Backbone.js Advent Calendar 2012](http://www.adventar.org/calendars/15) などにあります。

（追記ここまで）

----

予定では 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](https://gist.github.com/1362110)

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

###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 の両方の役割を担っている」と言った方が的を得ているのではないかと思います。

##まとめ

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

##今回はここまで

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

---

1. [Backbone.js入門 Events](http://qiita.com/items/16b799d0ec0a0ae3f78e)
2. Backbone.js入門 MVC
3. [Backbone.js入門 View](http://qiita.com/items/8ee2ed1949cd7c337f06)
4. [Backbone.js入門 Model](http://qiita.com/items/5acef8dd49f67fd7813c)
5. [Backbone.js入門 ViewとModelの連携](http://qiita.com/items/7ce4b1ceb5d18c9cef08)
6. [Backbone.js入門 Collection](http://qiita.com/items/c19d2fff0dc23e4015ff)
7. [Backbone.js入門 ViewとModelとCollectionの連携](http://qiita.com/items/7095a32cc5e438172844)
8. [Backbone.js入門 RouterとHistory](http://qiita.com/items/13f3d1f71d31f3e78123)

- [BackboneJS 日本語メーリングリスト](https://groups.google.com/forum/?fromgroups#!forum/backbonejs-ja)