突然ですが、皆さんは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の部品を組み合わせてアプリケーションを作るという考え方のことです。例えば、ログインフォームの部品は、一度作れば様々な場所に使いまわすことができます。