はじめに

私自身、MVCモデルを説明してみて？と聞かれた時に、
詰まってしまったので、知識の整理を目的に本記事を作成しました！

本記事の対象者

• プログラミングを学び始めた人
• MVCモデルを理解したい、または復習したい
• これからフレームワーク（Ruby on Rails, Laraval, Express、Vue.jsなど）を使用して開発をしていきたい

上記を対象とした方の力になれれば幸いです。

それではいきます！！！

概要

MVCとは機能でなく、数多くある中でのデザインパターンの一つである！
以下はWikipediaに書かれているデザインパターンの解説です。

ソフトウェア開発におけるデザインパターン（型紙（かたがみ）
または設計パターン、英: design pattern）とは、
過去のソフトウェア設計者が発見し編み出した設計ノウハウを蓄積し、
名前をつけ、再利用しやすいように特定の規約に従ってカタログ化したものである。

デザインパターンを噛み砕いて説明すると次のようなイメージとなります。

• 実装でよくあるパターンを定型化したもの

• 過去にプログラミングの達人たちが作った、
  コードをキレイにかくためのテンプレートのようなもの
  (将棋の定跡・囲碁の定石のようなもの)

• 実装コードが大きくなっても、パターン(テンプレート、定石)に
  当てはめて実装することで、管理しやすくなる

そして、「MVCは数多くあるデザインパターンのうちの1つ」という理解が大切です！

MVCの役割を理解する

「MVC」は「Model」「View」「Controller」の3つ頭文字をとったものです。

実装する機能によって「Model」「View」「Controller」の3つのカテゴリにわけて、実装コード(ファイル)をカテゴリ毎に管理するためのものです。

まずはこちらの画像でざっくりデータの流れを把握しましょう！

①〜⑧のデータの流れをざっくりいくと

• サーバーはクライアントからリクエストを受け取る
• リクエストに応じて「MVC」の各モジュールが連携してレスポンス値を生成する
• サーバーは生成したレスポンス値をクライアントに返す

Modelの役割

Modelはデータ管理の役割を持つモジュール(=パーツ)

• データベースとの（DB）とのやりとりを行う
• データの操作を行う（作成、取得、削除、更新）→　CRUD処理と呼ばれる
• データの加工を行う（Modelが保持しているデータを組み合わせ、求めているデータ形式に変換する）

Viewの役割

Viewは表示周りの責任を持つモジュール

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

そして、次に説明する「Controller」が利用するテンプレートファイルを指定して、生成されたHTMLコードをクラインアントに返すことで、Webブラウザ上でHTMLコードを元にWebページが表示されるようになるという流れです。

Controllerの役割

ControllerはModel、Viewの橋渡しの役割をもつモジュールです。

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

端的にいうならば、クライアント、Model、Viewの仲介役をになってくれていると思ってください！

まとめ

1. MVCは機能ではなく、デザインパターンの一つであり、コードをきれいに保ち、かつ保守性の高い状態で管理するために使用される
2. MVCは「Model」「View」「Controller」の頭文字をとったもので、実装する機能に応じてファイルを「Model」「View」「Controller」にわけることで作業を分担して開発を進めることができる
3. Modelはデータ管理の責任をもつモジュール
4. Viewは表示周りの責任をもつモジュール
5. Controllerは他のモジュール(Model, View)やクライアントとの仲介役の責任を持つモジュール