グレープシティ株式会社
【13-C-2】デベロッパーに贈る！M-V-VMパターンで造るWPFアプリケーション
グレープシティ株式会社 ツール事業部 テクニカルエバンジェリスト
八巻雄哉
一般にWPFというと「視覚効果を駆使した派手なユーザーインターフェイス」が想起されるが、「M（Model）-V（View）-VM（ViewModel）パターン」によりユーザーインターフェイスとロジックの分離を強力にサポートする仕組みを提供しているという点も開発者にとってとりわけ重要なポイントである。このパターンの活用は、プログラムの保守性や再利用性、テスト容易性の向上に大きく貢献するものだ。M-V-VMパターンを活用した開発がWPFアプリケーションにもたらすメリット
Visual Basicの登場以来、フォームにコントロールを配置し、必要なイベントハンドラを記述するというユーザーインターフェイス（UI）中心の開発スタイルが一般化しているが、その手軽さの反面、業務ロジックがUIの処理に深く依存してしまうことから、特にコードの保守が困難になるという問題がある。「ここで重要なポイントとなるのが、ロジックとUIを分離させ、あくまでもロジック主体の開発を行うということです」とグレープシティの八巻氏は語る。
WPFで用意されている「M（Model）-V（View）-VM（ViewModel）パターン」は、まさにそうした開発をサポートしてくれるUIフレームワークだ。これはWPF版MVC（Model/View/Controller）というべきもので、UIとロジックを分離した開発を実現することで、プログラムの保守性、再利用性、テスト容易性を高め、またチーム開発での分業も行い易くなる。
「M-V-VMパターンにおける“Model”はMVCのそれと変わりがありませんが、“View”はMVCとは異なりユーザーの入出力を担当します。そして、それら2つの間にあって両者をつなぐアダプタ的な役割を果たすのが“ViewModel”です」と八巻氏はその概要を説明する。
Viewのデータや振る舞いをトータルに管理するViewModel
WPFにおいてこのM-V-VMパターンをサポートする主要な機能としては、データバインディングとコマンドの2つがある。セッションでは八巻氏が、用意した簡単なBMI値算出アプリケーションのサンプルを使って、データバインディングにフォーカスして解説を行った。
WPFのデータバインディングは、バインディングオブジェクトを介してターゲット（View）側であるUI要素のプロパティとソース側（Model）データオブジェクトのプロパティの値の同期を行うというもの。このとき、FrameworkElement.DataContextというプロパティを利用することで、バインディングオブジェクトごとにソースを指定するのではなく、共通のソースを指定することができる。また、INotifyPropertyChagneというインターフェイスが用意されており、ソース側のプロパティ値が変更されたことをターゲットに通知することができるようになっている。
ただしViewとModelを直接繋ぐという形をとると、Model側のデータが例えばdouble型であるような場合には、ターゲット側に0が入ってしまい、“未入力”の状態にできないというような問題も生じる。そうした問題は、ViewとModelの間にViewModelを置くことで解消できる。具体的には、ViewModelにString型のデータを用意して、ターゲット側の入力データとバインディング。そこで、入力データの検証を行った後、ソース側に渡すという処理を行うといった方法だ。これに関連してWPFには、データバインディングのプロセスの1つとして実行される入力データの検証・変換機能がフレームワーク側で用意されている。
「このような形でViewを抽象化するViewModelを用いることで、View側でのロジックの記述を排除し、最終的には表示に関わる部分だけを受け持たせることができます。これにより、単体テストが容易になるほか、View（XAML）の差し替えも柔軟に行えるようになります」と八巻氏は語り、M-V-VMパターンのメリットを強調する。
