MVCモデル

MVCモデル

皆さんが今後学習していくJavaのフレームワークSpringでWebアプリケーションを開発する場合、必ず使用するモジュールの1つがSpring MVCです。Spring MVCはMVCモデルを元にしています。Spring以外にも、Rubyのフレームワーク／「Ruby on Rails」、PHP／「Laravel」「Cake PHP」など…MVCを採用しているものは多く、今も主流な設計思想の1つです。

ここでは、MVCモデルについて知識をつけましょう。
これから説明することはシステム開発を行う上で基本的な概要ですので、しっかり覚えましょう！

MVCとは

MVC（Model View Controller / モデル・ビュー・コントローラ）は、ユーザーインタフェース（UI）をもつアプリケーションソフトウェアを実装するためのデザインパターン・設計思想（ソフトウェアアーキテクチャ）です。アプリケーションソフトウェアの内部データをユーザーが直接参照・編集する情報から分離することで、システムの保守性や生産性の向上、再利用性の向上といったメリットが得られます。

以下の3つの部分に分割されます。
Model　　：アプリケーションデータ、ビジネスルール、ロジック、関数
View　　　：グラフや図などの任意の情報表現
Controller：入力を受け取りmodelとviewへの命令に変換する

先ほども説明したように、MVCとは特定の機能を表しているわけではなく、
アプリケーション全体のコードをキレイに管理しソフトウェアの保守性・開発生産性を向上させるための考え方となります。
つまり、アプリケーション設計レベルの概念となります。

「Model」「View」「Controller」のそれぞれを更に解説します。

Model(モデル)

Modelはデータ管理の役割の責任を持つモジュール(=パーツ)となります。 具体的には次のようなことを行います。

• データベース(DB)とやり取りを行う
• データの操作を行う(取得・作成・更新・削除)
• データの加工を行う(Modelが保持しているデータを組み合わせて、求めているデータ形式に整形する)

上記のようなデータ管理をModelに集中させることで、他の「Controller」「View」からデータ管理の実装を取り除くことが出来ます。
「データ管理をModelに集中させること」というのは、別の言い方をすると、「データ管理以外のコードはModelには含めない」ということになります。
「Controller」「View」からデータ管理のコードをなくすことで、データ管理周りの挙動がおかしい場合は、「Model」の実装に何か問題があることがすぐにわかります。

View(ビュー)

Viewは画面表示周りの責任を持つモジュールとなります。 具体的には次のようなことを行います。

• テンプレートファイルと呼ばれるHTMLを生成するコードを実装する
• テンプレートファイルでは外から受け取ったデータを埋め込むことが出来る

「テンプレートファイル」という言葉は、ここでは「HTMLファイルではないが、HTMLのコードを返すことができるファイル」と認識していただけたらと思います。
次に説明する「Controller」が、利用するテンプレートファイルを指定し、生成されたHTMLコードをクラインアントに返すことで、Webブラウザ上でWebページが表示されるようになります。このとき、Controllerがテンプレートファイルを利用する際に、テンプレートファイルの決められた位置に外からデータをセットすることができます。

この「テンプレートファイル内にデータを埋め込むことが出来る」機能が、普通のHTMLと異なる部分で、Viewである「テンプレートファイル」の役割となります。

Controller(コントローラー)

Controllerは橋渡しの役割をもつモジュールとなります。具体的には次のようなことを行います。

• クライアントからのリクエストに応じた処理を実行する
• 必要に応じてModelからデータの受け渡しを行う
• Viewを生成する際に、必要に応じてModelから受け取ったデータをViewに渡す
• クライアントにレスポンスとしてViewや、API通信であればJSON形式のデータを返す

上記のように、クライアント、Model、Viewなどの仲介役として働きます。

MVCの流れ

MVCの流れを図で説明いたします。

上記の処理をざっくり説明すると、以下の3つのフローとなります。
①サーバーはクライアントからリクエストを受け取る（ユーザーの入力、ページの要求など）
②リクエストに応じて「MVC」の各モジュールが連携してレスポンス値を生成する
③サーバーは生成したレスポンス値をクライアントに返す

具体的な例としてWebサイトに会員登録する一例で示すと以下のようなイメージです。
①ユーザーが登録フォームに入力し、送信ボタンをクリックする
②ユーザーの入力情報を受け取り、Modelに情報の登録を指示する。（Controller）
→入力情報をDBに登録し、登録処理の結果をContorllerに返す（Model）
→Modelから登録処理の結果を受け取り、Viewに送る（Controller）
③登録完了画面を表示する（View）

MVCの特徴、他のパターン

MVCは最も古く、また広く知られ採用されている定番ですが、MVCの他にもパターンがあります。
まずMVCの特徴を見ていきましょう。

MVCの特徴

メリット

• 機能毎に分割されているため、分業して作業を進めやすく、開発者の負担が少ない
• それぞれが独立しているので、変更・修正があった場合にその影響を受けにくく、エラー時にも特定が比較的簡単

デメリット

• 仲介役のControllerの負担が大きくなり、FatViewControllerになりやすい
• 変更する際、影響があるファイルについて慎重に考える必要がある

MVVM

他のパターンとして、ここではMVCから派生したMVVM（Model View ViewModel / モデル・ビュー・ビューモデル）を紹介します！
採用されるフレームワークとしては、JavaScript／「Vue.js」、TypeScript／「Angular」、Swift／「SwiftUI」等で、モダンなフロントエンド開発との適合性が高いのが特徴。
今後の研修には直接関係しませんが、周辺知識としてざっくりと目を通していきましょう！

Model、ViewについてはMVCと大きく変わらず、主にViewModelの部分が異なっている。
ViewModelは、ModelとViewの間のデータバインディングとビジネスロジックの処理を担当する。ViewModelは表示のためにModel値をデータバインディング可能な形式へ変換して状態として保持し、Viewから受け取った入力を適切な形に変換してModelに伝達する。まとめると、MVCよりもViewはよりUI面のみに特化し、Modelが担当していたビジネスロジックをViewModelが担っているのが大きな違いである。
例えば、ユーザーがUIを介してデータを変更した場合、ViewModelに変更が反映されると同時にViewにも変更が反映され、その後Modelに伝達されDBに反映される。

メリット

• Viewに素早くデータを反映することができる
• 大規模で複雑なサービス、サーバ側で自動的にデータを更新する頻度の多いサービスに向いている
• UI関連のロジックをより適切に分離できるので保守性とテストの容易性が高い

デメリット

• 動作の流れが見えづらくなる
• MVCと比べ、分業して作業を進めにくい
• 適切なデータバインディングの実装するには学習コストがかかる

☆他のデザインパターンや周辺知識についてもっと知りたくなったら、ぜひ自分で調べてみてください！