問い合わせフォーム＆データベース（Supabase）｜Claude Code 開発教材

まず、全体の流れ

やることは大きく3つです。①お客さまが入力する「フォーム」を作る → ②入力された内容をためる「データベース」を用意する → ③その2つをつなぐ。①と③は Claude にお願いし、②だけは Supabase という外部のサービスで先に準備します。順番に見ていきましょう。

① フォームとは — 受け取る入り口

フォームとは、お客さまが文字を入力する欄のことです。お問い合わせなら「お名前」「メールアドレス」「お問い合わせ内容」といった欄と、最後の「送信」ボタン。みなさんも、どこかのサイトで入力したことがあるはずです。あれを、自分のホームページにも置く、というだけのお話です。

② 保存先が必要 — データベース

ただし、フォームを置いただけでは、お客さまが「送信」を押した内容はどこにも残りません。受け取った内容をどこかにためておく場所が必要です。それがデータベース。Excelの表のように、1件ずつデータが積み上がっていく保管庫だとイメージしてください。

となりに座って一言

最初は「問い合わせを受け取れる」だけで十分です。予約システムや会員登録のような仕組みは、同じデータベースの上に後からいくらでも育てられます。まずは小さく、確実に受け取れる入り口を1つ作りましょう。

③ Supabase で保存先を用意する

Supabase（スーパーベース）は、データベースと保存機能をまとめて無料から使えるサービスです。自分でサーバーを用意しなくても、ブラウザだけで保存先が作れます。講座で一緒に登録したのと同じ手順です。

Supabase 公式サイトでアカウントを作成します（GitHubアカウントでログインするのが手早いです）。
「New project（新規プロジェクト）」を作成します。プロジェクト名と、データベースのパスワードを決めます。パスワードは控えておきましょう。
左メニューの「Table Editor」から、問い合わせを保存するテーブル（表）を作ります。たとえば名前を contacts にして、列に name・email・message を用意します。
「Project Settings → API」を開くと、Project URL と API キー（anon key）が表示されます。この2つが、フォームとデータベースをつなぐ「接続情報」です。あとで使うので、この画面を開いておきます。

④ フォーム作成と連携を Claude に頼む

保存先ができたら、いよいよフォーム本体です。先ほどの URL と API キーを添えて、Claude にこう頼みます。

Claude Code へのプロンプト

お問い合わせフォーム（お名前・メールアドレス・お問い合わせ内容）を作って、送信された内容がSupabaseに保存されるようにしてください。SupabaseのURLとキーはこちらです：
URL: https://〇〇.supabase.co
キー: 〇〇

送信したあとの「お礼の表示」も、同じように一言お願いするだけで整えてくれます。

Claude Code へのプロンプト

フォーム送信後に「ありがとうございました」と表示されるようにしてください。

独学だと、ここで止まる

APIキーを、そのまま公開リポジトリに置かない

API キーは、いわば保存先の合鍵です。これをコードに直接書いて GitHub などに公開すると、他人に保存先を触られてしまう恐れがあります。Claude には「キーは公開せず、環境変数に分けてください」と一言添えるのが安全です。環境変数とは、鍵などの大事な値をコードの外側に保管しておく仕組みのこと。講座でも、ここは必ず分けましたね。

⑤ テスト送信して、保存を確かめる

つながったら、自分でフォームに入力して「送信」してみます。そのあと Supabase の管理画面（Table Editor）で先ほどの contacts テーブルを開き、いま送った内容が1行追加されていれば成功です。受け取る入り口が、ちゃんと開きました。

独学だと、ここで止まる

送信しても、データが保存されない

よくある原因は、Supabase側のテーブル名・列名・キーの取り違えです。たとえばテーブルを contacts で作ったのにコードが別の名前を見ていた、など。直そうと一人で悩まず、画面に出ているエラーや「保存されない」という状況を、そのまま Claude に伝えるのが最短です。「送信しても Supabase にデータが入りません。原因を調べて直してください」と貼り付ければ大丈夫。講座でも、この聞き方を練習しましたね。

⑥ 公開するときに、もうひと手間（大事）

手元（ローカル）で保存できたら次は公開ですが、Supabase を使うサイトには公開時の注意があります。接続情報（URL と APIキー）を、公開先のサービスにも教えてあげる必要があるのです。手元の .env（接続情報を書いたファイル）は GitHub に上げてはいけないため、公開先には別途登録します。

GitHub Pages で公開する場合：環境変数の仕組みを持たないため、APIキーの扱いに工夫が要ります。フォームの保存自体はブラウザから Supabase へ直接届くので動きますが、キーの守り方を Claude に相談しましょう。
Render で公開する場合：設定画面の「Environment（環境変数）」に、URL と APIキーを登録します。裏で処理を動かしたいときも Render なら対応できます。
Vercel で公開する場合：「Settings → Environment Variables」に、URL と APIキーを登録して再デプロイします。

公開先ごとの具体的な設定は、次の章「公開する（デプロイ）」でくわしく扱います。あわせて読んでください。