Svelteで高機能なGASのWebアプリを作る

はじめに

Google Apps Script の Web アプリケーションを公開する機能を利用して、スプレッドシートをデータベースとして扱う簡易的なアプリ・ツールを作りたいケースがありました。 S3 やその他のホスティングサイトに構築するほどではないものの、スプレッドシートを直接いじるのは…みたいな時にこの方法で Svelte, React, Vue を利用したウェブアプリを作ることが可能です。

リポジトリ

svelte-with-tailwindcss-on-gas

Github のテンプレート機能を利用できるようにしています。 TailwindCSS は不要であれば剥がしてしまって問題ありません。

技術スタック

ディレクトリ構成

client ディレクトリ配下が Svelte によって作成されたフロントエンドの実装を集約する層です。 server ディレクトリ配下は GAS 側で実行されるサーバサイドの実装を集約する層となっています。

src/
├── client/
│   ├── api/
│   │   ├── mocks
│   │   └── index.ts
│   ├── components
│   ├── features
│   ├── stores
│   ├── types
│   ├── utils
│   ├── App.svelte
│   └── main.ts
├── server/
│   ├── main.ts
│   └── types.ts
└── vite-env.d.ts

サーバサイド

HTML を配信するために GAS の Web アプリ機能を利用する

server/main.ts に doGet 関数を追加します。フロントエンド（クライアントサイド）で title タグ、favicon の指定を変更しても反映されないため、必要であれば doGet 関数内で指定します。

const HTML_TITLE = "App name";
const HTML_FAVICON_URL = "https://example.com/favicon.ico";

function doGet() {
  const html = HtmlService.createTemplateFromFile("index.html").evaluate();
  html.setTitle(HTML_TITLE);
  html.setFaviconUrl(HTML_FAVICON_URL);
  return html;
}

API エンドポイントを作成する

server/main.ts でエンドポイントにしたい関数を export するだけです。

type APIResult<T> =
  | {
      ok: true;
      data: T;
    }
  | {
      ok: false;
      error: Error;
    };

const doSomething = (): APIResult<string> => {
  return {
    ok: true,
    data: "success",
  };
};

export { doSomething };

フロントエンド

src/client/api/index.ts でサーバサイドの API と結合させます。内部的には google.script.run が実行されています。

import { GASClient } from "gas-client";
import type * as Server from "../../server/main";

const { serverFunctions } = new GASClient<typeof Server>();

export const APIClient = serverFunctions;

サーバサイドの API を叩く

<script lang="ts">
  import { APIClient } from "./api";

  const promise = APIClient.doSomething();
</script>

{#await promise}
<div>Loading...</div>
{:then result}
<p>{result}</p>
{:catch error}
<p>error</p>
{/await}