さて、今更jqueryなんか使いたくないけど、GASでフレームワークガッツリも辛いなぁと思っていたところ、そういやこの頃実装させられてるVue.jsはCDNで行けるなぁと思いだし、GASでVue.jsを使ってみたいと思います。
vue.jsってなんだよって説明から一応していきます。興味ないよって人もいるかもしれませんが、昨今のフロントエンド開発のトレンドのSPA（シングルページアプリケーション）を少しだけ感じることができますし、Vueによるコンポーネントと言う概念でのコンテンツ管理がいかに楽かが少し見えてくるかもしれません（見えてこないかもしれませんw）
Vue.js って何？
Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。
https://jp.vuejs.org/v2/guide/index.html
プログレッシブフレームワーク？？って声が聞こえてきそうですw
まぁシンプルにはフレームワークで、プログレッシブ（連続的・進歩的みたいな）と言うことで、順々に組み上げることが可能なフレームワークということです。
メジャーなところだとPHPの人気フレームワークのLaravelでも利用されています。自分はこっちで利用するケースが多いですかね。
GASでVue.jsを使ってみる
では、実際にGASでVue.jsを触っていきましょう。Vue.jsの簡単な描画をまずはみていきましょう。
htmlファイルの内容
まずは何より、一式のhtmlファイルをみていきます。簡単なvue.jsを使ったスクリプトが出来上がっています。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- vue.jsをロード -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Google CSS Addon -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<div id="app">
<button v-on:click="display_name" class="create">名前を表示</button>
<p> {{ name }} </p>
</div>
<script>
var vm1 = new Vue({
el: "#app",
data: {
name: "what's your name?"
},
methods: {
display_name: function () {
//GAS内のコード読み出し
vm1.name = "kazuya admin";
}
}
})
</script>
</body>
</html>
まぁこれだけみてもよくわからん、って話になると思うので、少しだけ解説込みの画像を貼ってみます。
vue.jsの呼び出し via CDN
まずは、vue.jsを呼び出しするためにCDNを利用して、vue.jsの利用を宣言しなければなりません。該当部分のコードが以下です。
<!-- vue.jsをロード -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>①Vue vmインスタンスの生成とhtmlのidとの紐付け
まずは、Vueインスタンスを生成してhtmlのidと紐付ける必要があります。
vueインスタンスの組成は正直普通のjsのイニシャライザの書き方と同じです。
var vm1 = new Vue({ .... })Vueインスタンスの中で、el要素で指定することで、htmlの要素をマウント（まぁざっくり言えば、要素の上書きみたいな感じ）することができます。
var vm1 = new Vue({
el: "#app" ←ここで、idを指定してマウントしている
})②data要素の説明と連携方法
さて、作成したVueインスタンスのなかで、dataプロパティにnameで特定の値を与えます。そうすると、vueインスタンスが評価されたタイミングで、html本体に設定された<p> {{ name }} </p>の部分の、{{ name }}に値が渡されます。
結果として、最初に描画されたタイミングでは、<p> {{ name }} </p>の部分が、developer tool等で確認してもらうと以下のようになっているはずです。
<p> what's your name? </p>なんとなく連携のされ方とdataプロパティの値渡しのイメージがつきましたでしょうか？
③on-clickでの要素変更
html側に以下のようにbuttonを設定してあります。
<button v-on:click="display_name" class="create">名前を表示</button>今回のv-on:clickの部分が、vueで指定してるディレクティブになります。要は、v-onで指定した動作が行われた場合に、探索されて、vue componetに規定されたメソッドを呼び出す感じです。
実際呼び出される側の関数としては、以下をVueインスタンスにメソッドとして設定してあります。連携させる要素としては、v-on:clickの要素名として渡す、”display_name”と言うのが、Vueインスタンス側で呼び出されるメソッド名です。
みてもらえればわかると思いますが、Vueインスタンス側ではmethodsプロパティの中に、それぞれ呼び出されるメソッド名と関数を定義しています。今回の場合でいうと、メソッド名がdisplay_name、関数の内容としては、vm1.name = “kazuya admin”;と言うことで、display_nameが呼び出されると、vm1インスタンスのnameプロパティ（データプロパティ内のname要素）が”kazuya admin”に置き換えられると言うことです。
var vm1 = new Vue({
el: "#app",
data: {
name: "what's your name?"
},
methods: {
display_name: function () {
//GAS内のコード読み出し
vm1.name = "kazuya admin";
}
}
}).gsファイルの内容
他方で、.gsファイルは非常にシンプルです。doGetで公開したアプリケーションがクリックされた場合に、テンプレートを作成して評価します。
function doGet() {
return HtmlService.createTemplateFromFile("test1").evaluate()
}作成した後は、【公開】→【ウェブアプリケーションとして導入…】を選択して公開してください。
実行結果
こんな感じで実行されます。
まとめ
本当はもっとVueっぽいコンポーネントの扱い方や、状態管理の方法なども紹介していきたいのですが、記事化するスピードとGASでvue.jsがどこまで本当に動くのか自分が試し切っていないので、とりあえず今回は基礎の基礎の基礎のシンプルな部分は動くことが確認できたので、記事にしました。
さて、次は時間があるときに、もう少しちゃんとした動きの検証をして記事化していきたいと思います。
参考）Vue.js参考書籍やサイト
まずは何をおいても公式ドキュメントが便利です。日本語化されてます。日本でVueが人気があることの証明の一つかなと思います。
参考書籍としては２つピックアップしておきます。両方ともVue初学者用の入門書籍です。
1. これからはじめるVue.js実践入門
javascript本格入門などの書籍を書かれている方のvueの入門書です。
2. Vue.js入門 基礎から実践アプリケーション開発まで
現在三版まで行っているようですが、私も初版を購入させていただき、vueの初期学習で利用しました。
