今回は、Vue.jsでシングルページアプリケーションを作ってみます。
■シングルページアプリケーション（以下、SPA）とは
1つのHTMLを読み込み、UI操作に応じて動的に更新するWebアプリケーションのこと。
一見ページを切り替えているようにいますが、内部的にUIを差し替えて複数のページがあるのもSPAです。
SPAではページ遷移をクライアントサイドで行うため、ユーザには滑らかな操作感を与えます。
（SPA以外）
ボタンクリック ⇒ サーバへアクセス（ブラウザ内では一瞬真っ白になったり、操作ができなくなるす） ⇒ ページが開く
（SPA）
ボタンクリック ⇒ AJAXでサーバへアクセス（ブラウザ内では操作が可能、通信しているのに気が付かない） ⇒ ページが切り替わる
■Vue.jsでページ切り替えを行うには
Vue RouterというVueプラグインを使います。
Vue.jsのプラグインとして公式に提供されているSPA構築のためのルーティングライブラリ。
（Vue Routerのインストール）
インストールは、<script>タブで読み込めばOKです。
では、これまでと同様に https://jsfiddle.net/ で動かしてみましょう。
まずは、左ペインの「External Resources」に必要なJSを追加して下さい。
（追加するJS）
https://cdn.jsdelivr.net/vue/2.0.3/vue.min.js
https://cdn.jsdelivr.net/vue.router/2.0.1/vue-router.min.js
[htmlコード記述]部分に以下のコードを張り付けます。
======================================
<h3>タイトル！（※書き換わらない）</h3>
<div id="div_root">
<router-link to="/page1">トップページ</router-link>
<router-link to="/page2">ユーザー一覧ページ</router-link>
<router-view>コンテンツを表示（※書き換わる）</router-view>
</div>
======================================
[JavaScriptコード記述]部分に以下のコードを張り付けます。
======================================
var page1 = '<div>ページ１を表示</div>';
var page2 = '<div>ページ２を表示</div>';
var router = new VueRouter({
routes: [
{
path: '/page1',
component: {
<!-- ここにページ１のコンテンツを設定(変数page1を設定しています) -->
template: page1
}
},
{
path: '/page2',
component: {
<!-- ここにページ２のコンテンツを設定(変数page1を設定しています) -->
template: page2
}
}
]
});
// routerをマウント
var app = new Vue({
router: router
}).$mount('#div_root');
======================================
[処理結果を表示]部分に以下のような結果が表示されます。
======================================
（起動直後）
（ページ１リンクを押下）
（ページ２リンクを押下）
======================================
いかがだったでしょうか。
簡単にSPAが作れたのではないでしょうか？
今回で３回目となりますが、Vue.jsの双方向バインディングを試してみましょう。
まずは、動作検証用のサイトを開きます。
分からない場合は、前回の jsfiddle.net を使っている部分を参照して下さい。
■「双方向バインディング」とは？
簡単に説明すると、スクリプト側から値の設定とブラウザからの入力のどちらから行っても双方向で値を更新できる仕組みのこと。
ブラウザから入力 <==> 変数 a <==> JavaScriptから更新
変数 a の値を JavaScriptから 'ほげほげ' と変更すると画面にも 'ほげほげ' が表示され、
画面から値を入力すると 変数 a にも 'ほげほげ' が設定されます。
■何が便利なの？
Vue.jsの双方向バインディングを使用しない場合、
①画面で入力した内容の変更イベント（onChange）でイベントを受け取り、html上のDOM操作を使ってテキストボックスから値を取得し、
変数 a に値を設定する
②変数 a に値を設定したら、html上のDOM操作を使ってテキストボックスへ値を設定する
というような作りこみが必要となりますが、Vue.jsを使う場合、
<input v-model="変数名">
v-modelという属性を使うことで簡単に変数（モデル）と画面の紐づけが可能となります。
では、実際に例を書いてみます。
以下のコードを前回と同じようにjsfiddleへ張り付けていってください。
[htmlコード記述]部分に以下のコードを張り付けます。
======================================
<div id="disp-6">
<p>{{ message }}</p>
<input v-model="message">
<button v-on:click="clickButton">PUSH!!!</button>
</div>
======================================
[JavaScriptコード記述]部分に以下のコードを張り付けます。
======================================
var vue6 = new Vue({
el: '#disp-6',
data: {
message: '初期表示'
},
methods : {
// PUSH!!ボタンのイベント
clickButton: function() {
this.message = 'ボタン押下しました'
}
}
})
======================================
[処理結果を表示]部分に以下のような結果が表示されます。
変数messageの値がラベルに '初期表示'
また、テキストボックスにも '初期表示'
と表示されてます。
ここでテキストボックスの値を書き換えてみると
ラベルにもリアルタイムで書き換わります。※ラベルには変数messageをそのまま表示されています。
今度は、PUSH!!!を押下して、直接変数messageの値を書き換えてみると、
テキストボックスにもリアルタイムで書き換わります。
これで、双方向バインディングの動きが分かったと思います。
ところで、現在フォアフロンティアでは、求人募集 （2017/11/10～2017/12/07）を行っております。
・Java、PHP、Swift等を使って実際にプログラミングをしたいという方。
・独学をしているけど、実際に仕事で使ってみたいという方。
・古い技術ばかり使っていて将来に不安を感じている方。
は、ぜひ応募してみ下さい！
※未経験の方は、自社の研修システムと研修後も先輩社員がマンツーマンでサポートしますのでご安心下さい。