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

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

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

ヒント

MVVM を使用する場合: MVVM は、複雑なデータ フロー、複数の画面、またはチームが開発したコードベースを持つアプリに使用します。 単純なシングルページ ツールまたはプロトタイプの場合、分離コードは許容されます。複雑さが増すにつれて、MVVM を段階的に採用できます。 アプリに単体テスト可能なビジネス ロジックがある場合、MVVM はそのロジックを実行中の UI なしでテストできるようにします。

MVVM の利点

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

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

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

アプリ レイヤー

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

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

基本的な MVVM と高度な MVVM

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

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

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

MVVM の使用に関するその他のガイダンスについては、やObservableObjectなどの基底クラスを提供する RelayCommand ライブラリと、定型コードを排除するソース ジェネレーター ([ObservableProperty] および [RelayCommand] 属性を使用) を参照してください。 WinUI ギャラリーでは、WinUI 3 を使用したデータ バインディングと MVVM パターンも示します。

こちらも参照ください

トピック

データ バインディングの詳細
{x:Bind} マークアップ拡張
WinUI アプリの MVVM パフォーマンスに関するヒント

WinUI 3 と MVVM のリソース

CommunityToolkit MVVM のドキュメント
WinUI ギャラリー - データ バインディングのサンプル
Template Studio for WinUI