JavaScriptでMVC

現在、JavaScript で Nintendo 3DS 向けのブラウザゲームの開発ツールを作っています。3DS向けの脱出ゲームが簡単に作れるようになる予定です。

jQuery を使ってイベントをバインドしながらゴリゴリコードを書いているのですが、どうしてもぐちゃぐちゃになってしまいます。イベントのバインド、スタイルの変更、データの変更などが同じ場所に書かれているためです。

JavaScript でも MVC モデルのようにうまいこと整理して書けないかと調べてみたら、JavaScript にも MVC のフレームワークがあることがわかりました。

JavaScript MVCフレームワークはすでに十種類以上、その比較や最新情報などのまとめ - Publickey
http://www.publickey1.jp/blog/12/javascript_mvc.html


中でも気になったのは Backbone.js と AngularJS です。
どちらも MIT ライセンスで自由に使うことができます。

Backbone.js
http://backbonejs.org

AngularJS
http://angularjs.org


プログラミング学習サイトのドットインストールでどちらもチュートリアル動画がありました。

Backbone.js 入門 - ドットインストール
http://dotinstall.com/lessons/basic_backbonejs

AngularJS 入門 - ドットインストール
http://dotinstall.com/lessons/basic_angularjs


まだどちらも触っていないのですが、ドキュメントや動画を見た感じで何となく印象を書いておきます。

Backbone.js は Model, View, Controller といったクラスを提供してくれて、それらを継承して使うことでコードが整理できるようです。Model に変化があった場合に View へ自動的に知らせるようなイベント(listenTo()) なども準備されており、他の MVC フレームワークと似ている感じです。
ただし、 Controller が予想とは少し違いました。マウスイベントを Controller が受け取ると思いきや、View が受け取って Model へ処理を依頼するらしい。Controller は URL のフラグメントに対応する役割を持っているそうです。これによって Ajax アプリケーションでも戻るボタンが使えるとか。
Controller はほとんど使わず、 View と Model が Event を使ってやり取りを行う模様。View を画面に反映させるときは jQuery を使っていつもどおり要素をいじるっぽい。

Backbone.jsを利用したクライアントサイドMVCの導入についてそそろそろ書いておくか - Tous Les Jours 攻防記
http://d.hatena.ne.jp/kazuk_i/20110407/1302130947


一方、AngularJS は HTMLファイル = View という印象です。HTML の要素の属性として ng-xxxx 設定し、そこでデータがどのように表示されるかを記述します。書き方は Go 言語の template パッケージにそっくりです。
また、HTMLの要素に対して Controller を対応付けることができ、要素で発生したイベントが Controller へ投げられるようです。
Model はどうなっているのかというと、Controller の中にデータを書くっぽい？まだよくわかっていないのですが、Controller と Model が合わさってるような感じなのかな？
Controller 同士は、対応付けられた HTML の要素に合わせて階層構造を持ち、親のデータを取得してこれるようです。できるだけ上の方の要素にデータを集めておいて、下の方の要素からそれぞれいじる感じにすればいいんだろうか・・・？


HTML ファイルをそのまま View として扱えるところが面白かったので、まずは AngularJS を中心に勉強してみようと思います。