MVVMパターンとは何か

## 対象となる読者
+ C# 経験者で C#言語を理解している
+ MVVM パターンを理解したいが良く分からない
+ WPF を利用する
+ アーキテクチャについてある程度触れたことがある
+ WPF の分離コード（xaml.csファイル）の記述が多くなっていて気になる

## この記事を書くきっかけ
最近よく Qiita を利用させて貰っていて、何か返したいと思ったから。
また、今までずっと MVVM などのアーキテクチャパターンを勉強したいと思っていたが、ずっと取っ掛かりが持てなかったから。

## MVVMパターンの特徴
1. 処理部分を Model とする
1. 表示部分を View とする
1. 表示と処理をつなぐ役割を ViewModel とする
1. ある程度以上の規模を持つアプリケーションに有効
1. WPF あるいは UWP, MAUI を利用している

## なぜ MVVM パターンを使うのか
MVVM パターンは
+ INotifyPropertyChanged インターフェイスを実現した ViewModel クラスをDataContext などを使ってデータバインディングを行う

あるいは
+ Button に ICommand インターフェイスを実現したクラスを XAML で紐づける

ことにより

:::note info
イベントハンドラを <strong> 分離コードで記述せずに、あるいは、最小限に抑えることを目的としている </strong> と思われる
:::
## なぜ分離コードを最小限に抑えるのか
<strong>関心の分離が目的</strong>と思われる。

分離コードにイベントハンドラを記述していくことは関心が集中することに繋がる。<strong>分離コードが俗に言う神クラスになる</strong>可能性を持っている。

関心が一つのクラスに集中すれば、デバッグは大変で、機能追加も難しくなる。

だから、イベントハンドラの記述を xaml.cs ファイルの分離コードに記述し続ければ修正、拡張の難しいプロジェクトになってしまう。

だからそれを避けるために、関心を分離するために、つまり

:::note info
 <strong>コードをシンプルにするために、分かりやすく、修正、拡張しやすくするために</strong> MVVM パターンを使うと思われる。
:::
## なぜ MVVM パターンが分かりずらいのか
Model, View は比較的分かりやすい。しかし、ViewModel とは何なのか、どのような役割（目的）を持っているかが分からないから MVVM パターンはとっかかりづらいのではと思われる。

また、MVC や MV(R)P など、似た名前があってどれを勉強すれば良いか混乱するのもあると思います。
その場合には、後述する 「ViewModel を使うとなぜ関心が分離出来るのか」を見て頂けたらと思います。

## ではその ViewModel とは何なのか
INotifyPropertyChanged インターフェイスを実現したクラスや ICommand インターフェイスを実現したクラスを持っているクラスと連動する、あるいはそのもののクラス。
バインディングを実現させるための要素だと思われる。

## よく聞くバインディングって何よ
バインディングとは、例えば、テキストボックスってあるじゃないですか。アプリで文字を入力するやつ。
あれって単体では、枠に文字を入力するだけなんですが、入力した時に、それを使って処理をしたい。あるいはそのデータを他の部分と連動させたい。
そんな時に、処理や他の部分に繋げる機能の一つがバインディング（接合する）だと僕は思っています。

## で、INotifyPropertyChanged インターフェイスと ICommand インターフェイスって何よ

### INotifyPropertyChanged
データバインディングを実現するために、バインディングソースとして機能させるためのインターフェイス。
つまり、変更などがあった際に、バインディングターゲットに通知を行うためのインターフェイス。

### ICommand
ボタンを使う時に、イベントハンドラを分離コードに記述せずに、処理だけを一つのクラスに定義でき、このインターフェイスを実現することで、XAML から呼び出して、ボタンコントロールに登録できる。

## バインディングターゲットとかバインディングソースって何よ

### バインディングターゲット
バインディングターゲットとは、データに変更があった時に、それを反映する側のコントロール。基本的に View などの表示部分が多い。

### バインディングソース
バインディングソースとは、表示されているコントロールから入力した実際に処理する側のデータ。MVVM では基本的に ViewModel 部分などに存在するプロパティなどにしていく。

## なぜ ViewModel を使うと関心を分離出来るのか
WPF では、ViewModel を使わないと前述した xaml.cs ファイルが段々と神クラスへと膨張してしまう。つまり ViewModel や MVVM パターンとは、WPF の持つ xaml と分離コードの xaml.cs ファイルを神クラスにしないための、つまり WPF 固有のアーキテクチャパターンだと僕は考えます。

