サーバー？いらない。

「予約フォームを作りたい」そう思ったとき、普通はデータベースやバックエンドサーバー（PHPやNode.jsなど）の構築を考えます。でも、その構築や保守にかかる時間とコスト、悔しい思いをしたことはありませんか？

小規模な店舗サイトに、本格的なインフラは本当に必要でしょうか？この記事を読めば、完全サーバーレス、しかも 月額0円 で予約システムを構築する方法がわかります。

今回は、完全サーバーレス、しかも 月額0円 で運用できる仕組みを採用しました。

その構成が、Astro（フロントエンド）+ Google Apps Script（バックエンド）+ Google Sheets（データベース） です。

仕組みの全体像

データの流れは驚くほどシンプルです。

ユーザー — Astroで作られたフォームに情報を入力。
JavaScript — ブラウザからGASのWebアプリURLへデータを送信。
GAS — 受け取ったデータをGoogleスプレッドシートに行として追加。
担当者 — スマホでスプレッドシートを開くだけで、予約状況をリアルタイム確認。

この構成の最大の利点は、店舗スタッフが使い慣れているGoogleスプレッドシートがそのまま管理画面になることです。新しい管理ツールの使い方を覚える必要はありません。

実装のポイント

1. no-cors モードでの送信

ブラウザから直接GASにデータを送る場合、CORS（Cross-Origin Resource Sharing）の制限に引っかかります。これを回避するために、fetch メソッドの mode: 'no-cors' オプションを使用するのが最大のコツです。

// public/js/ehomaki-common.js (抜粋)
const data = {
    name: "山田 太郎",
    order: "特上恵方巻 2本",
    // ...
};

await fetch(GAS_API_URL, {
    method: "POST",
    mode: "no-cors", // ここが重要！
    cache: "no-cache",
    headers: {
        "Content-Type": "text/plain",
    },
    body: JSON.stringify(data),
});

このモードでは、レスポンス（成功したかどうか）を受け取ることはできませんが、データは確実に送信されます。そのため、エラーハンドリングは「送信できたとみなして完了画面を出す」という楽観的なUI設計（Optimistic UI）にする必要があります。

2. クライアントサイドでのバリデーション

サーバー側での複雑なエラーレスポンスを受け取れない分、フロントエンド（JavaScript）での入力値チェックを厳密に行います。

電話番号の形式チェック
必須項目の「空文字」チェック
商品選択数が0でないか

これらを送信ボタンを押す直前に validateForm() 関数で徹底的に検証することで、無効なデータがスプレッドシートに入り込むのを未然に防いでいます。

メリットとデメリット

メリット

コストゼロ: 維持費が一切かかりません。これに尽きます。
管理が楽: 普段使い慣れたスプレッドシートが管理画面になります。
拡張性: GASを書けば、予約完了メールの自動送信やLINE通知なども数行のコードで実装できます。

デメリット

大規模には不向き: 秒間何件もの予約が入るような規模だと、排他制御の問題でGASが処理しきれない可能性があります。
デバッグの難しさ: no-cors モードではサーバーのエラー内容がクライアントに返ってこないため、開発中のデバッグには工夫が必要です。

今回の「海鮮飲食店」のような規模感であれば、メリットがデメリットを大きく上回ります。技術選定において重要なのは「最新技術を使うこと」ではなく、「要件に対して最適な技術を選ぶこと」です。

詳解！ Google Apps Script完全入門 [第3版]

高橋宣成

Recommend: GAS開発のバイブル的存在。初心者から中級者まで、サンプルコードと解説が充実しており、この1冊で予約システムの実装も十分可能です。

Amazonで見る

Antigravityへの指示例 (Prompt)

このシステムをゼロから構築するための、具体的な指示の例を紹介します。

Backend Logic Prompt: 「Google Apps Scriptで、POSTリクエストを受け取ってスプレッドシートに行を追加するスクリプトを作成してください。 CORSエラーを回避するため、doPost 関数内で ContentService.createTextOutput を使い、JSONを返すように実装してください。」

Frontend Form Prompt: 「Astroで予約フォームのコンポーネントを作成してください。送信処理はJavaScriptで行い、fetch メソッドには mode: 'no-cors' を指定して、GASのAPI URLにデータを送信するように実装してください。」

このように、「CORS回避」や「no-corsモード」といった技術的なキーワードをプロンプトに含めることで、AIはより正確で実用的なコードを生成できるようになります。

今日からできること

あなたのプロジェクトでも、まずはGASの doPost 関数を試してみてください。5分で動くものが作れます。「サーバー代がもったいない」と感じているなら、この構成は必ず役に立ちます。

次回 Vol.4 は、Google検索で上位表示を狙うための SEO対策とCanonical問題 について。 Search Consoleの警告を解消したリアルな戦いの記録をお届けします。

🤖 Antigravity Prompt

この記事の成果物を作成するために、実際に使用した（または推奨される）プロンプトです。

あなたはGoogle Apps Script (GAS) のエキスパートです。静的サイトのフォームからPOSTされた予約データを受け取り、Googleスプレッドシートに保存するAPIを作成してください。
要件:
- CORS対応（Access-Control-Allow-Origin）
- バリデーション（必須項目チェック）
- エラーハンドリング（try-catch）
- 成功時/失敗時のJSONレスポンス形式
 doPost関数のコードを書いてください。

Astro × Google Sheets で作る、サーバーレス予約システム - Vol.3

Code Radiance