「Model View ViewModel」を編集中

'''Model View ViewModel'''（略称：MVVM）とは、[[ユーザーインターフェイス]]（[[UI]]）を構築するための[[デザインパターン]]のひとつです。

==概要==
最近流行の[[仮想化]]を[[プログラミング]]における[[デザインパターン]]として取り入れたものです。大雑把にいえば、実体の無い「仮想的なUI」である「ビューモデル」を用意して、そこで動作検証を済ませようというものです。

== 利点と欠点 ==
=== 利点 ===
* UIを仮想化するので[[単体テスト]]がしやすい

=== 欠点 ===
* [[ハローワールド]]すら[[ソースコード]]が壮大になる
** プログラマーやデザイナーの学習コストが大きい
** [[ソースコード]]の量に比例して[[バグ]]の量も増える。ただし[[バグ]]は潰しやすい。

=== 総評 ===
[[ITドカタ]]たちが高層ビルのような壮大な[[システム]]を建造する際の技法であり、[[日曜プログラマー]]が犬小屋のような小物アプリを作る際に使うような代物ではない。まさに適材適所であり、小物であれば[[MVC]]の方がいいです。

== MVVMの構造 ==
=== モデル（Model） ===
MVVMにおけるモデルとは、[[ビジネスロジック]]を記述する部分である。
いわゆる[[MVC]]パターンのモデルと同じものである。

プレゼンテーション層、ドメイン層、データソース層の3層からなる[[ドメイン駆動設計]]（通称：DDD）の思想に乗っ取れば、モデルはドメイン層に相当するものであるが、一般的にはその下のデータソース層までを含む。それどころかデータソース層に[[SQL]]などを用いて読み書きしているだけというシステムも多い。

=== ビューモデル（ViewModel） ===
MVVMにおけるビューモデルとは、操作と[[データ]]に対する純粋な表示を受け持つ部分である。
大雑把にいえば「UI（ビュー）を仮想化（抽象化）したもの」である。

ビューモデルは仮想のUI（ビュー）であり、たとえば"ファイルに保存する"などという「操作」をメソッド化し（コマンドと呼ばれる）、その結果は単純にメンバ変数などに反映させておくというものである。

MVCパターンにおけるビューでは、"ファイルに保存する"という動作がメインメニューとツールバー、さらにはショートカットキーの3通りもある場合には、[[ソースコード]]の書き方次第ではそれぞれに重複して似たようなメソッドが定義されることもしばしばあるが、MVVMパターンではUIを仮想化しているため動作はひとつとなる。

さらにビューモデルはビューの参照を持たず、ビューがどうなっていようと知ったことではないというのが重要な要素のひとつである。

こうすることによって[[単体テスト]]が桁違いに捗ること間違いなし。

=== ビュー（View） ===
MVVMにおけるビューとは、仮想のUIであるビューモデルに肉付けを行い、実際のUIを実現する部分である。
ビューモデルから得た情報を表示したり、ビューモデルにコマンドと呼ばれる操作を送ることに特化する。

大雑把な例であるが、一切装飾をしていない[[HTML]]（ビューモデル）に、壮大な[[CSS]]で装飾する（ビュー）ようなものである。

[[MVC]]パターンとの決定的な違いはこのビューであり、MVCではコントローラーがモデルとビューを結び付け、以降はビューとモデルが好き勝手にやっていたが、MVVMではビューが通信できるのはビューモデルだけである。

極端に言えば、[[パソコン]]向けのUI（ビュー）と[[iPhone]]向けのUI（ビュー）が別物であっても、ビューモデルに定義される「操作」は同一にできるという話である。ただし私の知る限りではMVVMは単体テストを捗らさせる目的で使っているものばかりであり、マルチプラットフォームのために使用しているという事例は実際には見たことも聞いたこともない。

==主なMVVMフレームワーク==
===.NET===
*[[WPF]]
*:実質的に[[Windows]]でしか使えない。[[デバッグ]]が容易になるが[[コード]]量が増えるので相殺され意味なし。
*[[MvvmCross]]
*:定番。[[NuGet]]が用意されてなくて若干不便。
*[[ReactiveUI]]
*:知らん。
*[[ReactiveProperty]]
*:知らん。日本製らしいが[[Xamarin.Forms]]ネタばかりで[[Xamarin.iOS]]での使い方がわからなかったので30分で諦めた。
===JavaScript===
* [[knockout.js]]

== 関連項目 ==
* [[デザイン・パターン]]
** [[Model View Controller]]
** [[Model View ViewModel]]

== 参考文献 ==
{{reflist}}

{{stub}}