Model View ViewModel

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

概要

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

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での使い方がわからなかったから1時間で諦めた。

JavaScript

• knockout.js

関連項目

• デザイン・パターン
  • Model View Controller
  • Model View ViewModel