前回は、
Eventは
「何かが起きたことを知らせる仕組み」
という話を書きました。
例えば、
ボタンを押すと、
Clickイベントが発生し、
そのイベントに紐付いた処理が実行されます。
でも、
MVVMのコードを見ると、
こんな書き方をよく見かけます。
<Button Content="次へ"
Command="{Binding NextCommand}" />
「あれ？」
「Clickイベントがない。」
そう思った人もいるかもしれません。
今回は、
MVVMでよく使われる
Command
について整理してみます。
Commandとは？
Commandを一言でいうと、
「実行する処理を表す仕組み」
です。
例えば、
保存する。
画面を切り替える。
印刷する。
これらの
「実行したい処理」
を表します。
Eventだけではダメなの？
ここで、
こんな疑問を持つ人もいるかもしれません。
「Eventがあるなら、それで十分じゃないの？」
例えば、
Clickイベントを使えば、
こんなコードが書けます。
<Button Click="NextButton_Click"/>
private void NextButton_Click(object sender, RoutedEventArgs e)
{
MoveNextPage();
}
これでも画面は動きます。
では、
なぜMVVMでは
Command
という仕組みを使うのでしょうか。
なぜMVVMではCommandを使うの？
もし、
画面(View)に
Clickイベントをどんどん書いていくと、
画面を作るコードと、
業務の処理が、
同じ場所へ増えていきます。
例えば、
・保存ボタン
・削除ボタン
・更新ボタン
・検索ボタン
画面が大きくなるほど、
画面のコードも複雑になります。
そこでMVVMでは、
処理をViewModelへまとめるために
Command
という仕組みを使います。
つまり、
画面(View)は
「ボタンが押されたことを知らせる」
役割。
ViewModelは
「何を実行するかを決める」
役割。
このように役割を分けることで、
コードが整理しやすくなります。
だから、
Commandは
Eventをなくすための仕組みではありません。
画面(View)と処理(ViewModel)の役割を分けるための仕組み
なんです。
Eventとの関係
では、
Commandを使うと、
Eventは使われなくなるのでしょうか。
実はそうではありません。
裏側では、
ボタンが押されると、
Clickイベントが発生しています。
そのEventをきっかけに、
Commandが実行されています。
つまり、
ボタンを押す
↓
Clickイベント発生
↓
Command実行
↓
ViewModelの処理
という流れになります。
Commandは、
Eventを置き換えるものではなく、
Eventを利用しながら、処理を書く場所をViewModelへ移している
というイメージです。
デバッグではどこを見る？
例えば、
ボタンを押しても
画面が切り替わらない。
そんな不具合が発生したとします。
その時、
いきなり画面遷移処理を調べるのではなく、
まず確認したいのは、
Commandまで来ているか
です。
例えば、
ボタン
↓
Command
↓
NextCommand
↓
画面遷移処理
↓
次画面表示
という流れなら、
まずは
Commandが実行されているか
を確認します。
もし、
Commandまで来ていなければ、
画面遷移処理を調べても意味がありません。
逆に、
Commandまで来ているなら、
その先の処理を確認すればよくなります。
このように、
原因候補を一つずつ絞っていくことで、
調査もしやすくなります。
次回はBinding
今回は、
Commandについて紹介しました。
Commandは、
処理を実行するための仕組みであると同時に、
ViewとViewModelの役割を分けるための仕組み
でもあります。
では、
ViewModelにあるCommandを、
画面はどうやって見つけているのでしょうか。
その時に登場するのが
Binding
です。
次回は、
「なぜViewModelの値が画面に表示されるの？」
をテーマに、
Bindingについて整理していこうと思います。
まとめ
今回覚えておきたいポイントは4つです。
✅ Commandは「実行する処理」を表す仕組み
✅ Eventだけでも処理は書ける
✅ MVVMでは、ViewとViewModelの役割を分けるためにCommandを使う
✅ デバッグでは、まずCommandまで来ているか確認すると原因を切り分けやすい
Eventの記事では、
「何が起きたかを知らせる仕組み」
を紹介しました。
今回は、
「なぜMVVMではCommandを使うのか」
という設計の考え方も紹介しました。
仕組みだけではなく、
「なぜその仕組みがあるのか」
まで理解できると、
MVVMのコードも読みやすくなってくると思います。
📚 WPF・MVVM基礎シリーズ
第1回
✅ 新人・初級PGが最初に覚えた方がいいこと｜言語より先に理解したいプログラムの仕組み
第2回
✅ WPF・MVVMで最初に覚えておきたいこと｜プログラムは「データ」と「処理」だけでは動かない
第3回
✅ ボタンを押したらなぜ処理が動くの？｜WPF・MVVMのEventを理解しよう
第4回（今回）
👉 ボタンを押したらなぜ画面が切り替わるの？｜WPF・MVVMのCommandを理解しよう
📖 あわせて読みたい（実践編）
WPFでよくあるCommandハマりポイント3選＋回避策
WPFで後から辛くなる設計3選（Binding / Command / ViewModel肥大）
MVVMでViewModelが肥大化する原因と、見直した設計ルール3つ