--- title: "MVVMとは？仕組み・構成要素とMVC/MVPとの違いを実装例で解説" url: "https://www.issoh.co.jp/tech/details/3659/" published: 2024-09-25 updated: 2026-07-17 categories: ["アーキテクチャ"] publisher: "株式会社一創" --- # MVVMとは？仕組み・構成要素とMVC/MVPとの違いを実装例で解説 MVVM（Model-View-ViewModel）とは、画面（View）とデータ・ロジック（Model）の間にViewModelを挟み、UIと処理を分離するソフトウェアアーキテクチャです。2005年にMicrosoftのJohn Gossman氏がWPF向けに提唱したパターンで、データバインディングによって画面と状態を自動で同期させる点が最大の特徴です。この記事では、MVVMとは何かという基礎から、Model・View・ViewModelそれぞれの役割、データバインディングの仕組みまでを解説します。あわせて、C#/WPFでの実装コード例、MVCやMVPとの違い、メリット・デメリット、そして「MVVMは今も使われるのか」までを順に整理します。 ## まとめ：MVVMの要点 - MVVMはUI（View）と業務ロジック・データ（Model）をViewModelで仲介し、関心を分離するアーキテクチャ。 - ViewとViewModelはデータバインディングで結ばれ、状態が変わると画面が自動更新される（手続き的なUI更新コードが不要）。 - C#/WPFでは`INotifyPropertyChanged`でプロパティ変更を通知し、`ICommand`でボタン操作などをViewModelに渡す。 - MVCは「制御の入口」を分ける発想、MVVMは「双方向バインディングによる状態同期」が主眼という違いがある。 - テスト容易性と分業に強い一方、小規模画面ではViewModelが過剰設計になりやすい。 ## MVVMとは何か？関心の分離を実現するアーキテクチャ ### MVVMの定義と登場背景 MVVMは、アプリケーションを「表示（View）」「表示用の状態と操作（ViewModel）」「データと業務ロジック（Model）」の3層に分けるプレゼンテーション層のアーキテクチャです。もとはMartin Fowlerが2004年に提唱したPresentation Modelを、MicrosoftのアーキテクトだったJohn Gossman氏が2005年にWPF（Windows Presentation Foundation）のデータバインディングに合わせて具体化したものです。WPFのXAMLとバインディング機構を前提に設計されているため、宣言的なUIとViewModelの相性が良いのが特徴です。 ### MVVMが解決する課題 Viewのイベントハンドラにデータ取得・加工・保存の処理を直接書くと、UIと業務ロジックが密結合し、画面部品を変えるたびにロジックまで壊れます。MVVMはこの処理をViewModelとModelに追い出し、Viewを「バインディングで状態を映すだけの層」に保ちます。結果として、UI操作を伴わない単体テストがViewModel単位で書けるようになり、デザイナーとエンジニアが同じViewModelを介して並行作業しやすくなります。 ## MVVMの3つの構成要素と役割 ### Model：データとビジネスロジック Modelはアプリが扱うデータの実体と、その整合性を保つ業務ロジックを担います。データベースアクセスやAPI通信、ドメインのルール（在庫を負にしない、注文金額を計算する等）はここに置きます。ModelはViewやViewModelの存在を知らず、UIから独立しているため、別の画面や別のフロントエンドからも再利用できます。 ### View：画面表示とユーザー操作 Viewは画面のレイアウトと見た目だけを持つ層です。WPFではXAML、Androidではレイアウトファイルや`Jetpack Compose`が該当します。Viewは自分では判断を持たず、表示する値も実行する処理もViewModelにバインディングで委ねます。ボタンの見た目はViewが持ち、押されたときに何をするかはViewModelが持つ、という分担です。 ### ViewModel：ViewとModelの仲介役 ViewModelはViewに表示するための状態（プロパティ）と、Viewから呼ばれる操作（コマンド）を公開する層です。Modelから取得したデータを画面表示に適した形へ整え、ユーザー操作を受けてModelを更新します。ViewModelはView（画面部品）を直接参照しない点が重要で、これによりViewModelはUIなしでテストできます。MVVMの設計の良し悪しは、この責務境界をどれだけ守れるかで決まります。 ## データバインディングとデータフローの仕組み ### プロパティバインディングと変更通知（INotifyPropertyChanged） MVVMの中核はデータバインディングです。ViewModelのプロパティとViewの表示要素を結び付けておくと、どちらか一方が変わったときにもう一方へ自動反映されます。C#/WPFでは、ViewModelが`INotifyPropertyChanged`を実装し、値が変わったときに`PropertyChanged`イベントを発火することで、Viewに「この表示を更新せよ」と伝えます。開発者が明示的にラベルへ代入するコードを書かないのがポイントです。 ### コマンドバインディングでユーザー操作を処理（ICommand） ボタン押下などの操作は、イベントハンドラではなく`ICommand`としてViewModelに公開し、Viewからバインディングします。これにより「操作されたら何をするか」がViewModelに集約され、Viewはトリガーを渡すだけになります。双方向バインディング（TwoWay）を使えば、入力欄の変更がそのままViewModelのプロパティへ書き戻され、フォームの状態管理が簡潔になります。 ## MVC・MVPとの違い MVVMは同じくUIを分離するMVC・MVPと混同されがちですが、仲介役の性格が異なります。MVCのController、MVPのPresenter、MVVMのViewModelは、いずれもViewとModelの間に立ちますが、ViewModelはデータバインディングを前提に「状態を同期させる」点で特徴的です。要点だけ整理すると次のとおりです。 | パターン | 仲介役 | View更新の考え方 | | ---- | ---------- | ------------------------ | | MVC | Controller | 入力を受けModelを更新、Viewは結果を参照 | | MVP | Presenter | PresenterがViewを直接呼び出して更新 | | MVVM | ViewModel | バインディングで状態を自動同期 | MVPのPresenterはViewの参照を持って明示的に画面を書き換えますが、MVVMのViewModelはViewを参照せず、バインディング任せにする点が実装上の分かれ目です。それぞれの使い分けや判断基準は、[MVCとは？MVVM・MVPとの違いと使い分けを解説](/tech/details/7040/)で詳しく整理しています。 ## MVVMのメリットとデメリット ### メリット：テスト容易性・分業・再利用 最大の利点はViewModelをUIなしでテストできることです。画面を起動せずロジックの単体テストが書けるため、回帰を早期に検出できます。UIとロジックが分離されるので、デザイナーがXAMLを、エンジニアがViewModelを並行して触れます。Modelはフロントエンドに依存しないため、Windowsアプリと別画面でロジックを共有するといった再利用もしやすくなります。 ### デメリットとMVVMが不向きな場面 一方で、単純な画面にMVVMを適用すると、プロパティ通知やコマンドの定型コードが増え、かえって読みにくくなります。バインディングは実行時に解決されるため、表示が更新されない不具合は静的解析で気づきにくく、デバッグの手数が増えがちです。表示するだけの静的な画面や、数個の入力しかない小さなツールでは、MVVMを見送りコードビハインドで直接書いたほうが速いことも多く、規模とチーム体制で判断すべきです。ここは「常に採用すべき」ではなく、状態同期の複雑さが一定を超えたら導入する、という基準が現実的です。 ## C#/WPFで見るMVVMの実装例 WPFはMVVMが生まれた土台であり、最小構成のViewModelとXAMLバインディングを見ると仕組みが具体的につかめます。ViewModelは`INotifyPropertyChanged`で変更を通知し、操作は`ICommand`（下記は`RelayCommand`を利用）として公開します。 ``` public class MainViewModel : INotifyPropertyChanged { private string _userName; public string UserName { get => _userName; set { _userName = value; OnPropertyChanged(nameof(UserName)); } } public ICommand SaveCommand { get; } public MainViewModel() => SaveCommand = new RelayCommand(Save); private void Save() { // ViewModelからModelを更新して永続化する } public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(string name) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); } ``` View側は、テキスト入力をプロパティへ双方向バインディングし、ボタンをコマンドに結び付けるだけです。画面には更新用のC#コードを書きません。 ```