プログラミング初心者にオススメ！シンプルで学習障壁が低いJavaScriptのフレームワーク「Vue.js」の特徴と学習方法

更新日: 2018年05月29日

プログラミング

MVVMとは？

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

「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タグとテキストボックスを表示しています。
ブラウザでは、このように見えるはずです。

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