IT

MVCモデルについてわかりやすく解説します！【初心者向け】

  /

こんにちは！ウマロです。

最近、WEBアプリケーションの仕組みについて勉強していまして、それ関係の書籍やサイトを漁っている初学者です！

今回はWebアプリケーション開発のひとつのモデルである「MVCモデル」について、備忘の意味を込めてわかりやすく解説したいと思います！

この記事を読めば以下のことが理解できます！

学習内容
  • MVCモデルの考え方が分かる
  • MVCモデルの考え方が必要になった経緯が分かる
  • MVCモデルの役割が分かる。
  • MVCモデルで開発するメリットが分かる
  • MVCモデルの実用例が分かる
  • ルーティングについて分かる

Webアプリケーション開発でよく耳にする「MVCモデル」ですが、イマイチしっくり理解できていないという方の参考になれば幸いです。

MVCモデルとは？

簡潔に書くと以下となります。

  • 機能ごとにプログラムの中身（処理）を分けて記述することで、プログラムを整理しやすくする考え方
  • 分け方としては、「モデル(Model)」「ビュー(View)」「コントローラ(Controller)」の3種類

もう少し具体的に書くと

MVCモデルでは、プログラムの中身を

・モデル(Model)：表示や入力に関連しない処理を担当
・ビュー(View)：表示や入力に関する処理を担当
・コントローラ(Controller)：ビューとモデルの橋渡し役を担当

に分類して作ると言えます。

では次に、「なぜこのような考え方が生まれたのか」「なぜプログラムを分けた方が良いのか」を一緒に考えていきましょう！

MVCモデルが登場した経緯とは？

プログラムというのは、同じ処理をする場合でも実に色々な書き方ができます。

全部の処理をまとめて書くこともできるし、処理ごとに関数を分けて整理しておくことも可能なんですよね。

しかし個人開発ならまだしも、大勢の人が好き勝手に自分ルールでプログラムを作っていたら、他の人が作ったプログラムの中身を見るのが大変ですよね。

そこで、プログラムの構成を分かりやすく管理できるように「MVCモデル」という考え方が登場しました。

下の図のようにプログラムを機能ごとにファイル分けすることで、どこにどの処理が記述されているのかわかりやすくしているわけですね。

「Model」「View」「Controller」の役割とは？

では次に「Model」「View」「Controller」のそれぞれの役割について解説します！

Model（モデル）

Model（モデル）はアプリケーションの中で、ビジネスロジックを担当する部分です。

ビジネスロジックとは、例えば申込フォームの内容をデータベースへ登録させる処理です。

ビジネスロジックという言葉の定義自体が曖昧なので、「処理した結果をデータベースへ反映させること」なんだくらいの理解でOKです。

主に以下の処理を担当します。

  1. データの検索
  2. データの変換
  3. データの検証
  4. データの関連

Controller（コントローラー）から受け取った処理に基づいて、必要なデータをDBで参照します。

そして、DBから取得したデータを一時的に預かりController（コントローラー）へ渡します。

しかし、ここで注意してもらいたのは、Modell（モデル）はDBそのものではありません。

あくまでもコントローラーから受け取った処理からDBのデータを取得してくるだけの役割です。

View（ビュー）

View（ビュー）は、ユーザーが「お問合せフォーム」など、実際に入力や設定を行う画面を表示します。

このような申込画面を表示したりする。

また、コントローラーから渡されたデータをHTMLなどで表示したりもします。

例えば、ログイン画面でユーザー名を入力してログインする場合、DBからログイン情報を探し出して、ユーザー名を画面に表示するといった具合です。

以下が主な役割です。

  1. リクエスト（ユーザーの入力）を取得する
  2. リクエストをコントローラーへ渡す
  3. コントローラーから受け取ったデータをHTMLなどで出力する

Controller（コントローラー）

