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

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

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

Vue.jsとは?

vuejs.jpeg

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

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」という設計パターンです。
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タグも連動して書き換えられます
  

サポートブラウザ

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

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

Vue.jsについて体系的に学ぶには?

Vue.js 公式ガイド

guide.jpeg
https://jp.vuejs.org/v2/guide/

Vue.jsの公式ガイドが日本語で提供されています。
基本的なプログラミングの知識さえあれば読み解くことができると思いますが、わかりにくい場合には次に紹介する動画コンテンツと一緒に学んでみるといいでしょう。

ドットインストール Vue.js入門

dotinstall.jpeg
http://dotinstall.com/lessons/basic_vuejs

たった3分の動画でプログラミングを学ぶことができるドットインストールでは、「Vue.js入門」が用意されています。
Vue.js入門に関する全14回のコンテンツはプレミアム会員向けになっていますが、第1回から第3回までは無料で観ることができます。
  

まとめ

2016年10月にはバージョンが2.0となり、便利な機能が実装続けられているVue.js。

2017年にはさらなるパフォーマンスの改善を目指すことが公式ブログでも触れられており、これからも期待できるJavaScriptフレームワークの一つです。

プログラミングが得意でない方でも、基本事項さえ押さえれば簡単な処理を行うことができます。
Vue.jsは導入となる考え方は聞き慣れないものが多いですが、そのハードルを乗り越えれば、あとは実装に挑戦するだけです。
ぜひ、チャレンジしてみてください。