Webアプリケーションを開発する時に役立つツール・MVC

この記事ではMVCについて詳しく解説していきます。

  • MVCについて知りたい
  • MVCを使用するとどういうメリットデメリットが生じるのか
  • MVCはどんな役割別に分類しているのか知りたい
  • MVCとルーティングの関係性とは?
  • MVCを使いこなしたい

そういった疑問や期待を抱いている人に最適な記事です。

ぜひご一読ください。

MVCとは何か?基本情報

この項目では、MVCとは何なのかという基本知識を解説します。

MVCの成り立ちなども合わせて確認しましょう。


正式名称

MVCの正式名称は「Model View Controller(モデル・ビュー・コントーラー)」です。

Model」「View」「Controller」の頭文字を取ってMVCと略して呼ばれています。


デザインパターンの1つ

MVCはUI(ユーザーインターフェイス)と内部データとを分けるデザインパターンの1つです。

MVCパターンとも呼ばれます。


空白の30年

MVCは1979年、Trygve Reenskaug氏によって編み出されました。

しかし、初期プログラミング言語(PHPやPerlなど)はデザインパターンを意識していませんでした。

そのためあまり注目されることなく30年という月日が過ぎたのです。

しかし―2004年。MVCにとって転機となるフレームワークが誕生しました。

それが「Ruby on Rails」です。

Ruby言語上で動作するフレームワーク「Ruby on Rails」はMVCパターンの影響を強く受けており、それをキッカケにMVCが注目される機会が増えました。

その後、MVCパターンを盛り込んだ数多くのPHPフレームワークが誕生したことでMVCの名前は広く知れ渡ったのです。


デザインパターンとは

デザインパターンとは型紙とも呼ばれるもので、ソフトウェアを開発するにあたっての設計パターンのことです。

ソフトウェアの設計者たちが発見したノウハウを詰め込んだもののこといいます。

自分以外のソフトウェア設計者が使いやすいようにパターン化してカタログのようにわかりやすくまとめたものがデザインパターンです。

デザインパターンには様々なものがあり、それぞれ決まりごと(規約)が存在します(どんな規約があるかはデザインパターンによりけり)。

デザインパターンにはソフトウェア開発において色んな部分に関わってきます。


  • 生成
  • 構造
  • 振る舞い
  • マルチスレッドプログラミング など

上記の部分に関わるデザインパターンがたくさん存在し、それらを知識として学ぶことで開発をスムーズに進められます。

MVCはそんなデザインパターンの「アーキテクチャ(構造)に関わるデザインパターン」です。


考え方

MVCとはフレームワークなどと違ってWeb開発をラクにするツールではありません。

デザインパターンはフレームワークを実装する前準備に使うものです。

要は「設計の時に使う概念(コンセプト)」です。

MVCの概念は「機能によってプログラムの中を切り分けて記述する」というものになります。

それはどういう概念なのか…詳しいことは「設計におけるMVCの役割・機能」の各項目で説明します。


何故MVCは生まれたのか

プログラミングをしたことがある人であればわかるとおり、同一の処理をおこなう時でも人によってコードの記述方法は違ってきます

処理ごとに関数を分けて書いても、まとめて書いても、行き着く処理は同じです。

そういう背景もあり、自分のルールに則ってコーディングする人は多くいます

自分だけで開発を進めるならまだ良いかもしれません(後で見直すとわけがわからない事態に陥ることもあります)。

しかし、プロジェクトに参加しているメンバーが好き勝手にプログラミングをおこなうとプログラムの中身に統一性がなくなってしまいます

そうなると、コードの追加や修正が必要になった時、何がどうなっているのか解読するのに時間を要してしまう可能性が高いです。

そういう不都合な事態が起こることを未然に防ぐべく誕生したのが「MVC」というわけです。


どういうソフトウェアに適しているか

MVCという考え方は「ユーザーが画面操作をおこなうアプリケーション」を開発する時のコンセプトとして使うのが適しています。


ソフトウェアアーキテクチャという見解もある

MVCパターンを利用するときは他デザインパターン(ObserverパターンやCommandパターンなど)と一緒に使われることが多いです。

上記の理由からデザインパターンではなくもっと大きな単位である「ソフトウェアアーキテクチャ」というべきだという見解も示されています。

そういう意見もあると念頭に置いておきましょう。


設計におけるMVCの役割・機能

MVCは「Model」「View」「Controller」という役割・機能を分けて考えるという考え方のデザインパターンです。

ここからは、そんなMVCの掲げる「Model」「View」「Controller」を1つずつ詳しく解説していきます。


設計におけるMVCの役割・機能①Model(モデル)

この項目ではMVCの「Model」についてご紹介します。


データやロジック部分

Modelとは、ソフトウェア開発のデータやロジックを担う部分(ビジネスロジック)のことです。

システム本体がこの部分になります。根幹のとても大切な部分です。


具体例

ソフトウェアのデータ処理や操作は「Model」に分類されます。

データを関連づけたり検証したり。繊細な処理をおこなう役割を持っています。

データベースのテーブル(データベースではないので注意)やアプリケーションのオブジェクトなど。


設計におけるMVCの役割・機能②View(ビュー)

この項目では、MVCの1つつである「View」とはどんなものなのかについてお伝えします。


UI(ユーザーインターフェイス部分)

Viewとは、UI…ユーザーに見えるところのことです。

データを表示させたりする出力部分を担当しています。Modelの情報をユーザーが目に触れる部分で表現する役割を持っています。

ただ、Modelの内容全てを表示しなければならないという決まりはありません。

ModelによってはViewを2つ以上所有することも。