また、まだ他のパターンは勉強していないのですが、他のツールでは、関心の分離を行うアーキテクチャパターンの呼称が MVC(ASP.NET と ASP.NET Core) や、MV(R)P(Unity/C#)と呼び名を変えているのではないか。つまり、ASP.NET を勉強する人は MVC を、Unity を使う人は MV(R)P を勉強すると関心を分離出来るのではないでしょうか。

追記・ASP の MVC は元々 Java で普及していたアーキテクチャパターンで、ASP.NET でそれを2008 年に実現させた物だそうです。
元を辿ると Smalltalk で1979年に考案されたところに行き着くようです。
対する MVVM は2005年に WPF のために考案され、2006年に実現されたらしいのですが、MVC,MVVM は共に影響しあって発展したようです。

ですので、 MVC を勉強するのなら、Java や ASP.NET で、 MVVM なら WPF を使って勉強する(~~WPF でないと MVVM は勉強出来ない！~~)と理解を助けるのではないかと思います。

MVC を Unity を使おうとしたり、MVVM を Java で使おうとすると上手く行かないのではないかと思いました。

それと、簡単に調べただけですが、UWP や MAUI アプリも xaml ファイルを利用するので MVVM は使えるようです。訂正しました。

その他の言語やフレームワークでは、クリーンアーキテクチャを勉強すると関心の分離を助けると思われます。

## まとめ、どういう時に MVVM パターンを使うのか
ある程度の機能を持つアプリを作る時に、イベントハンドラを xaml.cs 上で記述する部分が多くなって神クラスになってきたな、と思ったら、ICommand, INotifyPropertyChanged, MVVM, データバインディング の単語を思い出して検索、勉強すると幸せになれるかも知れません。

## 参考文献
[プログラミング Windows 6th 上](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0Windows%E7%AC%AC6%E7%89%88-%E4%B8%8A%EF%BD%9EC-%E3%81%A8XAML%E3%81%AB%E3%82%88%E3%82%8BWindows%E3%82%B9%E3%83%88%E3%82%A2%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA-%E3%83%81%E3%83%A3%E3%83%BC%E3%83%AB%E3%82%BA-%E3%83%9A%E3%82%BE%E3%83%AB%E3%83%89-ebook/dp/B01BD54ZYC/ref=sr_1_3?crid=132M54OF935EL&dib=eyJ2IjoiMSJ9.3E1bX8wWuR5vCbETYWX_T50S_7pCu9BQNfo5Yec92tW1HGBVFdsCV56b_3SIrakQHsFib5pRDfFPBEkIJd54x_8xgzDwTeZh6Pjc0afxRQcTm_-y7cgkchaR867OmAa47O_BUzuVIxWsa8rgtcF7qF9_VDVhGLqLiCXBWF7fh5XgLOa4J9pc3OsgpFHukLVlA5erOQbxRSkpkBpf4cWmRzPOETErHOk6vz9b3weM20tonbJCMHH0udj9YD1n1Wde6WuMFoe-UOs1rPhWgYkSIDrTnpwpYCj-RuL9GdNGLuQ.AbksCqfgFSt8ux23HDoiFQ3zU-4KLTvLkfJw7DJ5GdE&dib_tag=se&keywords=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0+windows&qid=1720684736&sprefix=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0+win%2Caps%2C165&sr=8-3)

[エッセンシャル WPF](https://www.amazon.co.jp/%E3%82%A8%E3%83%83%E3%82%BB%E3%83%B3%E3%82%B7%E3%83%A3%E3%83%ABWPF-Presentation-Foundation-Programmers-SELECTION/dp/4798114200/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=HDTGDU47MJ1Z&dib=eyJ2IjoiMSJ9.0aZGKleRW8hpxJ6xapN_AqOo-lTpHL10BpuJLL8WwnE7M_X7wYCE1rtP6jngw6qArVdtSJIEdmehSDZM0MKGvxNIc2cT0HQUbRPooJSb-K5fgaZsksYW54MVwmC70wSjmDNg2IKFP9QC_VgcsAx43qrvusN_uykSVN-Nb7Q6EVFMMR1rcP3Mx7b_rMH-F3O3ZRyQvGL9b2zvLDeJ03bavXND_JYbUuDCSoTHiNhQ60Wbai2LNAQmdxlJf2bp2mrbY8EfGev-KXFsX_akoQUnvsSEmMTMQRXn5ni27RgNu7w._k1SDZAEKZOFA3OcaXFdRCu_drYe_GYeWLCV6M57iYE&dib_tag=se&keywords=%E3%82%A8%E3%83%83%E3%82%BB%E3%83%B3%E3%82%B7%E3%83%A3%E3%83%AB+WPF&qid=1720684785&sprefix=%E3%82%A8%E3%83%83%E3%82%BB%E3%83%B3%E3%82%B7%E3%83%A3%E3%83%AB+wpf%2Caps%2C175&sr=8-1)