第2章：Supabase データベースと SQL スキーマ生成

強力な公式サイトには静的な画面だけでは不十分です。会員データ、予約記録、お問い合わせフォームを保存するためのデータベースが必要です。 ここでは Supabase を使用します。これはオープンソースの Firebase 代替品で、非常に強力な PostgreSQL データベースを基盤としています！

🎯 本章の目標

1. Supabase に登録しプロジェクトを作成する
2. Vibe Coding で AI に Database Schema（データテーブル構造）を設計させる方法を学ぶ
3. Supabase で AI が生成した SQL 構文を実行する
4. API キーを取得し環境変数 (.env) を設定する

---

🛠️ ステップ1：Supabase プロジェクトの作成

1. Supabase 公式サイト にアクセスし、登録してログインする
2. New Project をクリック
3. Project Name を入力（例：not_far_web_db）
4. Database Password を設定（必ず覚えておくか、ブラウザのパスワードマネージャーに保存）
5. Region は台湾に最も近い地域を選択（例：Tokyo または Singapore）
6. Create new project をクリック

（Supabase がデータベースを初期化するのに数分かかる場合があります）


---

🧠 ステップ2：Vibe Coding で SQL スキーマを生成

ここで Vibe Coding の真価が発揮されます！長い SQL 構文を手作業で書く必要はありません。

[!TIP] Vibe Prompt（AIに送信するコピー用テキスト）： 「不遠キャンプ場」という名前のウェブサイトを開発中で、バックエンドに Supabase (PostgreSQL) を使用しています。 データベースのスキーマ設計を手伝ってください。以下の3つのテーブルが必要です： 1. users (ユーザーテーブル、supabase auth と統合、id, email, created_at, full_name, phone_number を含む) 2. bookings (予約テーブル、キャンプサイトの予約記録、id, user_id(users への関連), check_in_date, check_out_date, status, total_price, created_at を含む) 3. contact_messages (お問い合わせフォームテーブル、サイト訪問者からのメッセージ記録、id, name, email, message, is_read, created_at を含む) Supabase SQL Editor で実行できる完全な SQL 構文を直接提供してください。PRIMARY KEY, FOREIGN KEY を含め、RLS (Row Level Security) を有効にし、基本的な Policies コメントを追加してください。

AI は以下のような洗練された SQL 構文を生成します：

-- ユーザー拡張テーブルの作成 (Supabase Auth 対応)
CREATE TABLE public.users (
  id UUID REFERENCES auth.users(id) ON DELETE CASCADE PRIMARY KEY,
  email TEXT UNIQUE NOT NULL,
  full_name TEXT,
  phone_number TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- 予約テーブルの作成
CREATE TABLE public.bookings (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES public.users(id) ON DELETE CASCADE NOT NULL,
  check_in_date DATE NOT NULL,
  check_out_date DATE NOT NULL,
  status TEXT DEFAULT 'pending',
  total_price DECIMAL(10,2) NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- お問い合わせフォームテーブルの作成
CREATE TABLE public.contact_messages (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT NOT NULL,
  message TEXT NOT NULL,
  is_read BOOLEAN DEFAULT false,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- RLS の有効化 (セキュリティ保護)
ALTER TABLE public.users ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.bookings ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.contact_messages ENABLE ROW LEVEL SECURITY;


---

⚡ ステップ3：SQL 構文の実行

1. Supabase ダッシュボードに戻る
2. 左メニューから SQL Editor をクリック
3. New query をクリック
4. AI が提供した SQL 構文を貼り付ける
5. 右下の Run をクリック！

Success と表示されれば、データベースが完全に構築されたことを意味します。超高速ですね！

 

---

🔑 ステップ4：プロジェクトの環境変数 (.env) 設定

Astro サイトがこのデータベースに接続できるようにするには、API キーを取得する必要があります。

1. Supabase ダッシュボード左下部の Project Settings (歯車アイコン)
2. API を選択
3. Project URL と Project API keys (anon, public) が表示されます

VSCode / Cursor プロジェクトのルートディレクトリに戻り、.env という名前のファイルを作成します。

[!TIP] Vibe Prompt（AIに送信するコピー用テキスト）： Supabase の URL と Anon Key を取得しました。Astro プロジェクトで .env ファイルはどのように記述すべきですか？これらの変数の命名規則は（例えば PUBLIC プレフィックスを使用するなど）？

.env ファイルには以下のように記述します：

PUBLIC_SUPABASE_URL=あなたの_Project_URL_をここに貼り付け
PUBLIC_SUPABASE_ANON_KEY=あなたの_Anon_Key_をここに貼り付け

 

---

✅ 本章のまとめ

データベース設計という難しい作業を AI に任せる方法を学びました！ ロジックを明確に説明すれば、AI は瞬時に完璧な SQL スキーマを生成できます。次章ではフロントエンドに戻り、React と Tailwind CSS を使用してダイナミックなグラデーション効果を持つ美しいホームページ（Hero Section）を作成します！