具体例

HTMLであることが多いView。

次項目で説明するControllerで定義したデータを、データベース経由で取得。

それをViewで記述することもできます。

他にはユーザー自身が入力できるフォームやコメント欄などの情報を記述し、Controller経由でデータベースに情報を送ることも可能です。


設計におけるMVCの役割・機能③Controller(コントローラー)

ここでは、MVCの「C」…Controllerについて見てみましょう。


ModelとViewの橋渡し

Controllerとは、ModelとViewの橋渡し的な役割を担う機能です。

中間に位置し、あくまで繋ぎとしての役割に徹しています。


具体例

データベースに送られてきたユーザー入力情報を取得してViewに渡したりできます。

ユーザーがWebアプリケーションのボタンをクリックしたり、ページを読み込んだり。そうした時にControllerはModelとViewを繋ぐために動きます。


設計におけるMVCの役割・機能④ルーティング

MVCの括りには入りませんが、MVCとルーティングは密接な関係があるため一緒に説明させて頂きます。


ルーティングとは何か

ルーティングは「ブラウザから送られてきたURLを、MVCのどの部分でどんな処理をするべきか判断する」役割を持つ部分のことです。


具体例

たとえばAサイトのURLをブラウザへ入力したとします。

ルーティングを設定しておけば「このURLはAサイトを開けということか」と判断しControllerで探し出そうとします。


MVCを使用するメリット

この項目では、MVCを使用することで得られるメリットについて紹介します。


誰が見てもわかりやすい

仕事として開発をおこなうなら、自分以外の誰が見てもわかりやすいコードを書くというのは大切なことです。

MVCで開発をおこなえば、誰が見てもわかりやすいコードを先方に提出することができます。


高い保守性を獲得できる

MVCは機能ごとに役割をわけています。

そのため、たとえばViewに何かしらの変更があったとしてもModelにはほとんど影響しないというように保守性を高めることが可能です。

MVCパターンで開発していないと異なる機能のコード同士が混ざります。

そのため、いざ1つの機能に変更が生じた時に大きな影響を受けてしまう可能性が高いでです。

MVCなら、UIデザインを変更するのであればViewに手を加えれば良いだけなので管理がラクです(Model・Controllerの仕様変更なしでOKの場合)。

後々のテストやコード改修などのことを考えると、MVCを取り入れるのは得策といえるでしょう。


効率性が高まる

役割・機能別にコードを分ければ、「これはどこに関連するコードなのか?」など一々迷うことなくコードの記述をすることが可能です。

保守性の向上もですが、開発の効率性も高めることができるのがMVCの良いところです。


役割分担しやすい

複数でWeb開発をおこなう際、MVCの考え方に沿って機能を分割することができます。

「ViewはAさん」「ModelはBさん」などというように専門メンバーに割り振りしやすくなるでしょう。


MVCのデメリット

MVCのデメリットにはどんなものがあるのか確認してみましょう。


機能ごとに分割する手間がかかる

MVCは機能ごとに分けてコードを記述します。

「この機能はModel」「これはController」「こっちはView」など切り分けながらコードを記述しなければなりません。

そのため、場合によっては時間がかかってしまう可能性もあります。


細かな設計をしているかが重要になる

MVCを導入したとしても、細かな設計ができていないとうまく役割分担ができずMVCのメリットを享受できない恐れがあります。

おおよその役割分担を決めるのではなく、まずはきっちりと詳細設定をおこないましょう。

そうすればMVCの持つ利点を最大限活かすことができます。


MVCの有効な使い方①ViewとControllerの流れを意識

ここからは、どうすればMVCを有効に活用できるかについてご紹介します。

1つめは「ViewとControllerの流れを意識する」ということです。

開発を進めていくにつれ、ViewとControllerの依存度は高まります。これは仕方ないことです。

しかし、度が過ぎるとMVCのコンセプトである「機能(責任)の独立性」を保てなくなってしまいます。

独立性が保てなければ、ModelとControllerのどちらかに変更が生じた時、どちらも変更しなければなりません。

そうなるとMVCパターンとはいえなくなってしまうでしょう。


MVCの有効な使い方②MVCフレームワーク

MVCを利用して作られたMVCフレームワークを使うことで、Web開発の効率をぐっとアップすることが可能です。

Ruby言語なら「Ruby on Rails」、PHP言語なら「Laravel」や「Cake PHP」。

JavaScript言語なら「Angular.js」などの有名なフレームワークがあります。


まとめ

MVCの基本それぞれの役割などを解説しましたが、理解を深めることはできたでしょうか。

MVCを使うことでWeb開発がやりやすくなります。Web開発の効率性を高めたい人にはもってこいのツールといえるでしょう。

MVCの仕組みを理解した上でWeb開発をおこなえば、アプリケーション全体のコードを整えることができます。

整えるだけでなく、誰から見ても「わかりやすい」と思ってもらえる最高のプログラムを作り上げることが可能です。

この記事で紹介したMVCの考え方―「Model」「View」「Controller」の3つでカテゴリを管理し、効率性を高めたWeb開発をおこなってみてください。

ただ煩雑にコードを記述しているのとは違い、明確なルールに則ったわかりやすいプログラムを作ることができるでしょう。

MVCを理解しておけば言語やフレームワークを変更した場合でも、混乱することなく開発を進められます。


toiroフリーランスは、SHIFTグループがプライムとして参画している独自案件をフリーランスエンジニア向けに紹介する唯一のプラットフォームサービスです。

エージェントによるサポートもありますので、ご利用を検討してみてはいかがでしょうか。