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

更新日: 2018年05月29日

プログラミング

突然ですが、皆さんはJavaScriptのフレームワークを学習したことがありますか？

数あるJavaScriptのフレームワークの中でも、シンプルで学習障壁が低いと言われているのが「Vue.js」です。ご存知でしょうか。
まだ比較的若い気鋭のフレームワークではありますが、データのやりとりを中心に様々なことを実装することができます。JavaScriptを触ったことがあるけれども、まだフレームワークまでは触ったことがないという方にはぴったりのフレームワークです。

そこで今回は、簡単なJavaScriptの知識しかない方でもスムーズに基本を理解できるように、わかりやすくVue.jsの概要について解説していきます。
　　

Vue.jsとは？

JavaScriptのフレームワークとして有名なものに、「Node.js」や「AngularJS」、「jQuery」などがありますが、*「Vue.js」*とはどのようなものなのでしょうか。

Vue.jsは、MVVMと呼ばれる設計パターンを採用しているフレームワークです。
詳しくは後述しますが、すごく簡潔にいえば*「見た目であるUI部分とロジック部分をわけて設計している」*フレームワークになります。

このMVVMを採用しているフレームワークには、他に「Knockout.js」があります。Vue.jsはKnockout.jsよりわかりやすくシンプルな設計になっています。Knockout.jsは汎用性があり、複雑な処理を行うことができますが、Vue.jsはデータのやりとりに特化しているため、とてもシンプルに書くことができるのです。
　　

Vue.jsの特徴

それでは、Vue.jsの特徴について、もう少し深堀していきましょう。

1. 学習障壁が低い

Vue.jsは学習障壁が低く、基本的なJavaScriptの知識さえあれば学びやすくなっているのが特徴の一つです。
簡単なことをするだけであればシンプルなコードを書けばよくて、複雑なことをしたくなった場合にはAPIリファレンスやコーディングサンプルを参照することができるので、他のフレームワークほど習得に苦心することはないでしょう。

2. ディレクティブ

JavaScriptではHTML要素を操作する機能があり、これを「DOM操作」と呼びます。
DOMとはDocument Object Modelの略で、ツリー状の階層的な構造としてHTML要素を認識し、HTML要素を書き換えたり並び替えたりすることができます。
Vue.jsでは、こうしたDOM操作ができる特徴のことを*ディレクティブ(directive)*といいます。

先ほどVue.jsではデータのやりとりに特化していることに触れましたが、Vue.jsでは、ロジック部分とHTMLの表示を同期させたり、ロジック部分に格納した値に応じてHTML要素の表示や非表示を切り替えたりすることができます。

ディレクティブは機能ごとに様々なものが用意されているので、ディレクティブを扱うことに慣れてくれば、直接DOMを操作するコードを書くことが少なくなります。ディレクティブには*「v-」*から始まるプレフィックス(接頭辞)の属性をHTML要素に付加します。

3. コンポーネント思考

*「コンポーネント思考」*という言葉はプログラミング暦が浅いと聞き慣れない言葉かもしれませんが、簡潔にいえばUIの部品を組み合わせてアプリケーションを作るという考え方のことです。例えば、ログインフォームの部品は、一度作れば様々な場所に使いまわすことができます。
　　

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タグとテキストボックスが表示されます

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

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

サポートブラウザ

Vue.jsはAngularJSとは異なり、モダン・ブラウザ(Internet Exproler 9以降)のみをサポートし、レガシー・ブラウザ(IE9以前)は非サポートとなっています。

モダン・ブラウザのみをサポートしているのは、モダン・ブラウザに特化することで高速な動作を実現するためです。レガシー・ブラウザーに基準を合わせると、新機能として搭載されているたくさんの便利な機能を持つモダン・ブラウザのJavaScriptの機能を手放すことにつながり、パフォーマンス上の足枷になると考えられています。
　　