はじめに

GASのHtmlServiceを使ってSPAライクなWEBアプリケーションを書くことになったのでその時のメモです。
こちらの記事の続きとなります。

今回のアウトライン

CSSファイルとJavascriptファイルを作成する。
index.htmlからCSSとJavascriptファイルを読み込む。
終わりに

それではさっそく書いてみるよ。

1. CSSファイルとJavascriptファイルを作成する。

前回の記事で作成したGASプロジェクトに以下のファイルを作成していきます。
プロジェクト内には.gsファイルか.htmlファイルのどちらかしか作成できないので、どちらも.htmlファイルとして作成します。

css.html

<style>
  p {
    color: #4aac00;
  }
</style>

js.html

<script>
  var vm = new Vue({
    el: "#vm",
    data: {
      message: "Hello GAS and Vue!"
    }
  })
</script>

どちらもHTMLファイルとして扱うので<style>や<script>タグ内に実際のコードを書いていくのがミソです。
ここまでで現在のプロジェクトには、

server.gs
index.html
css.html
js.html

の４つのファイルが作成されました。

2. `index.html`からCSSとJavascriptファイルを読み込む。

上の手順で作成したcss.htmlとjs.htmlをindex.htmlから呼び出すために前回作成した２つのファイルも修正していきます。

index.html

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <meta charset="utf-8">
  <?!= include('css'); ?>
  <!-- vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="vm">
    <p>{{ message }}</p>
  </div>
  <?!= include('js'); ?>
</body>
</html>

見慣れないタグが出てきました！
<?!= include('css') ?>
公式のドキュメントによるとRubyのERB、Pythonのjinja2的なテンプレート構文のGAS版といったところでしょうか。
とにかくサーバサイドで定義した関数をこのタグ内では呼び出すことができます。

さて、これで次にすべきが見えてきました。
server.gs内にcss.htmlやjs.htmlの内容を返す関数include(filename)を早速書いていきましょう。

server.gs

function doGet(request) {
  var template = 'index';
  return HtmlService.createTemplateFromFile(template).evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

これでCSSやJavaScriptファイルをindex.htmlから読み込む仕組みが整いました。
本記事のさらに詳しい内容は公式のベストプラクティスを参考いただければさらに理解が深まるかと思います。

お疲れ様でした！

3. 終わりに

ここまでの内容でひとまずクライアントサイドのみで実装可能なVueアプリケーションは作成できるかと思います。
次回はクライアントサイドとサーバサイドの連携について書いていきます。

GAS＋Vue.jsでサーバレスなWebアプリ②