最近のMVCとJavaScriptのMVCについて まとめ

ここ最近のWebアプリの進化に伴い、ネイティブアプリ並のUIを持ったWebアプリへの期待が高まっています。jQueryなんかで簡単にDOMを操作できるようになりましたが、ある程度の規模のアプリを作ろうとすると jQuery だけでは厳しいものがあります。

そこで、JavaScript でも MVCパターンを適用し、モデルとビューの分離して、開発・保守しやすい設計にする、という流れになってきています。MVCは、元々は SmalltalkGUI アプリを作るときの設計指針として考えられました。デザインパターンの一つでもありますが、Singleton や Observer といった GoFデザインパターンよりも抽象度の高い、ソフトウェアアーキテクチャです。

そして時は流れ、Webの時代になると Strutsなどで代表されるWeb3層モデルとして、Webアプリの設計パターンとして一世を風靡しました。そして今、クライアントサイドのWebアプリへの適用として、再度GUI向けのMVCが脚光を浴びています。

 

Webの時代でもMVCパターンはWebだけに使われていたわけではありません。GUIアプリを作るためのMVCについて色々と議論が進んでいました。

モデルとビューを分離しコントローラーで制御するという古典的MVC、ドメインモデルにビューに関するロジックを埋め込んだプレゼンテーションモデルを使うPM(Presentation Model)、PMの派生でビューモデルをビューとデータバインドするMVVM(Model, View, ViewModel)、ビューでユーザの入力を受け、プレゼンタに渡し、プレゼンタがモデルを更新するMVP(Model, View, Presenter)など、様々な派生パターンがあります。(参考: 開発者が知っておくべき、6つのUIアーキテクチャ・パターン

他にも大規模MVCを分割するパターンとして、階層的MVCとしてのRecursiveMVC、エージェントをいう塊にして他のエージェントと連携して階層をつくるPAC(Presentation, Control, Abstraction)などがあります。(参考: PACについてのまとめ http://hamamuratakuo.blog61.fc2.com/blog-entry-432.html

 

こういったパターンを、JavaScriptで簡単に使えるようにしたフレームワークが沢山できています。Backbone.js、Spine.js、Ember.js、javascriptMVC、AngularJS、...etc。(参考: JavaScriptのMVCフレームワークと仲間たち

これらは同じMVCパターンを実現しているのだけれど、それぞれの解釈で、それぞれ異なる使い方になっていることが非常に面白い。例えばコントローラーの責務についても、Backbone.js ではurlハッシュのルーティングを行うのが主目的で、Spine.js では モデルのイベントをビューにバインドするもの、Ember.js は モデルをラップして操作する、といったようになっている。

なお、これらの色々なMVCフレームワークでTodoアプリを実装したサンプルが TodoMVC にあります。同じアプリを別のフレームワークで作るとどうなるか大変参考になります。

 

今後、クライアントサイドWebアプリがますます注目され、このような設計、フレームワークの重要性が増していくでしょう。MVC is dead なんて話が最近盛り上がりましたね。まだまだ良い設計パターンが出てくるでしょう。特に個人的に気になるのが、規模が大きくなったときに、どう設計するのが良いのか。ベストプラクティスが溜まることを期待しています。