Windows データ バインディングと MVVM

モデルビュー・ビューモデル (MVVM) は、UI と非 UI のコードを分離するための UI アーキテクチャパターンです。 MVVM で XAML でデータ バインディングを使用して疎結合を有効にして UI とデータを同期し、保守性を向上させ、依存関係を減らす方法について説明します。

疎結合が提供されるため、データ バインディングを使用すると、さまざまな種類のコード間のハード依存関係が軽減されます。 この方法を使用すると、他のユニットで意図しない副作用を引き起こすことなく、個々のコード単位 (メソッド、クラス、コントロールなど) を簡単に変更できます。 この分離は、多くの設計パターンで重要な概念である 懸念事項の分離の例です。

MVVM の利点

コードの分離には、次のような多くの利点があります。

• 反復的で探索的なコーディング スタイルを有効にする。 分離された変更はリスクが低く、実験が簡単です。
• 単体テストを簡略化します。 運用環境の外部と個別に分離されたコード ユニットをテストできます。
• チームコラボレーションのサポート。 個別の個人またはチームは、適切に設計されたインターフェイスに準拠する分離されたコードを開発し、後で統合できます。
• 保守性の向上。 分離されたコードのバグを修正すると、他のコードで回帰が発生する可能性が低くなります。

MVVM とは対照的に、より従来の "分離コード" 構造のアプリでは、通常、表示専用データにデータ バインディングが使用されます。 コントロールによって公開されるイベントを直接処理することで、ユーザー入力に応答します。 イベント ハンドラーは分離コード ファイル (MainWindow.xaml.cs など) に実装され、多くの場合、コントロールに密結合されます。 通常、UI を直接操作するコードが含まれています。 この構造により、イベント処理コードを更新せずにコントロールを置き換えるのが困難または不可能になります。 このアーキテクチャでは、分離コード ファイルは、多くの場合、UI に直接関連しないコード (データベース アクセス コードなど) を蓄積します。このコードは、他のウィンドウで使用するために複製および変更されます。

アプリ レイヤー

MVVM パターンを使用する場合は、アプリを次のレイヤーに分割します。

• モデル レイヤーは、ビジネス データを表す型を定義します。 このレイヤーには、コア アプリ ドメインをモデル化するために必要なすべてのものが含まれており、多くの場合、コア アプリ ロジックが含まれます。 このレイヤーは、ビュー レイヤーとビュー モデル レイヤーから完全に独立しており、多くの場合、部分的にクラウドに存在します。 完全に実装されたモデル レイヤーがあれば、同じ基になるデータを操作する Windows App SDK や Web アプリなど、複数の異なるクライアント アプリを作成できます。
• ビュー レイヤーは、XAML マークアップを使用して UI を定義します。 マークアップには、特定の UI コンポーネントとさまざまなビュー モデルメンバーとモデル メンバーの間の接続を定義するデータ バインディング式 ( x:Bind など) が含まれています。 ビュー レイヤーの一部として分離コード ファイルを使用して、UI をカスタマイズまたは操作したり、処理を実行するビュー モデル メソッドを呼び出す前にイベント ハンドラー引数からデータを抽出したりするために必要な追加のコードを含めることができます。
• ビュー モデル レイヤーは、ビューのデータ バインディング ターゲットを提供します。 多くの場合、ビュー モデルはモデルを直接公開するか、特定のモデル メンバーをラップするメンバーを提供します。 ビュー モデルでは、UI に関連するが、モデルには関連しないデータ (項目のリストの表示順序など) を追跡するためのメンバーを定義することもできます。 ビュー モデルは、データ アクセス コードなどの他のサービスとの統合ポイントとしても機能します。 単純なプロジェクトでは、別のモデル レイヤーは必要ありませんが、必要なすべてのデータをカプセル化するビュー モデルのみが必要な場合があります。

基本的な MVVM と高度な MVVM

他の設計パターンと同様に、MVVM を実装する方法は複数あり、多くの異なる手法が MVVM の一部と見なされます。 このため、Windows App SDK など、さまざまな XAML ベースのプラットフォームをサポートする複数の異なるサード パーティの MVVM フレームワークがあります。 ただし、これらのフレームワークには一般に、分離アーキテクチャを実装するための複数のサービスが含まれるため、MVVM の正確な定義はややあいまいになります。

高度な MVVM フレームワークは、特にエンタープライズ規模のプロジェクトに非常に役立ちますが、通常、特定のパターンまたは手法の採用に関連するコストが発生します。また、プロジェクトの規模とサイズによっては、利点が必ずしも明確であるとは限りません。 幸いなことに、明確で具体的な利点を提供する手法のみを採用し、必要になるまで他の手法を無視することができます。

特に、データ バインディングの全機能を理解して適用し、前に説明したレイヤーにアプリ ロジックを分離するだけで、多くのメリットを得ることができます。 これは、Windows App SDK によって提供される機能のみを使用し、外部フレームワークを使用せずに実現できます。 特に、 {x:Bind} マークアップ拡張機能 を使用すると、以前の XAML プラットフォームよりも簡単かつ高いパフォーマンスでデータ バインディングが可能になり、以前に必要な定型コードの多くが不要になります。

基本的なすぐに使用する MVVM の使用に関するその他のガイダンスについては、GitHub の Customers Orders Database UWP サンプル を参照してください。 他の UWP アプリ サンプル の多くは基本的な MVVM アーキテクチャも使用します。 Traffic App UWP サンプル には、コードビハインドバージョンと MVVM バージョンの両方が含まれており、 MVVM 変換について説明するメモが含まれています。

こちらも参照ください

トピック

データ バインディングの詳細
{x:Bind} マークアップ拡張

UWP MVVM のサンプル

Customers Orders データベースのサンプル
VanArsdel Inventory サンプル
Traffic App のサンプル