みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。
初心者向けにGASとVue.jsによるWebアプリケーションの作り方についてお伝えしています。
前回の記事はコチラ。
Vue.jsについてその基礎知識と、GASユーザーがそれを学ぶメリットについてお伝えしました。
今回からいよいよ本格的にVue.jsとはなんぞやということについて解説していきます。
まずは、Vue.jsの公式ドキュメントを参考にしながらGASにVue.jsを導入する方法とその動作確認、そしてVue.jsの超基本を解説していきます。
では、行ってみましょう！
Vue.jsの公式ドキュメント
最初にVue.jsの公式ドキュメントを紹介します。
コチラです。
バッチリ日本語にも翻訳されていて、とても見やすいです。
Vue.jsは学習コストは低いと言われているとはいえ、とても奥は深く、多機能です。
そして、本来はWebエンジニアがメインターゲットとなるフレームワークですから、GASユーザーにとっては遠回りになる情報も多くあります。
なので、最初のうちは、このブログのシリーズなどを参考にしながら進めたほうが良いかも知れません。
何かそれ以上に知りたいことがあるときには、この公式ドキュメントが頼りになると思います。
CDNを使用してVue.jsを導入する
Vue.jsのインストールについてお伝えしていきます。
Webエンジニアの皆さんはnpmなどを使うのでしょうけど、GASの場合はCDNが便利です。
CDNとはContent Delivery Networkの略で
世界中に張り巡らされたCDN専用の配信ネットワーク（CDNプラットフォーム）を利用して、Webサイトにアクセスしようとするエンドユーザに最も近い配信拠点から効率的かつ高速にWebを配信する仕組みです。
引用: CDN（コンテンツ・デリバリ・ネットワーク）とは／What is CDN
つまり、何らかのコンテンツをネットワーク経由で、なるべく高速に取得するための手法ということですね。
まず、以下のリンクにアクセスしてください。
そして、以下の部分をコピーしましょう。
この一文を、GASプロジェクトの「js.html」の冒頭に記述しますので、だいじにとっておいてください。
はじめてのVue.jsの準備
では、Vue.jsの公式サイトで紹介されているJSFiddle Hello World exampleを用いて、はじめてのVue.jsの動作確認をしてみましょう。
まず、サーバー側のスクリプトmain.gsに以下doGet関数を仕込んでおきましょう。忘れがちですが、これがあることでURLアクセスを受けてWebページを展開できますからね。
function doGet() {
var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
htmlOutput
.setTitle('GAS+Vue.js')
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
return htmlOutput;
}
GASでVue.jsの導入とインスタンスの生成をする
では、js.htmlを見ていきましょう、以下の通りです。
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
1行目は前述のCDNですね。コピーしたものを、そのまま貼り付ければOKです。
そして、3行目からnewキーワードを使ってVueインスタンスを生成しています。
書式は以下の通りです。
この引数optionsはオブジェクト形式で様々なオプションを指定することができます。
Vue.jsのelオプションとdataオプションについて
おそらく、必ず指定するオプションは、以下の２つでしょう。
- el: Vueオブジェクトと連携するDOM要素
- data: DOMと連携するデータオブジェクト
例では、elオプションには「#app」を指定しています。これはid属性が「app」としている要素を生成したVueインスタンスの連携するDOM要素としてね、という意味です。
つまりid属性が「app」の要素が、Vue.jsの連携範囲となるわけです。
次にdataオプションですが、これはオブジェクト形式で、「プロパティ: 値」という形式でデータを列挙していきます。
すると、Vueインスタンスの連携するDOM要素の配下では、そのプロパティを介して、データの連携が可能になります。
このようにDOM要素とJavaScriptのデータオブジェクト（dataオプション）とを紐付ける仕組みを「データバインディング」といいます。
例では、messageというプロパティに「Hello Vue.js!」という文字列を設定しています。
では、そのデータバインディングしたデータをDOM要素から参照するにはどうしたら良いでしょうか？
DOM要素からdataオプションの値を参照する
それを明らかにするために、index.htmlを見てみましょう。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<div id="app">
{{ message }}
</div>
<?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
</body>
</html>
まず、8~10行目のdiv要素に注目しましょう。
生成したVueインスタンスの適用範囲を表すid要素「app」が付与されていますね。この配下では、Vueインスタンスと連携が可能ということになります。
その子要素であるpタグ内に二重波括弧、そしてその中に「message」とありますね。
この二重波括弧「{{ … }}」という表現は「Mustache構文」と言います。読み方は「マスタッシュ」です。
Mustacheは「口ひげ」という意味です。まぁ、そう見えなくもないですね。
この二重波括弧、Mustache構文の中にdataオプションで指定したオブジェクトのプロパティを指定すれば、その位置にそのプロパティの値を連携して参照することができます。
dataオプションのデータとの連携方法は、このMustache構文を使う方法以外にもありますので、おいおい紹介していきます。
はじめてのVue.jsの表示結果
では、以上の内容でWebページを表示してみましょう。
以下のように「Hello Vue.js!」という文字列が表示されるはずです。
これは
- id属性「app」と新規で生成されたVueインスタンスが連携されている
- Vueオブジェクトのdataオプションのmessageプロパティの値が、連携するDOM要素配下のMustache構文で参照されている
という動作によります。
まとめ
以上、GASにVue.jsを導入する方法とその動作確認、そしてVue.jsの超基本についてお伝えしました。
無事にVue.jsは動作しましたでしょうか？
今回は最も簡単な例を紹介しましたが、もっと色々な機能があり、様々な連携や操作が可能です。
次回以降、少しずつ見ていきましょう。
まずは、v-bindディレクティブによるデータバインディングですかね。
どうぞお楽しみに！
連載目次：GASユーザーのためのVue.js＆Webアプリ作成入門
Google Apps ScriptではHTML・CSSを使ってWebページを作成し公開することができます。このシリーズでは、その続きとしてはじめてクライアント側JavaScriptを動かすところからスタートし、人気急上昇中のフレームワークVue.jsを使ってWebアプリケーションを作成する方法をお伝えしていきます。- GASのWebアプリケーションでクライアント側JavaScriptを使うための基礎知識
- GASでクライアントJavaScriptを使用する超簡単なプログラム
- GASとJavaScriptフレームワークVue.jsを使ってWebアプリを作成するための最初の一歩
- GASにVue.jsを導入する方法とその動作確認、そしてVue.jsの超基本を解説
- 【GAS＆Vue.js】v-bindディレクティブを使って属性のデータバインディングをしてみよう
- GASとVue.jsによるWebアプリでv-forディレクティブを使って繰り返し要素を描画する方法
- GASのWebアプリでクライアント側JavaScriptからサーバー側の関数を呼び出す方法
- GAS＆Vue.jsでスプレッドシートのデータを使ってWebページを作成する方法
