Vue.jsアプリケーションの設計モデル 学習メモ

[MVC] 一般的なアプリケーションの設計モデル

一般的なアプリケーションでは、3つの構成要素で成り立っている。

RubyOnRailsMVCModel
Ruby on Rails MVCモデル

View

アプリケーションの画面を描画し、ユーザーの入力を受け付けるインターフェースを提供する

Controller

ユーザーの入力に応じたModelを呼び出して処理の実行を指示する

Model

データの更新や計算処理を行う


アプリケーションのプログラムをこのように分けて設計・実装する考え方を、3つの役割の頭文字をとってMVCモデルと呼ぶ。
役割ごとにプログラムを分けることによって分業が可能になり、開発後の保守や拡張がしやすくなる。

[MVVM] Vue.jsアプリケーションの設計モデル

Vue.jsアプリケーションは、MVCモデルから派生したMVVM(Model-View-ViewModel)モデル。

Vue.jsMVVMModel
Vue.js MVVMモデル

ViewModelの役割は、ビューから受け取った入力情報をModelに伝え、Modelから処理結果を受け取ってViewに伝えること。ViewとModelの仲介を行う点はMVCモデルのControllerと似ているが、Controllerは描画処理に介入しないのに対して、ViewModelはデータバインディングを通してModelとViewを自動的に結びつける点が大きな違い。


www.shuwasystem.co.jp

学習教材
Vue.jsのツボとコツがゼッタイにわかる本
発行日 2019年 3月28日 第1版第1刷
著者  中田 享
発行所 株式会社 秀和システム