Model View ViewModel

Model-View-ViewModel (MVVM、モデル・ビュー・ビューモデル) はUIを持つソフトウェアに適用されるソフトウェアアーキテクチャの一種である"Model/View/ViewModel is ... tailored for modern UI development platforms" Gossman (2005). original post.。

MVVMはソフトウェアをModel・View・ViewModelの3要素に分割する。プレゼンテーションとドメインを分離し（V-VM / M）また宣言的Viewを分離し状態とマッピングを別にもつ（V / VM）ことでソフトウェアの保守性・開発生産性を向上させる。

Model-View-ViewModelパターンはModel-View-Controller (MVC) パターンの派生であり、特にPresentation Model パターンを直接の祖先に持つ。元来マイクロソフトのユーザインタフェースサブシステムであるWindows Presentation Foundation (WPF) やSilverlightの世界で生まれた考え方ではあるが、はAndroidやウェブブラウザ上でのJavaScriptの世界でもMVVMの利用は広がっている。

 沿革 
Microsoft MVPのJosh Smithのリポートより

MVVMパターンは、2006年11月21日にリリースされた.NET Framework 3.0に実装されたWPFとSilverlightの両方をサポートするために考案された。しかし、MVVMパターンはでは

WPFに取り組んでいる何人かのマイクロソフトアーキテクト (クリエーターのJohn Gossman、Microsoft MVPのJosh Simith、MicrosoftプログラムマネージャーのKarl Shifflett) はMVVMについてオンライン上で幅広く情報発信している。

さらにでは、パターンはmodel-view-binder (MVB) としても記載されている。

 背景 
UIを持つソフトウェアはしばしばドメインを司るエンジニアとUIを司るデザイナーの協業によって開発されるが、彼らが用いるツール・言語は必ずしも一致しない"In short, the UI part of the application is being developed using different tools, languages and by a different person than is the business logic or data backend." Gossman (2005). original post.。MVVMが解決する課題の1つ目はこの不一致の許容である。

ドメインデータとUIすなわちModelとViewは、表示（model→view）と操作（view→model）の関係をもつ。シンプルなケースではmodelの状態がそのままviewに表示され、viewの操作がそのままmodelの状態変更に適用できる（データバインディング）"In simple examples, the View is data bound directly to the Model. ... Other parts of the model can be edited by directly binding controls two-way to the data." Gossman (2005). original post.。しかし現実にはviewとmodelは1対1対応しない"In practice however, only a small subset of application UI can be data bound directly to the Model" Gossman (2005). original post.。model内の複数の要素から算出される値がviewでの表示に相応しい場合や、viewの操作に基づいた演算結果をmodelに適用したい場合（viewではなく演算だがドメインロジックではないケース）が頻出する"The Model is very likely to have a data types that cannot be mapped directly to controls. The UI may want to perform complex operations that must be implemented in code which doesn't make sense in our strict definition of the View but are too specific to be included in the Model" Gossman (2005). original post.。結果として状態を持つmodelとは別に、view自体にも状態を持たせる必要が出てくる"Finally we need a place to put view state such as selection or modes." Gossman (2005). original post.。MVVMが解決するもう1つの課題はこのviewが持つ状態の表現である。

 解決策 
model-viewでの開発プロセス差異（課題1）を許容しかつview状態を表現する（課題2）ために、MVVMパターンではソフトウェアをModel (モデル)、View (ビュー)、ViewModel (ビューモデル) に三分割する。

MVVMではmodelとviewを明示的に分離する（関心の分離#プレゼンテーションとドメインの分離）。これによりmodelとviewを異なるツールで異なる人が開発でき、効率よい協業が可能になる"Model/View/ViewModel is thus a refinement of MVC that evolves it from its Smalltalk origins where the entire application was built using one environment and language, into the very familiar modern environment ..." Gossman (2005). original post.。

またMVVMでは「Viewのためのモデル（model for a view）"The term means 'Model of a View'" Gossman (2005). original post.」としてViewModelを導入する。ViewModelはViewとModelの中間に存在し、表示のためにmodel値をデータバインディング可能な形式へ変換して状態として保持する。また操作のために演算用コマンド（ハンドラ）を有しているit also provides a specialization of the Model that the View can use for data-binding.  In this latter role the ViewModel contains data-transformers that convert Model types into View types, and it contains Commands the View can use to interact with the Model. Gossman (2005). original post.。このViewModelによる状態表現により、modelをviewに関知せず構築し、viewはデータバインディングを介したUI表示のみに特化させながら、model-view間をシームレスに繋ぐことが可能になる。

 MVVMの構成要素 
