ソフトウェアアーキテクチャー...？MVCやMVVMってなに！？

制作
2019-12-27
更新日: 2024-4-11
ogasawara masami

Webサービスを設計・開発する上では、MVCやMVVMなどの設計思想（ソフトウェアアーキテクチャー）を理解しておく必要があります。
サービスを利用するユーザー側ではさほど大きな差はありませんが、開発者側は、サービス改善でコードを変更する際の労力が大きく変わってきます。
この記事では、そもそもWebブラウザがどうやってWebページを表示しているのか、MVCとMVVMの設計思想の違い、MVVMを採用すべきシーンについて解説します。

>>サイトリニューアルをご検討されている方へ｜RFPサンプルを無料配布中

1 WebブラウザがWebページを表示する仕組み
2 MVCとMVVMについて
- 2.1 MVCの構造は？
- 2.2 MVVMはMVCと何が違うのか
3 MVVMを採用できるJavaScriptのフレームワーク
- 3.1 MVVMを使ったToDoリストを作成する
4 MVVMを採用する
- 4.1 MVVMが有効なシーン
- 4.2 MVVMとSPA（シングルページアプリケーション）
5 まとめ

WebブラウザがWebページを表示する仕組み

SafariやGoogle ChromeなどのWebブラウザは、どうやってWebページを表示しているのでしょうか。
WebブラウザにURLを入力すると、対象のデータやサービスを管理しているWebサーバーに対して「このURLを閲覧したい」とリクエスト（要求）を送信します。
そして、リクエストを受け取ったWebサーバーは、そのリクエストを解析・処理して、リクエストに対するレスポンス（回答）を作成します。
ここで生成されるのがHTTPステータスコードです。

HTTPステータスコードについてはこちらをご覧ください。

これで丸わかり！HTTPステータスコード！

最後にWebブラウザがWebサーバーからのリクエストを反映します。
そうして、私たちは、Webページを見ることができます。
ではこの仕組みがわかったところで、MVCとMVVMとはなにかをみていきましょう。

MVCとMVVMについて

MVCもMVVMもWebサービスの設計思想であって、サービスを利用するユーザーに見えることはありません。
しかし、建築で目には見えないがどのように建物を建てるかが重要なように、Webサービスもどのように作るのかが重要です。
まずはMVCから見ていきましょう。

MVCの構造は？

サービスの内部データをユーザーが参照・編集する情報から分離して管理するものになります。
そのために、プログラムを「Model」「View」「Controller」の３つに分割します。
では、それぞれを見ていきましょう。

M(Model)ってなに？

Modelはそのアプリケーションが扱うデータの処理を行い、データの変更をViewに通知する役割を担っています。

V(View)について

ViewはModelが扱っているデータを取り出して、WebブラウザなどのUIへの出力を行います。

C(Controller)とは

Controllerはユーザーから入力されたものをModelに伝えるものです。
基本的には、Model内のデータを操作したりすることはありません。

これらを図にすると、下のようになります。

実際、どのように動くかというと、以下のようになります。

ユーザーからのリクエストがControllerに送られる
Controllerがリクエストを受け取り、Modelに処理を実行するよう指示
Modelが処理を実行
Controllerを介してModelが処理した結果をViewに反映

このようにModelとViewを分けることで作業の分担ができる反面、仲介役のControllerの負担が大きくなるという欠点があります。
では次に、MVVMを見ていきましょう。

MVVMはMVCと何が違うのか

MVVMはどのような設計思想なのかというと、ユーザーが入力した情報と、格納したデータをデータバインディングにて自動的に処理していくものになります。
データバインディングはMVVMモデル特有の仕組みになっています。
データバインディングを説明する前に、MVVMモデルについて解説していきます。

M(Model)について

Modelに関してはMVCモデルの場合と役割は同じです。
Modelはそのアプリケーションが扱うデータの処理を行い、データの変更をViewに通知するという役割を担っています。

V(View)とは

ViewもMVCモデルと同様に、Modelが扱っているデータを取り出して、WebブラウザなどのUIへの出力を行います。

VM(View Model)ってなに？

ModelとViewを紐付ける接着剤のような役割を果たします。
ViewModelで変更されたデータは即座にViewに反映されます。
これらを図にすると、下のようになります。

実際、どのように動くかというと、以下のようになります。

ユーザーからのリクエストに基づいてView Modelにリクエストが送られる
View Modelにリクエストが反映され、Modelに処理を実行するよう指示
View Modelの値が変化したので、自動的にViewの値も同様に変化

MVVMはViewに素早くデータを反映することができるのです。
ではここで先ほど登場した、データバインディングとはなにかを見ていきましょう。

データバインディングとは

データバインディングとは、ViewとView Modelを結び付ける仕組みのことです。
データの値を結び付けるので、データバインディングと呼ばれているのです。
データバインディングの特徴は、ViewとView Modelどちらかで値が書き変われば、値が変化するたびにViewとView Model、両方の値が変更されるという点です。
これはつまり、ユーザーが画面上で何らかの処理した場合でも、コンピューター上やサーバ上で何らかの処理があった場合でもViewとView Modelそれぞれに反映されるということです。

MVVMとWPFについて

もともと、MVVMはWindows Presentation Foundationなどで生まれた考え方です。
そして現在はAndroidのプラットフォームや、Webブラウザ上でのJavaScriptのフレームワークで採用されています。
ではどんなフレームワークで採用されているのでしょうか。

>>サイトリニューアルをご検討されている方へ｜RFPサンプルを無料配布中

MVVMを採用できるJavaScriptのフレームワーク

MVVMを採用できるJavaScriptのフレームワークで代表的なものは、AngularやVue.jsです。
では、ここで、Vue.jsを利用したMVVMモデルの例を見てみましょう。
今回はToDoリストを例にします。
詳しいVue.jsの使い方は、こちらをご覧ください。

Vue.jsとは？jQueryとの違いや使用のメリットを紹介

MVVMを使ったToDoリストを作成する

今回はコードを簡単に共有できるjsFiddleを使って説明します。

jsFiddleの使い方はこちらをご覧ください。

簡単にコードを実装してシェアできる！超便利なjsFiddleの使い方

下記のようにVue.jsを使えば、ユーザーが入力したものを即座に反映することができます。
これによってアプリケーションの利便性向上が期待できます。

MVVMを採用する

MVVMはデータバインディングを行うことが前提であるため、それに対応していないフレームワークでは、そもそもMVVMを採用することができません。
しかし、データバインディングに対応したMVVMはControllerがModelを監視するMVCに比べて、ユーザーが入力したものを素早くデータを書き換えるられるというメリットがあります。
では、どんなシーンが有効でしょうか。

MVVMが有効なシーン

MVVMが有効なシーンは、データバインディングを活かすことができるものになります。
データバインディングを行うMVVMは、Viewで変更があっても、Modelで変更があっても、お互いに更新を反映する機能を持っています。
そこで、ユーザーの入力した情報をすぐに反映したり、サーバ側で自動的にデータを更新する頻度の多いサービスでは、MVVMの方が適しているでしょう。
例としては、上記でご紹介したToDoリストや、ユーザーの入力した内容を適宜グラフに反映していくようなサービスなどが挙げられるでしょう。