Controller（コントローラー）は、View（ビュー）からのリクエストを受け取り、Model(モデル）へのメッセージに変換します。

そして、レスポンスとして処理後の画面をView（ビュー）に返します。

またユーザーの処理に基づいてモデルをコントロールする部分でもあります。

以下が主な役割です。

  1. ビューからリクエストを受け取る
  2. 受け取ったリクエストに基づいて該当するアクションを実行しモデルに伝える
  3. モデリングされたデータをモデルから受け取り、レスポンスとしてビューへ返す

MVCモデルの実用例を解説

ここではMVCモデルの実用例を現実世界の例で具体的に解説します！

飲食店働くアルバイトをイメージしてみてください。登場人物は3人です。

  1. ホール係⇒接客する人
  2. デシャップ係⇒ホールとキッチンの仲介をする人
  3. キッチン係⇒料理を作る人

それでは、お客さんが来店し、料理を注文し、料理が届くまでの一連の流れを追っていきましょう。

①ホール係は、レストランに来たお客さんから注文を聞きます。

②そして、その注文内容をデシャップ係に伝えます。

③デシャップ係は、注文を受け取ってキッチンに作るべき料理を知らせます。

ここまでの流れを整理すると、お客さんの「イチゴパフェ」という注文は、以下の流れでキッチン係まで伝わりました。

ホール係 ⇨ デシャップ係 ⇨ キッチン係

MVCモデルに当てはめると、以下のようになります。

View ⇨ Controller ⇨ Model

どうでしょう？イメージできますか？

そして、出来上がったイチゴパフェは今度は逆順でお客さんへ運ばれていきます。

この「イチゴパフェ」こそがDBから取り出した「データ」です。

データ

イチゴパフェを食べられて、お客さんはとても幸せですね。

「イチゴパフェ」という注文を受けとって3人の登場人物が「イチゴパフェ」をお客さんに提供しました。

MVCモデルで言い換えるなら、

ユーザーからのリクエストを受け取って、DBから該当のデータを取り出し、ユーザーの元へ送る。

「注文」＝「リクエスト」、「イチゴパフェ」＝「データ」に該当します。

これがMVCモデルに基づいた作り方の全てです。

そして、モデル、ビュー、コントローラはそれぞれが独立しているのが普通なので、分業もしやすくなる。（スーパーアルバイターなら1人３役も可能でしょうが・・・）



URLを受け渡すルーティングとは？

ルーティングとは、ブラウザから送られてきたURLで、MVCのどの部分のどの処理を行えば良いかを判断するものです。

例えば、誰かがあるホームページのトップページのURL「https://xxxx.co.jp」をブラウザに入力したとします。

するとルーティングを設定しておくことで、

「https://xxx.co.jpのURLが送られてきたから、トップページをブラウザに表示させるという処理を見つければよい」

とコンピュータが理解してくれます。

こうしてルーティングがURLをMVCへと受け渡してくれるというわけですね。

まとめ

  • MVCモデルとは、Model、View、Contorllerでプログラムの処理を分けて開発する考え方。
  • MVCモデルを採用することで、どの処理がどこに記述されているかが明確になる。
  • ルーティングの設定によって処理をModel、View、Controllerのどこに渡すかが決まる。

以上が今回の学習のまとめとなります！

MVCモデルについて理解できましたか？

MVCモデルは決して必要な知識ではありませんが、より効率的により明瞭にWeb開発を進めていくことができる大変便利なものなので、ぜひMVCモデル構成でWebアプリケーションを作ってみてください。

MVCモデルを利用したPHPのフレームワークである「Laravel」でのWebアプリケーション開発についての記事もあるので、興味のある方は参考にどうぞ！

AWS Cloud9でLaravelの開発環境構築してみたこんにちは！ウマロです。 プログラミング学習やWEBサービスを作るにあたり、何より大変なのは「ローカル開発環境を構築すること」です...

それでは、今回はここまで！！

ではでは～、♪( ´▽｀)

Web Webアプリケーション プログラミング
関連記事はこちら