「MVVMって聞いたことあるけど、結局どう使えばいいの？」
「ViewModel と Model の違いがよく分からない…」
そんなふうに感じたことはありませんか。
この記事では、C# × MVVM をこれから学びたい人に向けて、できるだけシンプルに、そして“実際に手を動かせる形”で紹介していきます。
今回は Microsoft 公式の CommunityToolkit.Mvvm を使って、
「MVVMってこういうことか」
と腑に落ちるところまで一緒に進んでいきましょう。
1. MVVM の役割をまずは整理しよう
MVVM は名前だけ聞くと難しそうですが、役割はとてもシンプルです。
- Model：アプリの“中身”。データやビジネスロジック
- ViewModel：画面と Model の橋渡し役
- View：UI（XAML）
よくある誤解として
「ViewModel が全部のロジックを持つ」
というものがありますが、これは正しくありません。
ViewModel の役割はあくまで
“画面に必要な状態を整えること”
であり、ビジネスロジックは Model に置くのが基本です。
▼ 全体の流れ（Model → ViewModel → View）
まずは MVVM の関係を図でイメージしてみましょう。
この図の流れを、これから実際のコードで確認していきます。
2. CommunityToolkit.Mvvm を選ぶ理由
MVVM フレームワークは色々ありますが、
「まずはこれを使っておけば間違いない」
と言えるのが CommunityToolkit.Mvvm です。
- Microsoft公式で安心
- 軽量で覚えることが少ない
- Source Generator でコードが自動生成される
- MVVM の本質だけに集中できる
特に、INotifyPropertyChanged を自分で書かなくていいのは大きなメリットです。
3. Model → ViewModel → View の流れを実装してみよう
ここからは、MVVM の3つの役割が“どう連携するのか”を実際のコードで見ていきます。
◆ Model：アプリの中身を担当するクラス
まずは Model から。
今回は「メッセージを返すだけ」のシンプルなサービスを用意します。
public class MessageService
{
public string GetMessage()
{
return "Hello from Model!";
}
public string GetUpdatedMessage()
{
return "Updated at " + DateTime.Now.ToString("HH:mm:ss");
}
}
Model のポイントは
UI のことを一切知らない
ということ。
View や ViewModel の存在を知らなくても動くのが理想です。
◆ ViewModel：Model と View の橋渡し役
次に ViewModel。
ここで CommunityToolkit.Mvvm の便利さが光ります。
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
public partial class MainViewModel : ObservableObject
{
private readonly MessageService _messageService;
public MainViewModel()
{
_messageService = new MessageService();
Message = _messageService.GetMessage();
}
[ObservableProperty]
private string message;
[RelayCommand]
private void UpdateMessage()
{
Message = _messageService.GetUpdatedMessage();
}
}
ここでのポイントは3つ。
✔ 1. Model を注入して使う
ViewModel が MessageService を利用しています。
これが「橋渡し役」としての ViewModel の仕事です。
✔ 2. ObservableProperty
[ObservableProperty] を付けるだけで
- プロパティ
- バッキングフィールド
- PropertyChanged 通知
が自動生成されます。
✔ 3. RelayCommand
[RelayCommand] を付けるだけで
- ICommand の実装
-
UpdateMessageCommandの自動生成
が行われます。
◆ View（XAML）：UI に専念する
最後に View。
View はロジックを持たず、ただ ViewModel の値を表示するだけです。
<StackPanel>
<TextBlock Text="{Binding Message}" FontSize="20" />
<Button Content="更新" Command="{Binding UpdateMessageCommand}" />
</StackPanel>
ボタンを押すと
→ ViewModel の UpdateMessageCommand が実行され
→ Model から新しいメッセージを取得し
→ TextBlock に反映される
この流れが MVVM の基本です。
4. ここまでで MVVM の役割が見えてきたはず
整理するとこうなります。
| 役割 | 何をする？ | 何をしない？ |
|---|---|---|
| Model | データ・ビジネスロジック | UI のことは知らない |
| ViewModel | Model を使って画面用の状態を作る | UI の描画はしない |
| View | UI の表示 | ロジックを書かない |
この分離ができると
- コードが読みやすくなる
- テストしやすくなる
- 画面が増えても破綻しにくい
といったメリットが生まれます。
5. 実務で MVVM を運用するコツ
実際に MVVM を使っていて感じたポイントです。
- ViewModel にロジックを詰め込みすぎない
- Model（サービス）に処理を逃がす
- ディレクトリ構成を決めておく
- Binding エラーは Output で必ず確認する
- コマンドやプロパティが増えたら分割を検討する
MVVM は「正しく分ける」ことが大切です。
6. まとめ
この記事では、
Model → ViewModel → View の流れが分かる MVVM の最小実装
を紹介しました。
- MVVM は UI とロジックを分離する設計パターン
- CommunityToolkit.Mvvm は最小構成で MVVM を実現できる
- Model を入れると役割が明確になり理解が深まる
もし「MVVM をちゃんと理解したい」と思っているなら、
まずはこの記事のコードを動かしてみてください。
きっと、MVVM の世界がぐっと身近に感じられるはずです。