Webフロントエンド開発 🔰(WIP)
  • はじめに
  • 本編
    • おさらい
      • Webページが表示されるまで(と業務の境目)
      • Webページを構成する要素
    • 実例から作り方を学ぶ(基礎)
      • Button(ボタン)
      • Modal(モーダル)
      • Tab(タブ)
    • AJAX通信とUI更新
    • 入力フォーム(Form)の実装
      • FormタグのSubmit機能を使った送信
      • Formの各入力要素からJSでデータを取得したうえで、AJAXを使って送信
      • 高度なFormの実装(データバインディング)
    • アプリを作る(基礎)
      • Counter(カウンター) App
      • Todo(タスク管理) App
  • コラム
    • SSR vs SPA
    • MVVMとは
      • MVVMの実装例
    • SSR vs Ajax(+ PushState)
    • 開発者ツールの基本
    • Formatting
GitBook提供
このページ内
  • 単方向(One-way)バインディングについて
  • 双方向(Two-way)バインディングについて

役に立ちましたか?

  1. コラム

MVVMとは

前へSSR vs SPA次へMVVMの実装例

最終更新 5 年前

役に立ちましたか?

MVVMは モデルからビュー / ビューからモデル へのデータバインディング(UIへのデータの割り当て/束縛)の為に使われる設計手法です。データバインディング(Data Binding = 直訳だと束縛)というのは、データとUIを関連付ける仕組みです。MVVMを使わない実装(個別に都度input要素の値を書き換える手法)については、以下で説明していますので、まだの方は見てみてください。

MVVM自体は特定の言語・実行環境に関連づかない設計手法なので、GUIを実装する場合(デスクトップ・アプリケーション/モバイル/Web)であれば広く使える考え方です。今回はWebなのでWebで説明すると

  • モデル(データ) = JavaScriptのオブジェクト(もしくはクラスのインスタンス)

    • 例: オブジェクトの値( { name: "Taro Yamada" } )

  • ビュー(UI) = HTML

    • 例: input要素( <input type="text" name="name"> )

と読み替える事が出来ます。MVVMを細かく分けると モデルからビュー(M->V)への片方向だけのデータ反映を想定した 単方向(One-way binding)バインディング 、とモデルからビュー(M->V)、ビューからモデル(V->M)の双方向のデータ反映を 双方向(Two-way binding)バインディング の2つに分けることができます。それぞれこのようなライブラリ/フレームワーク(以降、FW)での採用事例があります。

  • 単方向(One-way)バインディング = React

  • 双方向(Two-way)バインディング = Angular / Vue.js

ライブラリ/FWごとに設計思想・やりたい事が違うので、採用している手法に差が出ているのですが、ここではそれぞれの実装方式について、説明していこうと思います。

単方向(One-way)バインディングについて

これは React で主に採用されている仕組みです。 にもちょっと記載があります。 モデルからビュー への反映のみを行います。逆のビューからモデルへの値の取得は自身で処理を書く(Reactの場合には setState() と呼ばれるものを使う)必要があります。

双方向(Two-way)バインディングについて

次の章では双方向(Two-way)バインディングを実装しつつ、より細かい内容を説明していきます。

基本的な仕組みとしては以前に書いた以下の Tab(タブ) - JS動的生成版 の実装例が近い内容なので、気になる方は改めて見てみてください。JSのモデルを元にHTMLを生成し、それをブラウザに反映する。という考え方です。この 反映 の部分を効率良く行う仕組み(差分適用の仕組み)を と呼びます。(Reactを起点としつつ色々なライブラリで内部的に採用されている仕組みです)

これは Vue.js(とAngular。元々はAngularJS(~v1系)の頃に出てきたもの) で採用されているものです。 にも記載があります。モデルからビュー、ビューからモデル の双方向での反映をやってくれるので、使う側は対応するinput要素に独自の v-model="model.name" といった構文を書くことで、 JSのmodel.name <-> input要素のvalue の間のデータの同期を行ってくれます。フォーム内の入力欄が多いサイト(例: ECサイトの個人情報の登録フォーム)ではこの双方向バインディングの方が前述の単方向バインディングと比べてシンプルに実装が出来ます。

VirtualDOM(仮想DOM)
Tab(タブ)
Vueのドキュメント
高度なFormの実装(データバインディング)
ドキュメント
単方向(One-way)バインディングのイメージ
双方向(Two-way)バインディングのイメージ