1. MVVMパターン入門
～Windows8
WinRTでの開発に
向けて～

2. 自己紹介
卜部和敏(うらべかずとし)
kattoshi(かっとし)
facebook → https://www.facebook.com/kazutoshi.urabe
http://urabes.jp
マルチコンピューティング(株)
石川県小松市
ごめんなさい、ほとんどP○○活動記録です。
今日は事業をブッチ！してこっち
来年は…内容が変わるハズ

3. デザインパターン
過去のソフトウェア設計者が発見し編み出した設計ノウハウを蓄
積し、
名前をつけ、再利用しやすいように特定の規約に従ってカタログ
化したものである
エーリヒ・ガンマ
リチャード・ヘルム
ラルフ・ジョンソン
GoF(Gang of Four、4人組)がまとめたもの ジョン・ブリシ
ディース
23個あります
Factory Method,Singleton,Builder…
Adapter,Composite…
Command,Iterator,Observer…
1

4. アーキテクチャ・パターン(UIパターン)
代用的なものとして…
(1) フォーム・コントロール
(2) モデル・ビユー・コントローラ(MVC)
(3) モデル・ビユー・ビユーモデル(MVVM)
アーキテクチャ・パターンとは
宗教ですw
2

5. (1) フォーム・コントロール
依存 依存
Control Form Data
(イベントハンドラ)
コードビハインドと呼ばれるソースファイル上に、ControlまたはDataを操作するコードを書く。
コードはイベントハンドラの中に記述するので、楽に書ける
コントロール(UI)が変わると、そのコントロールに合わせて、コードを描き直すことがある。
ある動作を反映する場所は、コントロールが増えると、増加する。
3

6. (2) MVC(Model-View-Controller)
Controller(s) View(s)
View参照
更新通知(要求) Model参照
Model
Model参照
Webアプリケーションでの採用が多い
Apache(PHP),ASP.NET(VB,C#),J2EE(Java)
4

7. (3) MVVM(Model-View-ViewModel)
WinRT,WP7,WPF,Silverlight…(VB,C#,C++)
View View … ユーザーと対話する独立性の高いレイヤー
弱参照 変更通知
ユーザー入力をModelに伝えるまたはModelから
ViewModel ViewModel …
ユーザに出力するレイヤー
Model参照 変更通知
Model … ドメインロジック(=ビジネスロジック)をもつ
レイヤー。
Model
5

8. UnitTest View
ICommand:
プラットフォームごとに異なる画面操作などの
ロジック。XAMLだけで実現できない処理はコー
Viewからの操作要求
テスト XAML
ドビハインドを使用。ViewModelへの操作はイ
モジュール コードビハインド
ンターフェス経由で行う
INotifyPropertyChanged
値が変更された事をViewへ通知
DataBinding IDataErrorInfo
ユーザー入力等のエラーの情報をViewへ通知
入力項目または出力項目の定義
Viewの動作に影響されないこと
ICollectionView
(WPF / Silverlight / WindowsPhone / WinRT で共通
コレクションデータを表示するための操作要求
に使用できるなど)
ViewModel
ナドナド
データエンティティなどをプロパティで公開する
INotifyPropertyChanged
ビジネスロジック
値が変更された事をViewへ通知
Model など
6

9. オブジェクトインスタンスのイメージ
シーケンスのイメージ
View ViewModel
View
View
View
ICommand
Execute
ViewModel
ViewModel Model
View View ViewModel
プロパティ値変更
INotifyPropertyChanged Model
イベント通知
ViewModel
INotifyPropertyChangedなどを
利用したイベント通知
7

10. 実装は難しそう…
どこから手を付けたらいいの
かな？
色々フレームワークが
準備されています
8

11. MVVMフレームワーク
入門には最適
・PRISM
http://compositewpf.codeplex.com/
・MVVM Light Toolkit
http://mvvmlight.codeplex.com/
・Simple MVVM Light Toolkit
http://simplemvvmtoolkit.codeplex.com/
・Catel
http://catel.codeplex.com/
・Caliburn Micro
http://caliburnmicro.codeplex.com/
・Livet
http://ugaya40.net/livet
9

12. MVVMサイト(日本)
・えムナウBlog(えムナウさん)
http://blogs.wankuma.com/mnow/
・the sea of fertility(尾上さん)
http://ugaya40.net/
などなど
10

13. ご清聴ありがとうございました
11