MVVMパターンでSilverlightアプリを開発する その１

WPFかSilverlightで開発する場合に非常に有用なデザインパターンがMVVMだ。MVVMが最初に提唱され始めたのが2006年ごろらしいので、かれこれ4年ほどたち、その間にMVVM Light ToolkitやPrismなどかなりこなれたライブラリ群が多数出たおかげで、現在はMVVMにのっとった開発が容易になっている。今回はPrismよりも簡易に使い始められるMVVM Light ToolkitでMVVMでの開発方法を紹介する。

MVVM Light Toolkitの導入
MVVM Light Toolkitの公式サイト
MVVM Light Toolkitのインストール方法
上記２つ目のリンクから「Binaries (WPF3.5SP1/SL3/WPF4/SL4/Windows Phone 7)」のリンクをクリックしてDLL群をダウンロードしよう。解凍するとProgram Files配下のフォルダができるのでそれをコピーしてProgram Files配下へと配置する。

あわせて
「Templates for Visual Studio 2010 (WPF3.5SP1/SL3/WPF4/SL4/Windows Phone 7)」
「Snippets for Visual Studio 2008, Visual Studio 2010 and Visual Studio 2010 Express (WPF3.5SP1/SL3/WPF4/SL4/Windows Phone 7)」
からテンプレートとコードスニペットをダウンロードしておくと良いだろう（私の環境はVS2010なのでそれようのファイルをダウンロードしている。自分の環境にあったものを選択してほしい）。配置方法はZipファイルを解凍後、それぞれ所定の位置にコピーすればよい。所定の位置は下図を参考にしてほしい。

例）C:\Users\Yoo\Documents\Visual Studio 2010\Templates

例）C:\Users\Yoo\Documents\Visual Studio 2010\Code Snippets\Visual C#\My Code Snippets


セットアップが完了したらVisual Studio 2010を起動し、新規プロジェクトの作成を選択し、Silverlightの項目を選択しよう。テンプレートをコピーしている場合は下図のようにMvvm Lightという項目があるはずなのでSL4のほうを選択しよう。

プロジェクトのスケルトンは下図のようになる。

MVVMについて
ここでMVVMパターンについて簡単に説明しておこう。

MVVMはModel View ViewModelの略称でMVC（Model View Controller）, MVP（Model View Presenter）の流れから来ている。このMVVMを理解するうえで最も重要なのはVMの部分で、ViewModelがなんぞや、というのを理解すればおのずとMVVMがどういうものか理解できる。

※ここでViewModelのやりとりしている矢印がData Access Layerだけなのは、ViewとのやりとりはBindingを介して行うのでMVVMパターンの建前上ViewとViewModelの間にはやり取りが発生しない（Code Behindにイベントハンドラを記述する必要がなくなる）。

ここで上の微妙な図を使って図解する。図を見てもらうと分かると思うが、ViewModelはViewとModelの中間に位置する。ViewModelの存在意義はいくつがあるが、そのうちもっとも重要なのは、ModelとViewの間にある必要な情報の差を埋める部分にある。アプリケーションは多種多様な情報を扱うが、大体バックエンドのデータストアにはSQL ServerなりOracleなどのデータベースを使うのが一般的だろう。そのため、バックエンドにデータを流し込んだり、取得する単位はテーブルエンティティ毎になりやすい。しかし、RDBのテーブル構成はデータ保持の観点からは大変優秀だが、UIにそのまま表示する情報の形式としては足りなかったり、過剰であったりする。そこで、View（ここでいうUI）とModel（ここでいうテーブルエンティティ）の間を取り持つのにViewModelが存在する。つまりViewModelには、多様なデータを取得しViewに必要な情報を形成する役割とユーザのインプットをModelにしデータアクセスレイヤーに渡す役割という２つの大きな役割がある。

また、ViewModelにはそれ以外にもCommandとしてユーザのアクションハンドラーを公開することが求められる。ユーザのアクションハンドラー（要するにイベントハンドラー）をCommandとして公開する理由は下記の通り。

• ViewのUI要素のCommand（Button.Commandなど）とViewModel.CommandをBindingすることが可能となり、Code Behindにイベントハンドラを記述する必要がなくなる（保守性がアップ）
• イベントハンドラも含めてビジネスロジックはすべてViewModel上にあるので単体テストを行うことが容易になる（Testabilityがアップ）

以下に簡単にまとめる。

• View：UI要素の集合。プレゼンテーション層
• Model：テーブルエンティティだったり、DTOだったり、ビジネスエンティティだったり
• ViewModel：ViewとModelの中間層。ビジネスロジックはここ。Commandもここ

MVVM Light Toolkitの説明
ここで簡単にMVVM Light Toolkitの説明をする。基本となる要素は下記の通りだ。

• ViewModelBase
• Messenger
• RelayCommand

ViewModelBaseは名前の通りにViewModelの基底クラスだ。いくつか便利な関数が用意されているので特別な理由が無い限りViewModelはこのクラスから派生することをお勧めする。

MessengerはViewModel間に限らず、ありとあらゆる場所への通知が可能だ。画面遷移やViewModel間の値変更の通知などはこのクラスが担うことになる。

RelayCommandはMVVM Light Toolkitが提供するCommandクラスだ。これの他にもEventToCommandというかなり強力なCommandクラスがあるので、SelectionChangedイベントなどCommandとしてハンドルできないUI要素のイベントがある場合はこちらを使うことになる。

と、ここまでで結構長くなってしまったのでコードを使っての解説は次回以降に持ち越すことにする。