こんにちは、GMOアドマーケティングのK.Mです。
興味があったのでSPA(Single Page Application)に入門してみました。
SPA とは
- 単一のページで構成されるWebアプリケーション
- 必要なときに必要な部分だけサーバー側と通信するので効率が良い
- したがってユーザー体験の向上が期待できる
- 開発面では、フロントエンドとバックエンドの役割分担がわかりやすい
Vue.js
SPAについて調べてみると、どうやらVue.jsなどのフレームワークの利用が前提的っぽいということがわかったので、まず先にVue.jsについて簡単に入門してみます。
Vue.jsについてはCDNから開発用のビルドを読み込む形で利用することで簡単に試してみることができます。
|
1 |
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
実際に例を見てみるとイメージしやすいかと思いますが、Vueインスタンスを作るscriptと表示用のHTMLがelで結び付けられるような形で構成されています。
Vueインスタンスはdata(データ)やmethods(メソッド)、computed(算出プロパティ)、watch(監視プロパティ)などのプロパティを取ることができます。
v-onなどのVue.jsがHTMLに対して行う指示はディレクティブと呼ばれ、v-if(boolean制御)、v-for(繰り返し)、v-model(フォーム連携)などの種類があります。
ざっくばらんに一通り試してみたところ非常に使いやすそうです。
表示をお手軽かつ柔軟に制御できてとても楽しい感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
window.onload = function() { new Vue({ el: "#app-sample", data: { now: "0000/00/00 00:00:00", isClicked: false, todos: [ { title: "あれやる" }, { title: "これやる" } ], message: "", items: [], price: 0, num: 0 }, methods: { getNow: function() { this.now = new Date().toLocaleString(); this.isClicked = true; } }, computed: { calc: function() { return parseInt(this.price) * parseInt(this.num); } } }); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div id="app-sample"> <h3>methods, v-text, v-on, v-bind の例</h3> <button v-on:click="getNow" v-bind:disabled="isClicked">現在時刻を取得</button> <p>現在時刻は: {{ now }}</p> <h3>v-for の例</h3> <ul> <li v-for="todo in todos">{{ todo.title }}</li> </ul> <h3>v-model の例</h3> <input v-model="message"> <p>入力された文字は: {{ message }}</p> <select v-model="items" multiple="multiple"> <option>ふー</option> <option>ばー</option> </select> <p>選択されたアイテムは: {{ items }}</p> <h3>computed の例</h3> <p>単価: <input v-model="price"></p> <p>数量: <input v-model="num"></p> <p>金額: {{ calc }}</p> </div> |
SPA
Vue.jsの基本的な雰囲気をつかめたところで、SPAの入門に取り掛かってみます。
ここからは少し実践的に、Vue CLIを使ってプロジェクトのベースを作り、Vue Routerを使ってルーティングにも対応してみます。
|
1 2 3 4 5 |
$ npm install -g @vue/cli $ vue create myapp $ cd myapp/ $ vue add @vue/router $ npm run serve |
セットアップがうまくいきWelcomeページが表示されれば成功です。
あとはページを追加したり処理を書いたり、肉付けしていくことで開発が進みます。
今回は簡単な計算をする新規ページ(/calc)を追加して、ナビゲーションメニューに追加することで、ページ切り替えを伴うSPAとして作ってみようと思います。
- src/router/index.js にてルーティングを追加
|
1 2 3 4 5 |
{ path: '/calc', name: 'Calc', component: () => import('../views/Calc.vue') } |
- src/views/Calc.vue にて対応するvueファイルを作成
- vueファイルは、template、style、scriptからなります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<template> <div class="Calc"> <h2>ここはCalcページです</h2> <p>単価: <input v-model="price"></p> <p>数量: <input v-model="num"></p> <p>金額: <span id="result">{{ calc }}</span></p> </div> </template> <style scoped> #result { color: red; } </style> <script> export default { name: 'Calc', data: function() { return { price: 0, num: 0 } }, computed: { calc: function() { return parseInt(this.price) * parseInt(this.num); } } } </script> |
- src/App.vue にて導線も追加
|
1 |
<router-link to="/calc">Calc</router-link> | |
無事にページ切り替えを伴うSPAを実現できました。
おわりに
簡単にではありましたが、SPAやその周辺について具体的なイメージを得ることができました。
楽しかったので機会を見つけて実践でも使えるようサーバーサイド連携やデータストアはじめキャッチアップしていきたいと思います。
