BLOGS

ブログ

MVCモデルとは?概念やメリット、誕生の背景をわかりやすく解説

システム開発において、「MVCモデル」という言葉をよく耳にしませんか?

機能ごとにプログラムの処理を分けて、プログラムを整理しやすくする考え方で、開発において重要な設計モデルの1つですが、イマイチ理解できてないという方も多いのではないでしょうか?

今回はそんな「MVCモデル」について、その概要や役割から、MVCモデルが誕生した背景やメリットを分かりやすく解説していきます。開発検討している方や、システム開発を勉強中の方に読んでいただきたい内容になっています。ぜひ最後までご覧ください。

 

目次

1.MVCモデルとは?
2.誕生の背景と広まったきっかけ
3.それぞれの役割
4.MVCから派生したMVVMとは?
5.MVCモデルの流れ
6.MVCモデルを普段使っているサービスで考える
7.MVCモデルのメリット・デメリット
まとめ

 

MVCモデルとは?

MVCモデルはModel(モデル)・View(ビュー)・Controller(コントローラー)の頭文字をとった言葉で、システム設計モデルの一つです。作業をそれぞれの分野で分業することによって、保守性や業務効率を上げることが出来ます。システム開発以外でも、会社の構造や仕組みを示す場合にも用いられているため、普段システム開発に関わりのない方でも覚えていると役立つかもしれません。

 

誕生の背景と広まったきっかけ

MVCモデルの歴史は古く、1979年にパロアルト研究所にてトリグヴェレンスカウグ氏が考案しました。

当初は、プログラミング言語と総合環境開発である「Smalltalk(スモールトーク)」で、ウィンドウプログラム(コンピュータのデスクトップ上で複数のウィンドウを使って動作するアプリケーション)の設計に使われることを目的としていました。そして彼らは当時のソフトウェア開発において、ソフトウェア開発の複雑性と責務を分けて分離して管理する必要性に気づき、それぞれの役割を独立させるアーキテクチャを提案しました。これがMVCモデルの始まりです。

その後ソフトウェアのGUI(Graphical User Interface:ユーザーとコンピュータの間で対話するためのグラフィカルなインターフェースのこと)の仕様が複雑化し、GUIを持つソフトウェアやウェブシステム開発において、MVCモデルの有用性と多様性が注目されるようになりました。特にJavaServer Pages(JSP)がMVCモデルを採用したことが大きなきっかけとなり、MVCモデルは広く使われるようになりました。

 

それぞれの役割

MVCモデルのそれぞれの役割を解説します。

 

・Model(モデル) 

Modelはデータベースとやり取りをし、データの登録・更新・削除など適切に操作や処理を行いControllerに処理結果を提供する役割を担っています。 Controllerがクライアントからのリクエストを受け取り、Modelに対してデータの取得、保存、更新、削除を指示すると、Modelはデータベースから情報を取得し、必要に応じてデータを加工してControllerに返します。

 

・View(ビュー)

Viewはデータを受け取って、デザインやレイアウトを工夫して表示し、使いやすく操作性のある画面(=パソコンやスマホの画面)としてユーザーに提供する役割を担っています。 ControllerはModelから受け取ったデータを処理し、それをViewに送ります。しかし、そのままではWebブラウザなどに表示できないため、ViewはHTML、CSS、JavaScriptなどを使用して画面表示を行う役割を果たしています。

 

・Controller(コントローラー)

Controllerは、Viewからユーザーの入力(リクエスト)を受け取り、それに応じて、Modelに適切な処理を指示し、その結果をViewに伝える仲介的な役割を担っています。 Modelから受け取った情報をコントローラーが検知し、Modelに対してデータの取得やその他の操作を指示し、そのデータをViewに送り更新して、新しい情報を表示します。

 

MVCから派生したMVVMとは?

MVCモデルから派生した設計で、MVVM(Model-View-ViewModel)というものがあります。これはModelとViewに加え、Controllerの役割の一部機能をViewModelが担うというものです。

現代のアプリケーション開発においては、データバインディング(自動的にデータをUI要素に関連付ける仕組み)の登場や保守性の向上、コンポーネント指向への移行などの要因により、ユーザーアクションやデータの変更を直接Viewに反映させることが可能となりました。その結果、従来のControllerの機能は薄れつつあり、その代わりにViewとModelの間でデータやコマンドを仲介し、Viewのロジックを管理するViewModelが登場しました。

MVCと MVVMの違い以下の通りです。

 

・変更・修正があった場合の影響

MVCはそれぞれの機能が独立しているため、変更・修正が容易ですが、MVVMはMVCに比べると変更・修正が複雑です。

 

・データの同期

MVCは、Viewに反映させるためにContorollerの仲介が必須となり、コンポーネント間のやり取りが増えるため、動作が遅くなる可能性があります。一方で、MVVMはViewとView Modelのどちらかで値が書き変われば両方の値が変更されるというデータバインディングという特徴があるため、UI更新が容易で早いです。

 

・作業の進めやすさ

MVCは機能ごとに分かれているため、作業を効率的に行うことが出来ますが、MVVMはViewとModelが一緒になる分、分業がしにくく作業が遅くなる場合があります。

 

・テストの容易性や保守性

MVCでは、ControllerがModelとViewの仲介を行いますが、構造や保守性が低下します。一方MVMMではViewModelがその役割を担うため、ビジネスロジックとUIが別々になり、コードが整理され、テストや保守が容易になります。

 

MVCモデルの流れ

MVCモデルではユーザーからのリクエストを中心にしており、コントローラがリクエストを受け取って処理を開始します。以下がその流れです。

 

ユーザーからリクエストを受け取り、Controllerが処理する

Controllerがリクエストに応じ、どのようなデータの処理をするかModelに指示する

Modelは処理結果のデータ処理結果をControllerに返す

ControllerはModelから送られたデータを加工しViewに送る

VIewが画面表示し、ユーザーが見れる

 

MVCはそれぞれの役割が完全に独立しているので、コードが明確で管理しやすく、再利用や保守がしやすいのです。もしこのように役割分担をしない場合、コードが膨大な量になったり、どのコードがどの役割を果たしているのか分かりづらくなり、開発中も開発後も不便になってしまいます。

 

MVCモデルを普段使っているサービスで考える

ここまでで、Model(モデル)・View(ビュー)・Controller(コントローラー)がそれぞれどのような役割かは分かったかと思いますが、流れの部分は分かったようで分からないという方も多いと思います。ここではMVCモデルを「航空券予約サイト」で例えてみます。

 

【View】
ユーザーが航空券の検索画面にアクセスし、「出発地、目的地、日付」などの情報を入力し検索ボタンをクリックする。

▼ 

【Controller】
入力した情報がControllerに送られる。ControllerはModelにアクセスし、入力した航空券の条件に基づいた情報をデータベースから取得する。この時ユーザーの画面には「検索中」「ローディング中」などのメッセージが表示されている。

【Model】
条件が合う航空券の情報をControllerに返す。

【Controller】
ViewにModelから取得した航空券の情報をViewに渡す。

【View】
ユーザーは表示された航空券の中から希望するチケットを選択する。その情報が再びControllerに送信される。

【Controller】
Modelにアクセスし、選択されたチケットを予約する。

【Model】
予約されたチケットの情報をデータベールに保存する。

【View】
 ユーザーに予約が完了したことを確認するメッセージが表示される。

 

AD