😎
MVCとMVVMって？
はじめに
現在ポートフォリオ制作中のプログラミング学習歴３ヶ月の初学者です🔰
知り合いのエンジニアの方にMVCだけじゃなくて、MVVMなどについても知っておくといいよとアドバイスをいただいたので、調べてまとめてみました。
MVCもMVVMもWebサービスの設計思想であり、利用者の目に見えることはありませんが、
Webサービスをどのように作るのか、重要な部分です。
MVCとは
- MVCパターンは非常によく使われるアーキテクチャパターンで、主にサーバーサイド（Webサーバー上で実行されるプログラムのこと）で使用されます。
アーキテクチャとは
「アーキテクチャ」という用語は、一般的には建築物や建造物の設計やスタイルを指す言葉ですが、コンピューターサイエンスやソフトウェアエンジニアリングの文脈では、システムまたはソフトウェアの全体的な構造や設計を指す言葉として使われます。
- 設計手法の1つで、実装を「Model」「View」「Controller」の３つに分けて行うこと
- 3つの頭文字をとって『MVC』という
φ(･･ MVCを採用しているフレームワークの例
- Ruby on Rails (Ruby) : RailsはMVCの原則に従って設計されたフレームワーク
- Django (Python) : MVCに基づいていますが、自身の設計を「MTV」（Model, Template, View）と呼んでいます。(「Controller」がフレームワーク自体に組み込まれているため)
- Spring MVC (Java)
- Laravel (PHP)
- Express.js (JavaScript):
- 「Model」：データの処理を行い、データの変更をViewに通知する役割
- 「View」：ModelからのデータをUIへ出力する役割
- 「Controller」：ViewとModelの橋渡し、データをコントロールする役割
■メリット
- 機能毎に分割されているため，分業して作業を進めやすくなる(開発者の得意な所に集中できる)
- それぞれが独立しているので変更・修正があった場合にその影響を受けにくい
■デメリット
- 仲介役のControllerの負担が大きくなる
- FatViewControllerになりやすい
MVVMとは
- MVVMは主にクライアントサイド（ユーザーのブラウザ上で実行されるプログラムのこと）の開発、特にユーザーインターフェースの開発で使用されます。
- 設計手法の1つで、実装を「Model」「View」「ViewModel」の３つに分けて行うこと
- 3つの頭文字をとって『MVVM』という
（MVCとの違い）
ユーザーが入力した情報と、格納したデータをデータバインディングにて自動的に処理していく
データバインディングとは
ViewとView Modelを結び付ける仕組みのこと。
データバインディングの特徴は、ViewとView Modelどちらかで値が書き変われば、値が変化するたびにViewとView Model、両方の値が変更されるという点。
つまり、ユーザーが画面上で何らかの処理した場合でも、コンピューター上やサーバ上で何らかの処理があった場合でもViewとView Modelそれぞれに反映されるということです。
- 「Model」:データの加工、取得、保存などが役割
- 「View」：ViewModelの情報を使用してUIに表示、ViewModelにアクションを送信
- 「ViewModel」：ModelからのUIに描画するための情報を変換保持する役割👇
- （ModelとViewを紐付ける接着剤のような役割を果たし、ViewModelで変更されたデータは即座にViewに反映される）
φ(･･ MVVMを採用しているフレームワークの例
- Angular (JavaScript/TypeScript)
- Vue.js (JavaScript)
- Knockout.js (JavaScript)
- SwiftUI (Swift)
■メリット
- Viewに素早くデータを反映することができる
- データバインディング(MVVMはデータバインディングをサポートしているため、ビューとビューモデル間の同期を自動化することができ、手動でビューを更新する必要がなくなり、コードがシンプルになる)
■デメリット
- 動作の流れが見えづらくなる
- MVCと比べ、分業して作業を進めにくい
ユーザーの入力した情報をすぐに反映したり、サーバ側で自動的にデータを更新する頻度の多いサービスでは、MVVMの方が適している
参考にさせていただいた記事🌱
設計思想を理解して、それぞれの用途と開発環境によって、選択することが大事ですね！
MVPについても調べたかった＆もっと深掘りしたいところですが、簡単に今日はここまで😌
Discussion