Ext JS 5 の MVC と MVVM について。さらに…
こんにちは、ゼノフィnakamuraです。
包括的なウィジェットライブラリ、強力なデータパッケージ、堅牢なツールのおかげで、Sencha Ext JS フレームワークはエンタープライズ Web アプリケーションの開発において、業界の標準になりました。2007 年に最初の Ext JS 1.0 をリリースしてから、業界では様々な変化があり、Web アプリケーションは本当に大きくてより複雑になっています。
2010 年に Sencha は Touch 1.0 をリリースし、MVC パターンのサポートを提供し、大規模なエンタープライズ Web アプリケーションにでのアーキテクチャの問題を解決する、業界初の JavaScript フレームワークを提供しました。 2011 年にその機能を Ext JS 4.0 に適用し、エンタープライズ Web アプリケーションの新たな世界でアプリケーションコードの整理方法を提供しました。
アプリケーションアーキテクチャは実際のクラスとフレームワークコードだけではなく、構造や統一性を提供することも重要です。そのため、良いアーキテクチャを作成すことにはいくつかの重要な利点があります
- 各アプリケーションは同じやり方で動作するので、一回学ぶだけで充分です
- 各アプリケーションは同じように動作するため、アプリケーションの間でコードを簡単に共有できます
- ビルドツールを利用して、テスト用、プロダクション用にアプリケーションの最適化されたバージョンを生成できます
Touch 1.0 と Ext JS 4.0 では MVC を使ったアプリケーションの構造に関するベストプラクティスをいくつか定義しました。Ext JS 5 ではこの概念を次の段階に持っていきます。オプションで MVVM アーキテクチャのサポートを提供しています。MVC と MVVM はよく似たソフトウェアパターンですが、MVVM を使うと開発者が書かなければならないアプリケーションロジックの量を大きく削減できるという利点があります。
重要なことですが Ext JS 5 は MVC で構築されたアプリケーションに関して、完全に後方互換性を保ちます。何が変更されて、何が同じかより解り易くするために、より深くMVC と MVVM パターンの役割を検討しましょう。
MVC とは何か？
Model-View-Controller ( MVC ) はソフトウェアを作成するためのアーキテクチャパターンです。アプリケーションの UI を三つの部分に分けて、 コードベースを、役割に応じて論理的な情報の表現に整理します。
MVC の実装はアプリケーション毎に少し異なる場合もありますが、ほとんどの場合はアーキテクチャの各部分には決まった役割があります。
- Model はアプリケーションで使用されるデータの共通な形式を記述します。ビジネスルール、バリデーションロジックなどの機能を含む場合もあります
- View はデータをユーザーに表示します。同じデータを複数のビューが異なる方法で表示することもあります (例えばチャートとグリッド)
- Controller はMVCアプリケーションの中心となる部分です。アプリケーション内のイベントをリッスンして、Model と View の間のコマンドの委譲を管理します
MVC の例
Sencha Fiddle の サンプル 例をご覧ください。
この例では、MasterとDetailレイアウトがあるシンプルな MVC アプリケーションがあります。マスタービュー (Ext.grid.Panel) にレコードが表示されていて、選択されたら関連する詳細ビュー (Ext.form.Panel) を作成します。 (詳細ビューで) Save ボタンを押すとマスタービューのレコードを更新します。
これは割とシンプルな例ですが、コンポーネントとモデルの参照を管理するためのマニュアル作業が (特に詳細ビューに) 多いことが明らかになります。
もう一つのアーキテクチャを紹介する時に後でこのサンプルに戻ります。
MVVM とは何か？
Model-View-ViewModel (MVVM) はその多くが MVC パターンに基づいた、もう一つのソフトウェア作成用のアーキテクチャパターンです。MVC と MVVM の大きな違いは、MVVM では View の抽象化 (ViewModel) が採用されていることです。これは Model のデータと View のデータの表現の間の変更を管理します (いわゆるデータバインディング) 。これは一般的に MVC アプリケーションで管理するのは面倒です。
MVVM パターンは MVC のアーキテクチャの長所 (関数の役割の分別) を活用しつつ、それに加えてデータバインディングの利点も提供します。その結果 Model とフレームワークは出来るだけ作業を行い、View を直接操作するアプリケーションロジックを削減します (必要なくなることもあります)。
MVVMパターンのエレメントは次のようなものです
- クラシックな MVC パターンと同様に Model がアプリケーションで使用われる共通の形式で記述します
- クラシックな MVC パターンと同様に、View はユーザーにデータを表示します
- ViewModel は View と関連する Model の間で変更を調整するビューを抽象化したものです。 MVCパターンでは、これは特別な Controller の役割になっていましたが、MVVM の場合には、ViewModel がデータバインディングとその該当する View で使われる方式を直接管理します。
覚えておいて欲しいのですが、MVVM 内の View の全てに ViewModel が必要なわけありませんが、使う場合は、関連している View それぞれに ViewModels が作成されるため、複数のインスタンスが同時に存在する可能性もあります。
MVVM の例
前の MVC で作成されたサンプルをもう一度見てみると、データバインディングを通してコンポーネントとモデルを手動で管理するいくつかの問題を MVVM で解決できるように思えます。Ext JS 5 で作成した改訂版のサンプルでは、レコードのデータを共有している二つのビューとレコードのデータバインディングを管理するために、Detail コントローラーを ViewModel に切り替えました。
もう Save をクリックする必要はありません。双方向データバインディングによって、レコードのデータは全てすぐにアップデートされます。これは手作業を大きく削減し、最終的に大規模なアプリケーションのデータ管理をよりシンプルにします。
MVVM でコントローラーはどうなったのか？
Model-View-ViewModel という名前ではありますが、MVVM パターンでは Controller を利用することもあります。ただその場合には、MVC+VM と呼んだほうがいいかもしれません。重要な点は、Ext JS 5 は MVC と MVVM のどちらかを選択するように強制するわけではないということです (こちらのハイブリッドの例をご覧ください) 。
Ext JS 4 はグローバルな意味で MVC Controller を導入し、Ext JS 5 はそのコンセプトをまだサポートしています。しかし、Ext JS 5 は ViewController という新しいバリエーションもサポートしています。
ViewController は本質的に ViewModel と似ています。双方の仕組みは関連している View に直接スコープされ、そのため MVC にあった、オブジェクト参照の管理とアプリケーションの状態を取り出すために必要だったオーバーヘッドのほとんどが無くなりました。
ViewController はイベントをリッスンして、そのイベントに対するロジックを実行するところは、Ext JS 4 の通常 (グローバル) のMVC Controller に似ています。しかし、 ViewController と普通の Controller の大きな違いは各 ViewController は関連するビューに対して生成されていますが、Controller は一つだけ生成され複数の View に渡りグローバル的にリッスンしています。
ViewController とViewModel はコンポーネントとそのライフサイクルを共にします。つまり View の各インスタンスに対して、設定された ViewModel と ViewController のインスタンスも生成されます。 ViewModel と ViewController が関連している View が廃棄されると、その ViewModel と ViewController も破壊されます。
これはある意味において素晴らしいニュースです。なぜなら、 より一般的な Controller では、存在しないかもしれない View のイベントをグローバルにリッスンするので、それと比べるとアプリケーションは処理の時間やメモリーを節約することができるからです。 ただもう一方では、複数の ViewModel や ViewController インスタンスが同時に存在できるため、メモリーの消費量が増える可能性もあります。
最後に、MVVM の View 全てに ViewController が必要わけではないことは覚えておいて下さい。それは完全にオプショナルです。
まとめ
Ext JS 4 では、コードを整理して統一したアーキテクチャを定義する MVC をエンタープライズ Web アプリケーションで利用できるようにしました。 Ext JS 5 は MVVM のサポートを追加しつつ、MVC の後方互換性も保ちました。そのため開発者にとっては、Ext JS 4 で作成したアプリケーションを最新バージョンにアップグレードしても問題はないはずです。
MVC に関するベストプラクティスは、今も Ext JS 5 でも有効ですが、双方向データバインディングを通して、開発者は大規模で複雑なアプリケーションを構築するために必要な、アプリケーションロジックの量を、大きく削減できることができます。
この記事はアプリケーションアーキテクチャ、MVVM、データバインディングついて説明しました。このシリーズの次の記事は ViewController と宣言型リスナーについて説明します。
