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で装飾しJavaScriptでゴリゴリする（ビュー）ようなものである。

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