MVCモデル

MVCとは

ソフトウェアの設計モデルの一つで、機能を「Model」「View」「Controller」の三つの役割に分離して実装し、それらが連携して処理を進める方式。

Model

システムの中でビジネスロジックを担当し、SQLなどのデータや、計算の途中結果など、Model内部でデータを保持する事で、モデルを一回ずつ再生成（リフレッシュ？）する必要がなく、管理を行いやすくする。

View

実際に表示したり、入力する機能の処理をを行い、HTMLなどの表示を動的に生成する。

Controller

ボタンが押されたなどのイベントや、modelの持っているデータをviewに渡すなど、ユーザーからの入力をmodelへと変換して伝え、modelの処理結果をviewに渡す要素でであり。
基本的にmodel内のデータを直接操作する事はしない。

ルーティング

リクエストURLと処理を紐付けを行うcontrollerの機能の一部で、ルーティングの中で1つのMVCモデルを持っている。

例

MVCモデルに沿って、電卓を作成する

用意するファイルとフォルダ構造

calculator.exe
setting.ini
bin
|-app
  |-controller
     |-controller.js
  |-model
     |-application.js
     |-cals.js
     |-data.js
  |-view
     |-index.html
     |-style
        |-style.cs
|-config

処理内容

⓪アプリを起動する

1. [controller]：

エントリーポイントからcontrollerが呼び出され、viewから電卓の画面を表示する

①電卓に[18782]と入力する

1. [controller]：
　数字ボタンが押された際のイベントが実行される

2. [model]：
　現在の操作状況によって処理を切り替える

3. [model]：
　インスタンスを生成し、値(1)を代入する

4. [model]：
　ディスプレイ表示用の変数に("1")を代入する

5. [model]：
　値をcontrollerに返す

6. [controller]：
　modelから受け取った値をviewに出力する処理を行う

7. [view]：
　ディスプレイに"1"を出力する

8. [controller]：
　数字ボタンが押された際のイベントが実行される

9. [model]：
　現在の操作状況によって処理を切り替える

10. [model]：
　インスタンスを生成し、値(8)を代入する

11. [model]：
　ディスプレイ表示用の変数に現在の値と文字列連結を行い、再代入する

12. [model]：
　値をcontrollerに返す

13. [controller]：
　modelから受け取った値をviewに出力する処理を行う

14. [view]：
　ディスプレイに"18"を出力する

……… 8~9を繰り返す ………

②[×]ボタンを押す

1. [controller]：
　[×]ボタンが押された際のイベントが実行される

2. [model]：
　現在の操作状況によって処理を切り替える

3.  [model]：
　入力された数字のインスタンスの値を文字列連結し、数値型に変換したうえで頂の役割を持つインスタンスに値を代入する

4.  [model]：
　現在のステータスを[×]ボタンが押された状態にする

5. [model]：
　入力されたボタンの値のインスタンスをリフレッシュする

6. [controller]：
　[×]ボタンが押されている事をviewに表示する処理を行う

7. [view]：
　ディスプレイに[×]ボタンが押されている様に表示する

③[2]ボタンを押す

1. [controller]：
　数字ボタンが押された際のイベントが実行される

2. [model]：
　現在の操作状況によって処理を切り替える

3. [model]：
　インスタンスを生成し、値(2)を代入する

4. [model]：
　ディスプレイ表示用の変数に("2")を代入する

5. [model]：
　値をcontrollerに返す

6. [controller]：
　modelから受け取った値をviewに出力する処理を行う

7. [view]：
　ディスプレイに"2"を出力する

④[=]ボタンを押す

1. [controller]：
　[×]ボタンが押された際のイベントが実行される

2. [model]：
　現在のステータス状況によって処理を切り替える

3.  [model]：
　入力された数字のインスタンスの値を文字列連結し、数値型に変換したうえで頂の役割を持つインスタンスに値を代入する

4.  [model]：
　直前の項2つを引数として、値を計算する適切なメソッド(×を計算する)を呼び出し、計算結果の役割を持つ変数に戻り値を代入する

5. [model]：
　値をcontrollerに返す

6.  [model]：
　現在のステータスを[=]ボタンが押された状態にする

7. [model]：
　入力されたボタンの値のインスタンスをリフレッシュする

8. [model]：
　値をcontrollerに返す

9. [controller]：
　modelから受け取った値をviewに出力する処理を行う

10. [view]：
　ディスプレイに"37564"を出力する

まとめ

MVCモデルをを採用する事で疎結合な設計になり、保守性の向上やテストがしやするくなる！

補足

Railsなどのフレームワークを利用したWEB開発では、ViewやControllerにif文などを記述する事があり、ORMの性質上Modelのみにビジネスロジックを終結させるのは難しい？