WPF・MVVMで最初に覚えておきたいこと｜プログラムは「データ」と「処理」だけでは動かない

前回、

「プログラムはデータと処理で考えると理解しやすい」

という話を書きました。

実際、

プログラムを理解する時は、

・データ
・処理

の2つに分けるだけでもかなり整理しやすくなります。

でも、

WPFやMVVMを触り始めると、

こんな疑問が出てきます。

---

ボタンを押したらなぜ処理が動くの？

値を変更したらなぜ画面が更新されるの？

ViewModelの値を変えただけなのに画面表示が変わるのはなぜ？

---

僕自身、

新人の頃は

「DataContextって何？」

「Bindingって何？」

「PropertyChangedって何？」

と次々に知らない言葉が出てきて混乱しました。

でも今振り返ると、

これらは全部バラバラの知識ではありません。

実は、

データと処理を繋ぐための仕組み

だったのです。

---

WPF・MVVMには「繋ぐ仕組み」がある

前回紹介した内容を図にすると、

こんなイメージです。

プログラム

├ データ
└ 処理

でも、

WPF・MVVMでは実際にはこうなります。

プログラム

├ データ
├ 処理
└ 繋ぐ仕組み
    ├ Event
    ├ Command
    ├ Binding
    ├ DataContext
    └ PropertyChanged

新人の頃に混乱する理由の多くは、

データや処理を書いているつもりなのに、

実際にはこの「繋ぐ仕組み」で動いている部分が多いからです。

Event

Eventは、

何かが起きたことを知らせる仕組みです。

例えば、

・ボタンが押された
・画面が表示された
・マウスがクリックされた

などです。

「何か起きたよ」

を処理へ伝える役割を持っています。

Command

Commandは、

MVVMでよく使われる仕組みです。

ボタン操作と処理を繋ぎます。

ボタンを押した時に、

どの処理を実行するのかを管理しています。

Binding

Bindingは、

ViewとViewModelを繋ぐ仕組みです。

例えば、

ViewModelの値を画面へ表示したり、

画面で入力した値をViewModelへ渡したりします。

DataContext

Bindingが

「どのViewModelを見るのか」

を教える仕組みです。

DataContextが設定されていないと、

Bindingは正しく動きません。

PropertyChanged

値が変わったことを画面へ通知する仕組みです。

これがあるから、

ViewModelの値を変更すると、

画面表示も更新されます。

まずは全体像を知ることが大切

ここまで読むと、

「覚えること多いな…」

と思うかもしれません。

でも、

今回は細かい実装を覚えてほしいわけではありません。

まず知ってほしいのは、

WPF・MVVMには

こうした「繋ぐ仕組み」が存在するということです。

新人の頃は、

「Bindingが分からない」

「DataContextが分からない」

「Commandが分からない」

と個別に悩みがちです。

でも実際には、

全部バラバラの知識ではありません。

どれも、

データと処理を繋ぐための仲間です。

まずは、

そんな全体像があることを知るだけでも十分です。

なぜこれを知る必要があるのか

実は、

これらの仕組みを知らなくても、

サンプルコードを真似して画面を作ることはできます。

僕も新人の頃はそうでした。

動いているサンプルを参考にして、

少し修正して、

とりあえず動かす。

ここまではできます。

でも、

不具合が発生した瞬間に困ります。

ボタンを押しても動かない。

値が表示されない。

画面が更新されない。

そんな時に、

Eventなのか、

Commandなのか、

Bindingなのか、

DataContextなのか、

PropertyChangedなのか。

候補が見えなければ、

どこを調べれば良いのか分かりません。

逆に、

それぞれの役割を知っていると、

「まずここを確認してみよう」

が見えやすくなります。

次回以降について

今回は、

WPF・MVVMの全体地図を紹介しました。

次回からは、

・Event
・Command
・Binding
・DataContext
・PropertyChanged

を一つずつ見ていこうと思います。

それぞれが何をしていて、

なぜ必要なのか。

実際のコード例も交えながら整理していきます。

まとめ

前回は、

プログラムは

・データ
・処理

で考えると理解しやすい

という話をしました。

今回は、

WPF・MVVMでは

さらに

・Event
・Command
・Binding
・DataContext
・PropertyChanged

という

「繋ぐ仕組み」

があることを紹介しました。

僕自身、

新人の頃は処理ばかり見ていました。

でも実際にハマるポイントの多くは、

データでも処理でもなく、

その間を繋ぐ仕組みでした。

まずは、

「何のデータなのか」

「どんな処理なのか」

そして

「何がそれを繋いでいるのか」

を意識してみてください。

それだけでも、

WPF・MVVMのソースコードは少し追いやすくなると思います。

関連記事

まずはここから

・新人・初級PGが最初に覚えた方がいいこと｜言語より先に理解したいプログラムの仕組み

今回紹介した「繋ぐ仕組み」の関連記事

・WPFのDataContextでハマるポイント3選【MVVM】
・WPFでよくあるCommandハマりポイント3選＋回避策【初心者でも安心】
・WPFで後から辛くなるバインディングの典型パターン3選

さらに理解を深めたい人へ

・処理は追えるのに「なぜそれをしているのか」が分からない人へ
・ソースは読めるのに処理が追えないのはなぜ？
・どのソース見ればいいか分からない人へ