【エムブイブイエム】

MVVM（エムブイブイエム）とは？

最終更新: 2026年10月4日

💡 画面の状態と操作を、ViewModelで整理する

Model・View・ViewModelに役割を分け、画面とデータやロジックの結び付きを整理する設計パターン。ViewModelが表示用の状態や操作を提供し、Viewがバインディングなどで利用する。

📌 このページのポイント

商品価格の表示例。表示は一方向のバインディングを使い、値の変更を通知する。

ひよこ

3つの役割は何なの？

ペンギン先生

Modelはデータや業務上のルール、Viewは画面の構造や表示の振る舞い、ViewModelは画面に渡す状態や操作を担当するよ。ViewはViewModelを利用し、ViewModelはModelやサービスを使う。画面部品への依存を分けるのが大切なんだ

ひよこ

データバインディングはいつも双方向？

ペンギン先生

一方向と双方向などの方式があるよ。例えば表示ラベルはViewModelからViewへ、入力欄は双方向で値をやり取りする構成にできる。方向や更新の条件を設定し、必要な変更通知も実装する。どんなプロパティでも変更すれば自動で表示が変わるわけではないんだ

ひよこ

ViewModelは何を持つの？

ペンギン先生

表示する値や読み込み中といった状態、保存などの操作を提供するよ。例えばModelの価格1000を、表示用の「¥1,000」に整える構成もある。変換を別の層に置く方法もあるので、全ての変換を必ずViewModelに入れるという意味ではないんだ

ひよこ

Viewには何も処理を書かないの？

ペンギン先生

業務ロジックは分けるけど、画面の構造や表示に関する処理はViewの役割だよ。アニメーションなど、画面部品に関わる振る舞いを持つこともある。ViewModelには画面部品を直接操作させず、状態や操作を通じて連携するんだ

ひよこ

MVVMなら画面のテストも全部いらなくなる？

ペンギン先生

ViewModelやModelのロジックは、画面を起動せずにテストしやすくなるよ。ただしバインディングの設定、表示、操作などの確認も必要。WPFや.NET MAUIなどで使われるけど、リアクティブに更新するUIが全てMVVMというわけではないんだ

まとめ：ざっくりこれだけ覚えればOK！

「MVVM」って出てきたら「画面とデータの間に、表示用の状態や操作を持つViewModelを置く設計」と思えばだいたいOK！

📖 おまけ：英語の意味

「Model-View-ViewModel」＝モデル・ビュー・ビューモデル

💬 データや業務処理のModel、画面のView、表示用の状態や操作を提供するViewModelの名前を組み合わせたものだよ

参考資料