プログラミング初心者にオススメ！シンプルで学習障壁が低い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要素に付加します。