Vite ＋ GAS + Cloudflareで完全個人用アプリを工作している備忘録

やりたかったこと

• ジムでのトレーニング内容を記録したい
• 既成のアプリは合わなかった
• 特定のアプリにデータを依存させたくない（バックアップとか面倒なので）
• 別に公開するつもりはないのでDBとかインフラとかに手間をかけたくない
• でもトレーニングしたその場で記録したい

最初に作ったもの

構成：
Backend

• GAS api

Frontend

• GASの「Webアプリとしてデプロイ」機能でHTMLを表示

DB

• Googleスプレッドシート

保守

• GASエディタで各ファイルを編集する
• 編集したらエディタ内のデプロイボタンからデプロイする

運用

• デプロイ時に発行されたURL（毎回変わる）にアクセスして記録する

結果：
コード修正 → デプロイ → 発行新URLをスマホに共有
の一連の手順が面倒すぎて却下
ピュアなJavaScriptのDOM操作のみで自分がやりたかったことを実現するのも正直しんどい

次に作ったもの

構成：
Backend

• GAS API

Frontend

• Vite + React

DB

• Googleスプレッドシート

Infra

• Cloudflare

出来上がったものがこちら

やったこと（順不同）

• GASのエディタからコードを更新するのが面倒な問題
  • claspでローカル編集 → pushできるようにした
  • アプリのリポジトリ内に同居もさせた
• GASのデプロイとデプロイすると毎回URLが変わるのが面倒な問題
  • コードの更新（clasp push）、バージョンの更新（clasp version）、デプロイ（clasp redeploy）を一括でやってくれるスクリプトを作成（GASのURLは固定）
  • それでも後生大事にキャッシュを握り締めて離さないGASくん
  • 結局エディタ画面から最新バージョンを反映させてやらないと動かなかった
  • そんなに言うならきっちり最新URL叩いてやるわ
  • clasp push → clasp deployしてログからデプロイIDを正規表現で引っこ抜く → Cloudflare KVに引っこ抜いたデプロイIDを突っ込んでWorkersから読み出し＆GASの最新URLを生成する
  • ✌
  • しかしこれはこれで毎度権限範囲を変えられてしまう
  • 😡😡😡
• ブラウザからGAS APIのGETメソッドを直接叩けない問題
  • これはそういう仕様らしい
  • GASの手前にCloudflare Workersを噛ませて解決
• UIデザインはGoogle Antigravityにお任せ（tailwindCss導入済み）
  • HTMLのマークアップと動きの部分だけはあらかじめ実装しておいた
  • ベースカラーはSlate系を指定、アクセントカラーは3種くらい提案してもらった中から選択
  • GASとの戦い（前述）に疲弊していたのでレスポンシブ対応もやってもらった
• 環境変数も若干整備
  • 開発環境と本番環境で読み書きするシートを分けるようにした
  • GAS APIのデプロイIDやCloudflar Workersのエンドポイント、スプレッドシートのIDなどを秘匿するためにenvファイルを作成
  • 本アカウントで開始してしまったばっかりにこのあたり結構神経質になった
  • サブアカウントでやればよかった
  • でもスプシは本アカウントに持っておきたいしな～～～～～～～

今後やること（随時更新）

• アプリ本体のデプロイ
• GASとの戦い延長戦
• CICD整備
• アプリの機能拡張
• Cloudflare Workersもローカルで開発できるようにする

感想

＞＞＞DBとかインフラとかに手間をかけたくない＜＜＜

🤔？