(cache)GASにVue.jsを導入する方法とその動作確認、そしてVue.jsの超基本を解説

function doGet() {
  var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
  htmlOutput
    .setTitle('GAS+Vue.js')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  return htmlOutput;
}

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>

new Vue({

el: '#app',

data: {

message: 'Hello Vue.js!'

}

});

</script>

1行目は前述のCDNですね。コピーしたものを、そのまま貼り付ければOKです。

そして、3行目からnewキーワードを使ってVueインスタンスを生成しています。

書式は以下の通りです。

new Vue(options)

この引数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>

<!DOCTYPE html>

<html>

<head>

<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>

</head>

<body>

</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は動作しましたでしょうか？

今回は最も簡単な例を紹介しましたが、もっと色々な機能があり、様々な連携や操作が可能です。

次回以降、少しずつ見ていきましょう。

まずは、methodsオプションですかね。

どうぞお楽しみに！

連載目次：GASユーザーのためのVue.js＆Webアプリ作成入門

Google Apps ScriptではHTML・CSSを使ってWebページを作成し公開することができます。このシリーズでは、その続きとしてはじめてクライアント側JavaScriptを動かすところからスタートし、人気急上昇中のフレームワークVue.jsを使ってWebアプリケーションを作成する方法をお伝えしていきます。

　　投稿者プロフィール

タカハシノリアキ株式会社プランノーツ　代表取締役

株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる！」をテーマに、VBA＆GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ
★ご依頼・ご相談はお気軽にどうぞ！→お問い合わせはコチラ
★フォロー頂ければ嬉しいです。

GASにVue.jsを導入する方法とその動作確認、そしてVue.jsの超基本を解説

Vue.jsの公式ドキュメント

CDNを使用してVue.jsを導入する

はじめてのVue.jsの準備