MVVMでは、プログラムを3つの要素、Model (モデル)、View (ビュー)、ViewModel (ビューモデル) に分割する。

 Model 
アプリケーションのドメイン（問題領域）を担う、そのアプリケーションが扱う領域のデータと手続き（ビジネスロジック - ショッピングの合計額や送料を計算するなど）を表現する要素である。

多くのアプリケーションではデータの格納に永続的な記憶の仕組み（データベースなど）が使われていたり、サーバが別途存在するアプリケーションではサーバ側との通信ロジックなどが含まれている。MVVMの概念ではMVCの概念と同様に、データの（UI以外の）入出力は取り扱わないので、強いて言うならばそれらはModelの中に隠蔽されると考えられる。

一般的にModelはドメインを担当すると言われるがこの言葉だけをもってModelの役割を想像するのは難しい。たとえばクライアントサーバモデルのアプリケーションのクライアントアプリケーション側は、そのドメインそのものがプレゼンテーションになっている。アプリケーションをプレゼンテーションとドメインに分けて考えようとした際にはこの事が混乱の一因となっている。Modelの役割は、後述するViewとViewModelの役割以外の部分と考えるのが妥当である。

ModelはViewの描画について知らないし、知る必要もない。ここで重要なのは、Modelは描画について関わらないだけで、Viewの見た目、装飾についての情報を保持したりするのはMVVMパターンとして何の問題も無いということである。つまり、そのアプリケーションが背景色や文字色、コントロール間の余白といった表示をカスタマイズできる場合、その背景色や文字色や余白のサイズを保持するのはModelである。ただし上述した通りModelは描画には関わることは無く、その情報を元に実際に描画するのはViewの役目である。(もちろんこのModelの情報はViewModelを経由してバインドされる。)

 View 
View（ビュー）はアプリケーションの扱うデータをユーザーが見るのに適した形で表示し、ユーザーからの入力を受け取る要素である。すなわちユーザインタフェースの入出力が責務である。Viewは宣言的に定義され"The View is almost always defined declaratively" Gossman (2005). original post.、渡された値に基づいて描画をおこない、ユーザー入力を通知する。よってMVVMにおけるViewは状態を持たない。

実装ではしばしば、ViewModelとのデータバインディングを介した値の取得と描画・ユーザー入力の通知がおこなわれる。そのためテンプレートエンジンや宣言型のドメイン固有言語 (DSL) にViewを委譲する形のプラットフォームと非常に相性がよくなる。

 ViewModel 
ViewModel（ビューモデル）はViewを描画するための状態の保持と、Viewから受け取った入力を適切な形に変換してModelに伝達する役目を持つ。すなわちViewとModelの間の情報の伝達と、Viewのための状態保持のみを役割とする要素である。

実装ではしばしば、Viewとの通信はデータバインディング機構のような仕組みを通じて行う。その場合ViewModelの変更は開発者から見て自動的にViewに反映される。

 Model-View-Controllerとの違い 
MVVMはModel-View-Controller（MVC）から派生したアーキテクチャであり、いくつかの違いがある。

まずMVVMのViewはMVCにおけるControllerを包含している。これは現代のGUIプラットフォームがControllerがかつて担っていた仕事の殆どを抽象化しており、thin Controllerをわざわざ区別する必要性が低いからである"The View ... consists of ... controls of a GUI. ... controls themselves manage the interaction with the input devices that is the responsibility of Controller in MVC (what exactly happened to Controller in modern GUI development is a long digression...I tend to think it just faded into the background.  It is still there, but we don't have to think about it as much as we did in 1979)." Gossman (2005). original post.。当初（MVCが提唱されたのは1979年）のMVCはマウスカーソルがどのView要素上に位置するかController側でハンドリングしていたが、現代のWebブラウザはそれを全て自動で行っている。

またMVVMのViewは宣言的に定義され状態を持たない。MVCにおけるViewは状態を持つViewクラスであり、Modelには含まれないView用の状態（View State。例: UI遷移中を示す属性）を保持していた。MVVMにおいてこの責務はViewModelへと移され、ViewはUIの定義と値のマッピングのみに責務を持っている"By the nature of ... declarative languages some view state that MVC encodes in its View classes is not easy to represent.  For example, the UI may have multiple modes of interaction such as "view mode" and "edit mode" that change the behavior of the controls or the look of the visuals, but these modes can't always be expressed in XAML"  Gossman (2005). original post.。

