Vibe Codingで作ったアプリにデータベースをつなごう
〜 Supabase × Antigravity × Vercel で”記録が残る”農業アプリへ 〜
前回までの連載で、AIと会話しながらアプリを作り、インターネットに公開するところまで体験しました。
でも、こんな疑問が残っていませんか？
「入力したデータ、ページを閉じたら消えちゃうの？」
その通りです。前回までのアプリはデータを”自分のブラウザ”にしか保存していません。つまり、他のスマホで開いても空っぽですし、ブラウザのデータを消すとリセットされます。
これは農業にたとえると、「作業日誌をふせんに書いて、風で飛ばされる」ようなもの。せっかくの記録が残りません。
今回は、入力したデータをクラウド上のデータベース（Supabase）に保存し、どの端末からでも記録を見られるようにする方法を解説します。
今回のゴール
- Supabase でクラウドデータベースを無料で作れる
- Antigravity（Vibe Coding ツール）からデータベースに接続できる
- Vercel にデプロイして、スマホからも記録が残る農業アプリが完成する
| ステップ | 内容 | 目安 |
|---|---|---|
| ① | Supabase アカウント＆プロジェクト作成 | 5 分 |
| ② | テーブル＆RLS ポリシー作成 | 5 分 |
| ②-b | API キー確認・メモ | 3 分 |
| ③ | Antigravity で Supabase 連携 | 10 分 |
| ④ | Vercel 環境変数設定＆デプロイ | 10 分 |
| ⑤ | 動作確認 | 5 分 |
| 合計 | 約 40 分 |
全体像を確認しよう
今回の作業は、農業でいうと「紙の日誌 → 共有できるクラウド台帳へ引っ越し」するイメージです。
スマホ／PC（ブラウザ） → Vercel（公開サーバー） → Supabase（クラウドDB）
ユーザーがフォームに入力 → アプリが Supabase に保存 → どの端末からでも閲覧OK
ステップ①｜Supabase のアカウント＆プロジェクトを作ろう
無料から使えるクラウドデータベースサービスです。農業にたとえると、「JAの共有倉庫を、ネット上に無料で借りられる」ようなものです。
Supabaseにアクセスしてアカウント設定
- supabase.com にアクセスし、「Start your project」をクリック
- 「Continue with GitHub」を選択してサインアップ
- Organization を選択し、「New Project」をクリック
- 以下を入力して「Create new project」をクリック
- Project name：pesticide-calculator（任意の名前でOK）
- Database Password：自動生成をそのまま使用（メモ不要）
- Region：Northeast Asia (Tokyo) ※日本に近いリージョン
Supabase のトップページ
New Project の入力画面
ステップ②｜テーブルとセキュリティを設定しよう
プロジェクトができたら、データを入れる「テーブル（表）」を作ります。農業でいうと、「台帳のフォーマットを決める」作業です。
方法A：AI アシスタントに聞く（推奨）
Supabase には AI アシスタント機能があり、画面右下の ✨ アイコンから起動できます。
– id（UUID・主キー・自動生成）
– created_at（タイムスタンプ・デフォルトnow()）
– applicator_name（text・散布者名）
– pesticide_name（text・農薬名）
– dilution_rate（text・希釈倍率）
– area_m2（numeric・散布面積㎡）
– notes（text・備考・NULL許可）
Table Editor でテーブルを確認
AI Assistant にプロンプトを入力
「誰がデータを見られるか・書き込めるか」を制御するセキュリティ機能です。農業にたとえると、「倉庫の鍵を誰に渡すか決める」ことに相当します。
AI Assistant で SQL を実行
RLS ポリシーの設定完了
方法B：手動でやる場合
- 左メニューの「Table Editor」をクリック
- 「Create a new table」をクリック
- テーブル名に
spray_recordsと入力 - 「Enable Row Level Security (RLS)」がONになっていることを確認
- 上記のカラムを一つずつ追加し、「Save」をクリック
- 左メニュー「Authentication」→「Policies」を開く
spray_recordsテーブルの「New Policy」をクリック- SELECT 用ポリシーを作成
- Policy name:
allow_anon_select - Allowed operation: SELECT
- Target roles: anon
- USING expression:
true
- Policy name:
- 同様に INSERT 用ポリシーも作成
- Policy name:
allow_anon_insert - Allowed operation: INSERT
- Target roles: anon
- WITH CHECK expression:
true
- Policy name:
ステップ②-b｜API キーを確認してメモしよう
この後の連携作業で、Project URL と anon public key の2つが必要になります。
農業にたとえると、「共有倉庫の住所と、合鍵の番号をメモしておく」作業です。
- Supabase ダッシュボード左メニューの ⚙️ Settings をクリック
- 「Data API」をクリック
- Project URL が表示されます（
https://xxxxx.supabase.co形式）
- Project URL が表示されます（
- 同じページの 「API Keys」ボタンをクリック
- anon public キーが表示されます（長い英数字の文字列）
- 両方をコピーして、メモ帳などに一時保存しておく
Settings → Data API で Project URL と API Keys を確認
anon public key はフロントエンドで使用するため公開されますが、service_role key は絶対に公開しないでください。RLS を迂回してすべてのデータにアクセスできてしまいます。
ステップ③｜Antigravity で Supabase に接続しよう
いよいよ、前回作ったアプリにデータベースを接続します。
農業にたとえると、「畑の作業場と、離れた共有倉庫を道でつなぐ」工程です。
方法A：AIにまとめて依頼する（推奨）
このアプリをSupabaseと連携させてください。
【要件】
1. Supabaseクライアントライブラリ（@supabase/supabase-js）をインストール
2. 環境変数 VITE_SUPABASE_URL と VITE_SUPABASE_ANON_KEY を使って接続
3. spray_records テーブルに INSERT（新規登録）と SELECT（一覧表示）できるようにする
4. 既存の localStorage 保存はフォールバックとして残す
【テーブル構造】
spray_records: id, created_at, applicator_name, pesticide_name, dilution_rate, area_m2, notes
Antigravity が Supabase 連携コードを自動生成
Project URL や API キーを直接コードに書くと、GitHub 上で誰でも見えてしまいます。環境変数として外部から渡すことで、コードを公開しても安全です。農業にたとえると、「倉庫の暗証番号を伝票に書かず、口頭で伝える」イメージです。
方法B：手動で設定する場合
- ターミナルで
npm install @supabase/supabase-jsを実行 src/lib/supabase.jsファイルを作成し、以下を記述import { createClient } from '@supabase/supabase-js' const supabaseUrl = import.meta.env.VITE_SUPABASE_URL const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY export const supabase = createClient(supabaseUrl, supabaseAnonKey)- プロジェクトのルートに
.envファイルを作成VITE_SUPABASE_URL=https://xxxxx.supabase.co VITE_SUPABASE_ANON_KEY=eyJhbGciOi... - データの保存・取得処理で
supabase.from('spray_records')を使うようにコードを修正
ステップ④｜Vercel に環境変数を設定してデプロイしよう
アプリのコードが完成しても、Vercel（公開サーバー）側にも「倉庫の住所と合鍵」を教えてあげないと、本番環境ではデータベースに接続できません。
④-a｜なぜ環境変数が必要？
| 環境 | 接続情報の置き場所 | 農業たとえ |
|---|---|---|
| ローカル（自分のPC） | .env ファイル |
自宅の金庫にメモ |
| 本番（Vercel） | Vercel の環境変数設定 | 出荷先にも合鍵を預ける |
.env ファイルは GitHub にアップロードされないため（.gitignore で除外）、Vercel には別途設定が必要です。
④-b｜Vercel で環境変数を設定する
- Vercel ダッシュボードを開き、対象プロジェクトをクリック
- 上部メニューの「Settings」をクリック
- 左メニューから「Environment Variables」を選択
- 以下の2つを追加
Key Value VITE_SUPABASE_URLステップ②-b でメモした Project URL VITE_SUPABASE_ANON_KEYステップ②-b でメモした anon public key - Environments は Production・Preview・Development すべてにチェックを入れて「Save」
Vercel の Environment Variables 設定画面
④-c｜再デプロイする
環境変数を設定しただけでは反映されません。再デプロイが必要です。
- Vercel ダッシュボードの「Deployments」タブを開く
- 最新のデプロイの右側 「⋯」→「Redeploy」をクリック
- ビルドが完了するまで1〜2分待つ
デプロイ完了 — 「Ready」と表示されれば成功
ステップ⑤｜動作確認しよう
すべての設定が完了しました。最後に「ちゃんとデータベースに記録が保存されるか」を確認しましょう。
- Vercel で公開されたアプリの URL をブラウザで開く
- 散布記録を1件入力して保存する
- Supabase ダッシュボードの「Table Editor」→「spray_records」を開く
- 入力したデータが表示されていれば成功🎉
- 別の端末（スマホなど）からも同じ URL を開き、データが共有されていることを確認
Supabase に散布記録が保存されている！
| 症状 | 確認すること |
|---|---|
| 保存ボタンを押してもエラーが出る | Vercel の環境変数名が正確か（VITE_ プレフィックスを忘れていないか） |
| データが Supabase に届かない | RLS ポリシーで INSERT が anon に許可されているか |
| 一覧に何も表示されない | RLS ポリシーで SELECT が anon に許可されているか |
| 再デプロイ後も変わらない | 環境変数設定後に「Redeploy」を実行したか |
まとめ｜今回やったこと
| ステップ | やったこと | 農業たとえ |
|---|---|---|
| ① | Supabase プロジェクト作成 | 共有倉庫を契約 |
| ② | テーブル＆RLS 設定 | 台帳フォーマットと鍵の管理 |
| ②-b | API キー確認 | 住所と合鍵をメモ |
| ③ | Antigravity で DB 接続 | 畑と倉庫を道でつなぐ |
| ④ | Vercel 環境変数＆再デプロイ | 出荷先にも合鍵を預ける |
| ⑤ | 動作確認 | 記録がちゃんと届くか試す |
これで、あなたの農業アプリは「データが消えない」「どこからでも使える」本格的なウェブアプリになりました！
| 回 | テーマ | ステータス |
|---|---|---|
| 第0回 | Vibe Coding って何？ | ✅ 公開済み |
| 第1回 | Google AI Studio で会話する | ✅ 公開済み |
| 第2回 | AI Studio のビルドモードでアプリを作る | ✅ 公開済み |
| 第3回 | Antigravity で GitHub 連携＆公開 | ✅ 公開済み |
| 第4回 | Antigravity を使いこなす応用テクニック | ✅ 公開済み |
| 第5回 | Supabase でデータベース連携 | 📍 今ここ |
