サーバレス構成のWebアプリ開発を担当し、そこでVue.jsを使ってみたので採用した経緯と、Vue.jsの何を使ったかを紹介する。
これまでのWebアプリ開発
JavaのWebアプリ開発ならThymeleafやFreemarkerなどのテンプレートエンジンを使用していた。
サーバレスだと、HTMLとJavaScriptで表示の処理を行うため、JavaScriptの処理が増える。
よく使われるのはjQueryによってDOMを操作し、HTMLを動的に変更する方法だろう。
jQueryのDOM操作は辛いよ
jQueryを使ったことがあればお分かりだと思うが、jQueryによるDOM操作は「このイベントで、このvalueがxxxなら、このDOMを変更する」という手続き型のコードになる。
JavaScriptの処理が増えると、この手続き型のコードが増えてデータと状態の管理が煩雑になる。
また、JavaScript側に表示の処理があるためHTMLを簡単に変更できない。
そこでVue.jsですよ
SPAっぽい要件なので、SPAに適したJavaScriptフレームワークを使う方がよさそう。
SPAがやりたいわけではないが。
Vue.jsは社内で検証の候補になっていたので採用してみた。
公式ガイドをさらっと読むと、HTMLに値を埋め込める、条件分岐、ループを組み込めるので、テンプレートエンジンと同じことができそう。
クライアントの開発は一任されていたので、試しやすかったのもある。
Vue.jsのはじめかた
お手軽にはじめるなら script タグに1行追加するだけ。
<!-- 開発バージョン(警告出力とデバッグモードあり) -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- 本番バージョン(警告出力なし、圧縮済み -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16"></script>
但し、webpackでビルドが必要な機能は使えない。例えば単一ファイルコンポーネント。
単一ファイルコンポーネントはHTMLを構成するヘッダ、ボディなどを部品ごとに分けて扱える。
便利ではあるが、Node.jsのツール(npm, webpack, vue-cli)が必要になる。
公式ガイドでは、最初は script から使用することをおすすめしている。
機能数も少ないので script から使用する。
Vueのアプリ開発
Vueインスタンスの作成
画面ごとにHTMLを分けたので、HTMLごとにルートVueインスタンスを生成。
Vueインスタンスで使用するオプションは el, data, methods, computed のみ。
var vm = new Vue({
el: '#app',
data: {
items: [
{
isbn: '4873118069',
title: 'サーバーレスシングルページアプリケーション',
publisher: 'オライリージャパン',
price: 2808
},
{
isbn: '4798155160',
title: 'AWSによるサーバーレスアーキテクチャ',
publisher: '翔泳社',
price: 3888
}
]
},
methods: {
// メソッド
},
computed: {
// 算出プロパティ
}
})
- el
- Vueインスタンスの対象となるHTML要素を指定する。
- data
- バインドする変数を格納する。変数の値が変更されるとHTMLに反映される。
- methods
-
v-onで呼び出す関数を記述する。 - computed
- 算出プロパティ。依存するものが更新されなければ以前計算された結果を返す。
HTMLにJavaScriptの値を埋め込む
Vueインスタンスの data の変数を {{変数}} のように2重の中括弧で囲むとHTMLに値が埋め込める。
変数を処理させて表示する場合は算出プロパティを使用する。
例えば、合計金額を算出して表示するには以下のように記述する。
var vm = new Vue({
el: '#app',
data: {
items: [
{
isbn: '4873118069',
title: 'サーバーレスシングルページアプリケーション',
publisher: 'オライリージャパン',
price: 2808
},
{
isbn: '4798155160',
title: 'AWSによるサーバーレスアーキテクチャ',
publisher: '翔泳社',
price: 3888
}
]
},
methods: {
// メソッド
},
computed: {
priceTotal: function() {
var total = 0;
for (var item in items) {
total += item.price;
}
return priceTotal;
}
}
})
合計金額：{{priceTotal}}
ディレクティブの使い方
Vue.jsはHTMLタグの中にディレクティブという特別な属性を埋め込むことでHTMLを制御する。
使用したディレクティブは以下の通り。
v-if
条件で表示を切り替えるのに使用する。
v-show も同じ用途で使用されますが、v-show はCSSの display: none で表示を隠すのと同じでDOMは消えない。
DOMの追加、削除がない分、描画は v-show の方が早い。
例えばログインユーザの権限で表示項目を変える場合はDOMに出したくないから v-if の方がよさそう。
プルダウンやラジオボタンで項目を切り替えるのであれば、v-show の方がよさそう。
v-for
data の配列データを1件ずつループで処理するのに使用する。
例えばAjaxでDBから取得したデータを一覧表示する場合に使用される。
一覧を10件ずつ表示する場合は算出プロパティを使用するとよさそう。
var vm = new Vue({
el: '#app',
data: {
items: [], // AjaxでDBから取得
pagination: {
page: 0,
pageSize: 10,
},
startPage: 0,
pageSize: 10,
},
methods: {
// メソッド
},
computed: {
pageItems: function () {
var startPage = this.pagination.page * this.pagination.pageSize;
return this.items.slice(startPage, startPage + this.pagination.pageSize);
},
}
})
<table>
<thead>
<tr>
<th>ISBN</th>
<th>タイトル</th>
<th>出版社</th>
<th>値段</th>
</tr>
</thead>
<tbody>
<tr v-for="item in pageItems">
<td>{{item.isbn}}</td>
<td>{{item.title}}</td>
<td>{{item.publisher}}</td>
<td>{{item.price}}</td>
</tr>
</tbody>
</table>
v-bind
タグの属性に値を埋め込むのに使用する。
例えば class の属性を動的に切り替えるには <div v-bind:class="disabled: isDisabled"></div>のように記述すると data の isDisabled がtrueの場合に disabled が埋め込まれる。
v-bind:class は :class のように省略して記述することもできる。
また、v-for と組み合わせて動的にセレクトボックスを作ることができる。
<select>
<option v-for="item in items" :value="item.isbn">{{item.title}}</option>
</select>
v-on
イベントで methods に記述した関数を呼び出すのに使用する。
例えばボタンクリック時のイベントは v-on:click="ファンクション名" のように記述する。
また、@click="ファンクション名" のように省略して記述することもできる。
v-model
input, select, textarea の値を data の変数にバインドするのに使用する。
v-cloak
v-cloak を使うことで、値が埋め込まれるまで {{変数}} がそのまま表示されるのを防ぐことができる。
CSSで display: none を適用しておきます。
[v-cloak] {
display: none;
}
まとめ
サーバレス構成だとJavaScriptフレームワークは必須かなと思う。
ReactやAngularは分からないが、Vue.jsは使いやすい。
何よりDOM操作から開放されることがよい。