MVVMとは?

Vue.jsを語る時に、外すことのできない考え方が「MVVM」という設計パターンです。
model.jpg

「MVVM」とは、「Model View ViewModel」(モデル・ビュー・ビューモデル)の略で、ソースコードを「Model」(ロジック部分)・「View」(見た目部分)・「ViewModel」(データのやりとりの橋渡し部分)にわけてプログラミングを行う考え方です。

なぜわけるのかというと、その方がコーディングの生産性が上がり、コードの保守・管理がしやすいからです。

例えば、大規模なWebアプリケーションを制作する場合、UI/UXデザイナーのような、ホームページの見た目を司るフロントエンドデベロッパーと、システムの処理のロジック部分を書くバックエンドデベロッパーに役割をわけることがあります。
ロジック担当者は送信ボタンをどのように装飾するかなどの見た目部分には関与する必要はなく、ブラウザから受け取ったデータをどう処理するかだけを考えます。
また、データのやりとりが上手くいかない場合に、ロジック部分に問題があると考え、ロジックのソースコードを分析・改良します。

もちろんJavaScriptなのでサーバーを通じたデータのやりとりは基本的には行いませんが、このように「ロジック」と「見た目」、「橋渡し部分」をわけることで生産性が上がるという考え方の元に、それぞれが分離しています。

MVVMをソースコードで理解しよう

それぞれの役割を確認するために、次のようなソースコードを見てみましょう。

[HTML]
<div id="app-input">
  <p> { { message } } </p>
  <input  v-model="message">
</div>

[JavaScript]
var appInput = new Vue({
  el: '#app-input',
  data: {
    message: 'Hello Vue!'
  }
})

このソースコードでは、「app-input」という部品(コンポーネント)を作成し、pタグテキストボックスを表示しています。
ブラウザでは、このように見えるはずです。

hellovue.png
▲ pタグテキストボックスが表示されます

binding.jpg

テキストボックスの中身はJavaScriptの中のappInputのmessageと連動しています。このmessageが書き換えられると、pタグの中身も連動して書き換わる仕組みとなっています。
上の図でいえば、①と③を②が繋げている、と考えるとシンプルに捉えることができます。

fr.png
テキストボックスの中身を書き換えると、pタグも連動して書き換えられます