ホームページ作成に今までどおり、Jquery等のJavascriptプラグインで開発してもいいですが、もっとスマホアプリのようなリアクティブなサイトを作ってみたいと思いませんか？

そんなとき簡単に導入できるVue.jsはオススメです！

Vue.jsとは？

Vue.jsはMVCのV（ビュー）をサポートするフレームワークで、リアクティブなユーザーインターフェイスを簡単に構築するためのJavascriptフレームワークです。

Vue.jsはシングルページでの導入も可能なため、既存のプロジェクトの導入するのにも最適です。

ある程度のコーディングやJavascriptの知識があれば、すぐにでも使用することが可能です。

Vue.jsの導入方法

導入方法はとても簡単で、既存のHTML or 新しく作ったHTMLに以下のJSを読み込むだけです。

<!-- 本番バージョン、サイズと速度のために最適化されています -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

or

<!-- 開発バージョン、便利なコンソールの警告が含まれています -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

上記の方法以外に、大規模アプリケーション開発向けに、npmを使用したインストール方法もあります。

ただ今回は簡単に導入ということで、npmの導入方法を省きます。

Vue.jsの使い方

ヘッダーにVue.jsを読み込んだら、以下のようにHTMLとJavascriptを書きます。

<div id="app">
{{ message }}
</div>

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})

これだけで、以下のような表示がされます。

Javascriptで定義した、elにはVue.jsを適用する範囲、エレメントを定義し、dataは変数を定義します。

そして、Html側の{{ *** }}で囲った変数をリアルタイムに書き換えます。

今回のサンプルだとリアルタイムだとは感じないと思いますので、HTMLを以下のようにしてみて下さい。

<div id="app">
{{ message }}
<input v-model="message">
</div>

すると、ソースからして分かるかと思いますが、入力フォームが表示されました。

その入力フォームを書き換えると、その横に表示されているテキストも同じように書き換わります。

これがVue.jsのリアクティブな機能になります。

ちなみにinputに追加したv-modelはフォーム入力バインディングで、入力イベントで定義された変数（データ）を更新するものです。

これを活用すればこんなものも簡単です。
HTMLを以下のようにします。

<div id="app">
<input v-model="formula" placeholder="式を入力して下さい">
= {{response}}
</div>

Javascriptを以下のようにします。

var app = new Vue({
el: '#app',
data: {
formula: ''
},
computed: {
response: function() {
return this.formula ? eval(this.formula) : '答えを出力します';
}
}
})

するとこれだけで、簡単に電卓が作成できました。

computedは算出プロパティで、定義した中の変数が変更された場合実行されます。

なので、たったこれだけのソースで簡易的な電卓が作成できました。

まとめ

Vue.jsは少しJavascriptをやったことある人ならすぐに導入できるかと思います。

入力フォームやユーザーが操作する部分でとても役に立ちますので、是非使ってみてくださいね！