すなわちMVVMは、MVCをModel-Viewと解釈した上でViewを宣言型とし、Modelへの参照とView状態をもつ仲介役としてViewModelを導入している。

 Presentation Modelパターンとの違い 
MVVMと同様にMVCの派生パターンであり、アプリケーションをView - Presentation Model - Modelに分割する形のPresentation Modelパターンというパターンがある。
Presentation ModelパターンのPresentation ModelはMVVMのViewModelと同様にViewの状態を保持し、ViewはPresentation Modelの状態をデータバインディング機構のような仕組みを通じて自動的に描画するのみである。
一見MVVMとの区別はつかないが、もともとMVVMという言葉が提唱されたWindows Presentation Foundation (WPF)の世界でのMVVMにはPresentation Modelより一歩進んだ特徴がある。WPFでViewを担当するXAMLというXMLベースのDSLは非常に高機能で、Viewを完全にXAMLだけで実装する事やViewModelに対してViewを完全に抽象化する（異なったViewで差し替え可能にする）ことも可能となっている。

 実装 
MVVMはソフトウェアアーキテクチャパターンであり、フレームワーク・ライブラリではない。よってMVVMを採用する際はそれに合わせたモジュール分割をおこない、場合によってはMVVMを支援するフレームワーク・ライブラリを採用する。

一般には1つのModelを用意し、View全体をViewコンポーネント群へと分割、橋渡しとして各Viewに対してViewModelを設定する（1:N:N）。

 プラットフォーム・フレームワーク・ライブラリ 
XAMLベース
Windows Presentation Foundation (WPF)
Silverlight
Windowsランタイム (WinRT)
ユニバーサルWindowsプラットフォーム(UWP)
Xamarin.Forms

android-binding
Knockout.js
AngularJS
Vue.js"MVVM パターンに厳密に関連づけられているわけではないにもかかわらず、Vue の設計は部分的にその影響を受けています。慣例的に、私たちはインスタンスを参照するのに変数 vm（ViewModel の短縮形）を使用します。" Vue.js v3. docs.
ASP.NET Core Razor Pages"多くのネイティブ アプリ開発者にとって親しみやすいモデル-ビュー-ビューモデル (MVVM: Model-View-ViewModel) パターンを踏襲しています。" ASP.NET Core - Razor ページを使った簡単な ASP.NET MVC アプリ.

 問題点 

 ファットViewModel 
ViewModelの責務はModel-View間の形を合わせるための変換と値の保持であり、そのためにViewModelはModel変換の演算をおこなう。しかしこの演算においてModelが担うべき演算まで実装してしまう危険性があり、しばしば起きるこの実装ミスとそれによる肥大化はファットViewModelと呼ばれる。

 ファットView 
Viewでも同様の問題が起きうる。Viewはコマンド発行演算のみをおこなうべきだが、コマンドの引数を計算する過程などでビジネスロジックを埋め込む実装ミスがしばしば発生する。

 ViewModelの相互依存 
1つのモデルと1つのViewを仲介するためにViewModelは存在する。しかし実装上このViewModelを他のViewModelから利用してしまう場合がある。例えばVM1が持っている値が他のViewModel (VM2) でも利用できる形に整形されていたとする。VM2は変換を実装せずともVM1を参照・監視するだけで適切な値を得ることができてしまう。もしVM1がVM2の値を同様に参照すると容易に循環参照が発生する。VM1はVM2の値変更を監視しているため、VM2の変更でVM1が変更されそれによりVM2が変更され…とループが走り、システムの状態が予測不可能になる（デバッグが著しく困難になる）。

 脚注 

 関連項目 
Model View Controller (MVC)

 外部リンク  
John Gossman. (2005). Introduction to Model/View/ViewModel pattern for building WPF apps.
MVVMパターンを提唱した原典
Model-View-ViewModel デザイン パターンによる WPF アプリケーション
MVVMのModelにまつわる誤解
android-binding - Android開発用のMVVM用ライブラリ

Category:ソフトウェアパターン
Category:ソフトウェア工学
Category:プログラミングパラダイム
Category:ソフトウェアアーキテクチャ