Zenn
🌟

MVCとMVVMの違い

2024/01/25に公開
Java
Vue.js
MVVM
MVC
tech

概要

結論、以下の通りである。

  • MVCは主にサーバーサイドのロジックが重要なアプリケーションに適している。（例：WordPress, Shopify）
  • MVVMはクライアントサイドでの動的インタラクションやリアルタイムのデータ更新が必要なアプリケーションに適している。（例：Google Analytics, Trello）

本記事では、上記理由について、解説していく。

フレームワークの説明

そもそも、MVCとMVVMを知らない読者がいるかと思うので、わかりやすく説明する。MVCとは、Model-View-Controllerの略で、MVVMとは、Model-View-ViewModelの略である。

MVC

Model, View, Controllerの説明をする。

  • Model: アプリケーション内のデータ処理、保存、管理といったビジネスロジックを担当する。こういったビジネスロジックの処理を行い、データの変更をViewに通知する役割である
  • View: Modelからのデータをユーザインターフェイスに出力する役割である
  • Controller: Viewとモデルの橋渡し役


引用：https://abridge-co.jp/wp/2022/02/21/『mvc』-と『mvvm』の違いについて/

簡単な名刺保管アプリを想定する。ユーザは、名刺リストをViewから確認できる。新しく名刺を追加したい場合は、名前、会社名、メールアドレスといったものをViewから入力して、それがController経由で、Modelで「名前、会社名、メールアドレスをDBに追加しますよ」という形で処理される。実際、こういったビジネスロジックは、Modelで作られている。

あるいは、アプリでログインユーザ名に「さん」づけする機能や、名刺の検索機能といったビジネスロジック機能もModelで作られている。

MVVM

Model, Viewについては、MVCと同じである。ViewModelだけ異なる。先ほどと同様、Modelはデータの管理や保存、外部との入出力や内部的な処理を担い、Viewは利用者に対する画面表示や入力・操作を担当する。そして、両者の間を仲介して、互いの状態変更を通知、反映させるのがViewModelである。

引用：https://abridge-co.jp/wp/2022/02/21/『mvc』-と『mvvm』の違いについて/

ViewModelではデータバインディングと言って、ViewとViewModelの間の双方向データバインディングを重視する。これにより、ViewModelの状態が変わると、Viewも自動的に更新され、その逆も然りである。こう言った双方向の自動更新はMVCでは一般的ではない。

各フレームワークに適したアプリケーション

MVC

下記理由により、MVCはサーバーサイドでのデータ処理が中心のアプリケーションに適している。

  • MVCはModel, View, COntrollerという明確に分けられたコンポーネントがある。それにより、データベース操作、ユーザーインターフェイス、アプリケーションのロジックとフローを効果的に分けられる。
  • リクエスト/レスポンスモデルに基づいて、クライアントからのリクエストを受け取り、それに基づいて特定のアクションを実行して、結果としてViewを生成することができるので、こう言ったパターンに自然に適合する。

具体的アプリケーション

  • ブログシステム
    • 記事の作成、編集、表示といった標準的なCRUD操作が中心のアプリケーションに適している。例えば、WordPressと言ったブログシステムは、サーバーサイドでのデータ処理が中心となる
  • Eコマースサイト
    • 商品の閲覧、カートへの追加、注文処理など、Eコマースサイトは多くのサーバーサイドの処理を伴う。MVCはこれらのプロセスを効率的に管理できる。
  • 教育プラットフォーム
    • 教材のアップロード、テストの管理、成績の追跡など、教育関連のプラットフォームは、サーバーサイドで複雑なデータ処理を行うことが多い。

MVVM

下記理由により、MVVMは「クライアントサイドでの動的インタラクションやリアルタイムデータの更新」が必要なアプリケーションに適している。

  • MVVMの最大の特徴は、ViewとViewModel間の双方向データバインディングである。そのため、ビューモデルのデータが更新されると、関連するUI要素が自動的に更新される。その結果、リアルタイムでのデータ変更が必要なアプリケーションにおいて、ユーザーインターフェースを常に最新の状態に保てる
  • ユーザーがUIを介してデータを変更した場合、その変更は自動的にビューモデルに反映される。そのため、フォームのデータ処理やユーザ入力の管理が大幅に簡素化される。
  • 上記について一例を挙げると、ユーザ新規登録時のメルアド入力が挙げられる。@を入力していなければ、「正しいメールアドレスではないですよ」と言った警告表示をフロントエンドだけで返せるようになる。わざわざ、そのロジックをModelに持つ必要がなくなる。

具体的なアプリケーション

  • リアルタイムデータを扱うダッシュボード（Google Analytics）
    • ユーザの行動やトラフィックのリアルタイムな分析を表示するようなダッシュボードは、データの変更が即座にビューに反映される必要がある。
  • インタラクティブなSPA
    • タスク管理やプロジェクト管理を行うTrelloのようなアプリでは、ユーザの操作に対して動的なレスポンスが求められる。

まとめ

サーバーサイドの処理が多いか、フロントエンド側の処理が多いかといった、アプリケーションの特性に応じて、MVCかMVVMかといったフレームワークを選定できると良い。

参考

https://abridge-co.jp/wp/2022/02/21/『mvc』-と『mvvm』の違いについて/
https://e-words.jp/w/MVVM.html

Discussion