【GAS】フロントエンドフレームワークを用いたwebアプリの作成方法

Google workspaceを導入している会社において、非IT部門がwebアプリケーションを作ろうとした場合、GASは一つの有力候補（というか唯一の手段）となり得ます。

ただ、GASというのは本来スプレッドシートやGmailを扱うものであり、GASのフロントエンド（HTMLで作成できるファイル）はスプレッドシートのモーダルやサイドバーのような簡単なUIを作ることを前提としているため、そこまで本格的なwebアプリを作ることは想定されていません。

しかしやりようによっては普通のwebアプリケーションレベルの複数ページを、ReactやVueといったフレームワークを用いて無理なく作ることもできます。

私の勤め先のように、情シス部門がアホなため、せっかくエンジニアスキルを身につけても良いアプリケーションを導入できず歯痒い思いをされている方、こういう裏技的な方法もあるので参考にしてください。

アプリケーション作成の前提

そもそもアプリケーション作成には、最低限サーバーとDBが必要です。

GASの場合はサーバーはGASでdoGet関数やdoPost関数を使います。（使い方については入門的な内容なので省略します）

DBについて

DBについては、スプレッドシートをDB代わりに使う方法もありますが、google workspaceを使っているならAppSheetも有力な手段です。

言うまでもなくスプレッドシートは本来表計算ソフトであり、これをDBに使うのはExcel方眼紙やExcel議事録を使っているJTC並みの低知能行為です。

AppSheetはローコードツールとして有名ですが、実はDatabaseも設置でき、REST APIも利用できます。（しかも無料！！）

なのでまともな知能のあるエンジニアならAppSheetを使いましょう。

※といってもAppSheetが使いやすいDBかというとそうでもなく、booleanがY/Nとなる、数値が文字列で返される、エラーメッセージが「書き込みエラー」としか出ず原因がわかりにくいなど、欠点ありまくりです。他にまともに使えるDBがあるならそっち使いましょう。

フロントエンド開発

今どき、普通はReactやVueなどのフレームワークを使って書きますし、CSSもTailwindCSSを使います。
（フレームワークもライブラリもなしで作ろうとすると、相当しょぼいものしかできません）

しかし、GASではHTMLファイルしか置けないので、当然npmを用いたパッケージ管理もできません。

なので、普通のweb開発に一工夫必要です。

今回は私が積み重ねた2つのノウハウをお教えします。

2つの書き方と概要

方法① GAS + AppSheet

冒頭で言ったようにGASとAppSheetが使える会社・環境なら、このやり方が一番です。
（繰り返しになりますが、ちゃんとしたサーバーやDBが使えるなら、そっちを選んでください。あくまでGASしか使えない環境での苦肉の策です）

以下が主な手順です。

① AppSheetの用意

開発用データを入れたAppSheetを用意します。
AppSheetのApp開発画面のIntegrationで、REST APIを使えるようにしましょう。

② VueやReactでフロントエンドを開発

AppSheetのデータにはJavaScriptのfetchを用いてAppSheetのREST APIからデータを取得and保存します
　ライブラリは普通にインストールして構いません。TailwindでもTypeScriptでもガンガン入れちゃってください

③ viteのプラグインであるvite-plugin-singlefileを導入します。

これがこの開発手法のミソで、このプラグインを使うとビルドした時にフロントエンド（HTML、JS、CSS）が単一のファイルに変換されます。

④ GASでデプロイできるアプリケーションを用意

サーバー側はserver.gs、フロント側はindex.htmlとでもしておきます。
index.htmlで③でビルドしたファイルをコピペしたら、あとは普通にデプロイしましょう。

するとあら不思議、VueやReactで作ったフロントエンドがそっくりそのままGASアプリで動きます

方法① GAS + スプレッドシート

大人の都合でAppSheetが使えない場合、スプレッドシートをDBとして用いる開発をします。

この場合、Vue CLIやReactを使うことができません。
なぜなら、JavaScriptからfetchでスプレッドシートのデータを引っ張ってこようにも、スプレッドシートにはAPIがないため、データの取得や保存ができないからです。

一応GASには実行可能APIがあったり、pythonやNodejsでスプレッドシートのデータを引っ張ってくるライブラリもあり、それらを利用してAPI用サーバーを立てればできなくはないのですが、Google Platformの設定がクソ面倒ですし、pythonやNodejsでAPIを作るのもかなり手間です。

この場合は、Vue CDNを用いてフロントエンドを開発するという変態的な手法を取ることになります。
（React CDNは使えなくはないのですが、GASエディタにscriptタグを用いる都合上、jsxの書き方がかなりしんどくなります。Vueだとtemplate記法を使えるので、HTMLを書きやすいです）

① GASアプリケーションを作成

doGet関数でindex.htmlの内容が表示できることを確認

②（サーバーサイド）スプレッドシートのREST APIを作成

GASからスプレッドシートは自由に操作できるのですが、都度都度作成していては手間がかかります。

スプレッドシートは、一行目を列名にする、一列目はIDにするという規則を設けておいて、REST APIの書き方を決めておけば、毎回新しく作り直す必要はありません。

③（フロントエンド）main.htmlとApp.html

フロントエンドのファイル構成はNuxtを意識しています。

doGet()が対象とするのはmain.htmlです。
ここには各種CDNからのインストールや各コンポーネントファイルの結合（強制スクリプトレットを使います）、Vueの初期化を行います

App.htmlはVueの入口です。

④（フロントエンド）composables

ここではサーバーサイドから取ってきたデータを格納・管理します。
サーバーからデータを取得するのはgoogle.script.runです。

データ（というか状態）を管理するにはpiniaを使うと、各コンポーネントでの管理がやりやすくなります

⑤（フロントエンド）pages、components

一ページ一コンポーネントの原則はVueやNuxtと変わりません。

ここで<template>は、Vueのx-templateという特殊な記法です。
<template>タグにしておくとGASエディタの特性上、HTMLの色付けになります。

サーバー側で構築される際、templateタグにはx-templateやidが付与されてvueテンプレートとして利用できるようにしています。

最後に

ここに書いた手法は私が高単価でGASアプリケーションを受注できるようになれたノウハウです。
（なんで公開したかというと、最近AI案件のほうが楽しくなってきたため、webアプリ開発は優先度下がったからです。）

一方で、エンジニア仲間と新たに立ち上げた会社では、初心者エンジニアがここで紹介した手法で開発できるレベルまで教育します。
※ ホームページや募集要項が固まったら載せます

エンジニアスキルを身につけたい方や、社員にエンジニアスキルを身につけさせたい企業の方、気軽にご相談ください