半人前プログラマーの技術談議

開発した物と,C#を入門者向けに解説した記事を書いています!

【C# GUI】MVC part4-3【Windowsフォーム】

calendar

reload

【C# GUI】MVC part4-3【Windowsフォーム】

こんにちは!シロウです!

今回はMVCを紹介します.

MVC

概要

MVCは,Model,View,Controllerの3つの役割に分類する事です.

Modelはロジック(処理)の提供,

ViewはUI(フォームなど)の表現,

ControllerはModelとViewの管理をします.

例えば,Modelがコンソールアプリケーション(CUI)などで開発した処理で,ViewがWindowsフォームアプリケーションで作られたGUIだとすると,Viewで入力された情報をControllerが受け取り,Controllerが受け取った情報をModelに渡して処理を委ねます.

処理の結果を受けとったControllerは,Viewに結果を伝えます.

ソフトウェア設計では,MVCが使われる事が多いです.

 

準備

新たにWindowsフォームアプリケーションのプロジェクトを作成します.

名前は「RandomNumberUI」とします.

ソリューションエクスプローラーで「Form1.cs」から「MainForm.cs」に名前を変更する.

プロパティから,MainFormのSizeを「300,120」に変更する.

プロパティから,MainFormのTextを「数字列生成」に変更する.

フォームの名前が変わります.

ツールボックスから,Label,NumericUpDown,Button,TextBoxを以下のように配置する.

プロパティから,

label1の(NAME)を「NumberLabel」,Textを「文字数」,

numericUpDown1の(NAME)を「NumberController」,

button1の(NAME)を「GeneratorButton」,Textを「数字列生成」,

textBox1の(NAME)を「NumberTextBox」に変更する.

ここまでできたら,一応実行(デバックなしで開始)して確認してみましょう.

こちらで用意した,プログラムを使用します.

ダウンロードできたら,展開してわかりやすい場所に置いてください.

ここまでで準備完了です.

 

MVC開発

プロジェクトの取り込み

先ほど作成したプロジェクトに,ダウンロードしたプロジェクトを取り込みます.

画面左上のファイルメニューから,追加→既存のプロジェクトの順に選択します.

ダウンロードしたプロジェクトファイルを選択します.

ソリューションエクスプローラーでRandomNumberプロジェクトが追加されたことが確認できたらOKです.

ちなみに,この状態で実行すると,RandomNumberUIの方が実行されます.

ソリューションのプロパティの,スタートアッププロジェクトに設定しているプロジェクトを変更する事で、実行されるプロジェクトを変える事ができます.

 

Controllerクラスの作成

ソリューションエクスプローラーで,RandomNumberUIを選択し,追加→クラスの順にクリックします.

名前はController.csにします.

ここでMVCのControllerについて,役割を再確認します.

今回作成するアプリケーションでは,

ViewがRandomNumberUIのMainForm,

ModelがRandomNumberプロジェクトです.

Controllerは,ViewとModelの仲介役です.

 

Controllerクラスの役割は,コンソールアプリ(RandomNumberプロジェクト)のMainメソッドを見ると理解しやすいと思います.

Mainメソッドは,3つにパーツで構成されています.

インプット,処理,アウトプットの3つです.

Controllerクラスは,このMainメソッドの作業を担うことになります.

Controllerクラスの役割をまとめると,次のようになります.

  • 必要な情報をViewから受け取る.
  • 受けとった情報をModelに委ねて,その結果を受け取る.

 

参照の追加

現時点では,RandomNumberUIプロジェクト内のControllerクラスから,RandomNumberプロジェクトのクラスを呼び出す事ができません.

実は,先ほど追加したのは,RandomNumberプロジェクトそのものではなく,RandomNumberプロジェクトのリンクです.

なので,Controllerクラスから,追加されたプロジェクトを認識する事ができません.

その為,「参照の追加」という操作が必要になります.

ソリューションエクスプローラーで,RandomNumberUIプロジェクトを選択し,プロジェクトメニューから追加→参照の順に選択します.

表示された参照マネージャーダイアログボックスの左メニューから「プロジェクト」を選択し,RandomNumberプロジェクトにチェックを入れてOKをクリックします.

ソリューションエクスプローラーで,RandomNumberUIプロジェクトの参照に,RandomNumberプロジェクトが追加されていればOKです.

 

Controllerクラスの実装

早速,コーディングしたいと思いますが,その前に先ほど参照の追加をしたRandomNumberプロジェクトを,usingディレクティブで追加します.

 

もう1度,Mainメソッドのコードを確認してみましょう.

 

最初に,インプット部分を見ていきます.

count変数は文字数の情報,random変数はRandomクラスのインスタンスです.

Randomクラスのインスタンスは,Model(処理)に必要な情報であって,View(フォーム)とは関係ないので,Controllerクラス内で管理します.

フィールドでRandomクラスの変数を宣言し,Randomクラスのインスタンスをコンストラクタで生成できるようにします.他のクラスからの干渉を受けないように,Randomクラスの変数はprivateで宣言します.

 

次に,Viewから受け取る情報を格納する為に,プロパティを用意します.

count変数の情報を受け取る自動実装プロパティを宣言します.プロパティ名はNumOfStringにします.初期値は10とします.

 

最後に,処理の部分です.

今まで作成した情報を使ってランダムに数字列を作成し,その数字列を戻り値にするメソッドを作成します.メソッド名はMakeNumberです.

 

これでControllerクラスの実装は完了です.

 

Viewの設定

Viewの役割を確認します.

Viewは,Controllerに情報を伝える役割と,Controllerから情報を受け取る役割を持っています.

要するに,Controllerクラスのメソッドを呼び出す事です.

その為には,Controllerクラスが必要になります.

フィールドでControllerクラスの変数を宣言し,MainFormのコンストラクタでControllerクラスのインスタンスを生成して変数に代入します.

 

アップダウンコントロール(NumberController)の値をControllerクラスのNumOfStringプロパティに伝えます.

MainForm.cs [デザイン]タブに切り替え,画面右側下部のプロパティから,NumberControllerを選択し,イベントに切り替え,ValueChangedイベントにイベントハンドラーを記述します.

 

Valueプロパティのデータ型はdecimal型の為,int型にキャストする必要があります.

 

次に,ボタン(GeneratorButton)をクリックした時の処理を考えます.

プロパティでGeneratorButtonを選択し,プロパティからイベントに切り替えて,Clickイベントにイベントハンドラーを記述します.

 

コーディングはこれで終わりです!

では,早速実行してみましょう!

指定した文字数によって,数字列が生成されます.

また,ボタンを押すごとに生成されます.

 

最後に,文字数の最小値,最大値,初期値を決めましょう.

MainForm.cs [デザイン]にタブを切り替え,プロパティでNumberControllerを選択し,Maximumを20,Minimumを1,Valueを10に設定します.

再度実行して,確認してみると,

実行直後の文字数(初期値)は10になっている事が確認できます.

そして,指定範囲は1~20になっていると思います.

こうする事で,0を入力させたり,マイナスの値を入力できなくなるので,未然にエラーを防ぐ事ができます.

 

まとめ

MVCで開発するメリットは,オブジェクト指向編の最初に挙げたメリットになります.

可読性が上がり,拡張性もあり,更にミスが減るというのが特徴ですね.

慣れるまで大変だと思いますが,とても強力な開発手法です.

後にやるMVVMの話にも繋がってきます.

 

 

今回はここまで!

次回はWPFについてやろうかな.