MVVM（エムブイブイエム）とは何ですか？

Model-View-ViewModelの略で、UIとビジネスロジックをデータバインディングで分離する設計パターン。WPFやSwiftUI、Vue.jsなどで広く使われている。

MVVM（エムブイブイエム）のポイントは？

Model（データ・ビジネスロジック）、View（画面表示）、ViewModel（両者の仲介役）の3層で構成される。ViewとViewModelをデータバインディングで接続し、値が変わると自動的にUIに反映される。ViewModelがViewの状態を保持するため、画面のテストがしやすくなる。WPF、Xamarin、SwiftUI、Vue.js（Composition API）など多くのフレームワークで採用されている

【エムブイブイエム】

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

💡 画面と裏方を「双方向の糸電話」でつなぐ設計パターン

📌 このページのポイント

Model（データ・ビジネスロジック）、View（画面表示）、ViewModel（両者の仲介役）の3層で構成される
ViewとViewModelをデータバインディングで接続し、値が変わると自動的にUIに反映される
ViewModelがViewの状態を保持するため、画面のテストがしやすくなる
WPF、Xamarin、SwiftUI、Vue.js（Composition API）など多くのフレームワークで採用されている

MVVMの3層構造とデータバインディングの流れ

ひよこ

MVCは聞いたことあるけど、MVVMって何が違うの？

ペンギン先生

MVCのController（操作の受付係）の代わりにViewModel（画面の状態管理係）がいるんだ。MVVMの特徴はデータバインディングで、ViewModelの値を変えると自動的に画面が更新されるよ

ひよこ

データバインディングってどういうこと？

ペンギン先生

「画面の入力欄」と「ViewModelのプロパティ」を紐づけておくと、片方を変えるともう片方も自動で変わる仕組みだよ。たとえばテキストボックスに名前を入力すると、ViewModelのnameプロパティが自動更新されるイメージだね

ひよこ

ViewModelって結局何をするの？

ペンギン先生

Viewに表示するためのデータを整形して保持する係だよ。たとえばModelが「price→ 1000」を持っていたら、ViewModelが「displayPrice→ ¥1,000」に変換してViewに渡すんだ。Viewはただ表示するだけでいい

ひよこ

テストしやすいって本当？

ペンギン先生

ViewModelは普通のクラスだから、UIを起動しなくてもユニットテストできるんだ。「この値を変えたらこのプロパティがこう変わるはず」というテストを画面なしで書けるのが大きなメリットだよ

ひよこ

どのフレームワークで使われてるの？

ペンギン先生

元祖はMicrosoftのWPFだけど、今はSwiftUI、Jetpack Compose、Vue.jsのComposition APIなど、リアクティブなUI フレームワークの多くがMVVM的な考え方を採用しているよ。フロントエンド開発では避けて通れないパターンだね

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

「MVVM」って出てきたら「画面とロジックをデータバインディングでつなぐ設計パターン」と思えればだいたいOK！

📖 おまけ：英語の意味

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

💬 2005年にMicrosoftのJohn Gossmanが提唱したパターンで、WPF（Windows Presentation Foundation）のデータバインディング機能を活かすために生まれたんだよ

← 用語集にもどる

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

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