【C# WPF】WPFを理解したいC#初心者の話【MVVMパターン編その1】
C# WPFについて学んでいく過程を備忘録として残して置きたいと思います。
1. WPFでのアプリケーションの開発について
前回までは「Hello World!!」アプリケーションの開発を通して、複数のコントロール部品を使いながらXAMLとC#、WPFのアプリケーションの開発のかなり基本的な部分を学びました。
しかし以前軽く触れましたが、WPFではMVVMパターンと呼ばれるアプリケーションの設計・開発の手法が使われることが多いようです。
これまでは小規模なアプリケーションの開発だったこともあり、すべての処理を分けることなく作っても問題はありませんでした。
しかし、MVVMパターンも使いこなせてこそのWPFアプリケーション開発ですので、今回から作るアプリケーションではMVVMパターンを取り入れた設計を考えながら学習に取り組んでいきたいと思います。
2. MVVM（Model-ViewModel-View）について
MVVM（Model-ViewModel-View）とは、UIが存在するソフトウェアの構造を階層的に整理したモデルのひとつであり、全体を「Model」-「View」-「ViewModel」の3層に分割したものです。
「Model」ではデータの管理や保存、入出力、内部的な処理を担います。
「View」では利用者に対する画面表示や入力。操作の受付を担います。
「ViewModel」では両者の間を仲介して互いの状態変更を通知、反映させる役割を担います。
これは以前も触れた内容ですが、これを実際に作るアプリケーションにあてはめながら少し考えてみましょう。
3. 四則演算を行う電卓系アプリケーションを作る
今回は、簡単な四則演算の計算を行う電卓系のアプリケーションを開発してみようと思います。
イメージとしては、ユーザーに整数を入力してもらい、さらに行いたい演算のタイプを選択し、何らかのボタンのクリックをトリガーとして計算結果を画面上に表示させるようなモノを考えています。
実際に開発に入る前に、アプリケーションに必要になりそうな機能を考えて列挙していきましょう。
・ユーザーが整数を入力する為の入力エリア×2
・ユーザーが演算のタイプを選択する為のコントロール
・ユーザーが計算結果を表示させるためにクリックするボタン系コントロール
・計算結果を表示するテキスト表示エリア
・入力エリアに整数以外を入力されていないかを検知する処理
・入力エリアが空の状態ではないことを検知する処理
・演算のタイプが除算の場合にゼロ除算ではないかを検知する処理
・計算を行うことが不可能と判断した場合に警告のポップアップを表示させる処理
・演算のタイプに応じた計算を行って結果を返す処理
・計算の結果が異常な数値になっていないかを検証する機能
・入力エリアの桁数を制限する処理
・計算結果の桁数を制限する処理
いくつか思いついた順番に列挙してみました。
実際に開発していく中でもう少し増えたり減ったりする可能性はありますが、事前に必要なものを挙げておくことで、開発がやりやすくなると思います。
4. VMMVパターンにあてはめてみる
では、先ほど挙げた機能をVMMVパターンにあてはめて考えてみましょう。
4-1. View
まず、ユーザーが操作を行ったり画面表示を行ったりする「View」の部分にあてはめられそうな機能を探してみましょう。
・ユーザーが整数を入力する為の入力エリア×2
・ユーザーが演算のタイプを選択する為のコントロール
・ユーザーが計算結果を表示させるためにクリックするボタン系コントロール
・計算結果を表示するテキスト表示エリア
・入力エリアの桁数を制限する処理
・計算結果の桁数を制限する処理
先ほど挙げた中では、この6つが「View」の部分にあてはめられます。
WPFアプリケーションを開発する際にXAMLを使って作成したり制御を行ったりする部分ですね。
また、
・入力エリアに整数以外を入力されていないかを検知する処理
に関して、XAMLで入力の際に日本語の入力を制限するようなコードを追加することで一部実現できそうな気もします。
そもそも整数以外を入力できないようにする方法をとるのが最もよいと思うので、その実現方法についてもう少し調べてみてもいいかもしれません。
4-2. ViewModel
次は、ユーザーの操作や内部の処理の間を取り持つ「ViewModel」にあてはめられそうな機能を探してみましょう。
・入力エリアに整数以外を入力されていないかを検知する処理
・入力エリアが空の状態ではないことを検知する処理
・演算のタイプが除算の場合にゼロ除算ではないかを検知する処理
・計算を行うことが不可能と判断した場合に警告のポップアップを表示させる処理
・計算の結果が異常な数値になっていないかを検証する機能
この4つは、「ViewModel」の部分にあてはめられると考えることができます。
実際に計算を行う前に計算の障害となるような問題を検知して、もし問題が検知された場合には処理を中断して警告のポップアップを表示を行う、という処理の部分です。
もしこの部分が無ければ、計算に不正な値が使われてしまい、バグの原因や最悪の場合は動作の停止も起こりえます。
ですが、その部分は計算を実際に行うタイミングではなく、その前で弾いてしまえた方が安全ですね。
また、計算を行った結果、何らかの理由で異常な結果となってしまっていないかを検知するところも「ViewModel」で実現できます。
これまで散々入力側に異常がないかを確かめていたのに、出力の際にバグが発生してしまっていたら元も子もないですからね。
こういった処理をViewModelで実現します。
4-3. Model
最後は、実際の内部処理を行う部分である「Model」にあてはめられそうな機能を探しましょう。
・演算のタイプに応じた計算を行って結果を返す処理
「Model」にあてはめられそうなのはこの部分だけです。
他の部分に比べて明らかに少なく感じてしまいますね。
今回はかなり単純な電卓系のアプリケーションを開発するので、内部的な処理が少ない為これ一つのみが「Model」にあてはまります。
これがもっと多機能・大規模な開発となった場合は、この部分がかなり大きくなってきます。
計算の仕組みや実際の処理をユーザー操作と切り離すことで、安全かつ簡単な操作によるアプリケーションの処理を実現しています。
あとはこれを基に、コードファイルを分けたりプログラムを作成していきながら開発してきます。
今回はかなり単純なアプリケーションですし、学習したいのは実際にコードを書きながら開発を進める部分ですので、詳細な設計の作業は飛ばして開発に移ります。
5. まとめ
今回はWPFアプリケーションを開発する為の基本的な設計開発の手法である「MVVMパターン」についてをまとめました。
MVVMパターンを利用した開発に関しては私も経験がなく、自分なりに調べながらですので、もしかしたらMVVMパターンの分類のあてはめに違和感があるかもしれませんが、今回はこれで進めさせてください。
次回以降ではこの分類を基にして、MVVMパターンを意識しながら、実際に新しくVisual Studioでプロジェクトを作成して電卓系のアプリケーションを開発する行程に入ってみます。