Supabase：Firebaseの最強オープンソース代替品

前章ではPostgreSQL（Postgres）の強力な機能とSQL構文を学びました。しかし、フロントエンド開発者やVibe Coding初心者にとって、Linuxサーバーをセットアップし、Postgresをインストールし、ファイアウォール設定を行うのは悪夢のような作業です。

この課題を解決するため、ソフトウェア業界では「BaaS（Backend as a Service、バックエンド即サービス）」が登場しました。過去数年はGoogleのFirebaseが主流でしたが、ここ2年でSupabaseというプラットフォームがオープンソースコミュニティを席巻しています。

Supabaseは「Firebaseのオープンソース代替品」を自称していますが、Firebaseより優れている点は、その基盤が本物のPostgreSQLデータベースであることです！つまり、特殊なNoSQL構文を学ぶ必要がなく、標準SQLを使用でき、リレーショナルデータベースの厳密性とパフォーマンスを全て享受できます。

ステップ1：登録と最初のプロジェクト作成

さっそくクラウドに無料のPostgresデータベースを作成しましょう！

  1. ブラウザでSupabase公式サイト（supabase.com）を開く
  2. 右上のStart your projectをクリックし、GitHubアカウントでログイン
  3. ログイン後、画面中央の緑色ボタンNew Projectをクリック
  4. 最初にOrganization（組織）を作成するよう求められるので、適当な名前を入力
  5. プロジェクト作成画面で以下を設定：
    • Name：プロジェクト名（例：my-vibe-store-db）
    • Database Password：非常に重要！右側のGenerate a passwordボタンをクリックし、すぐにこのパスワードをコピーしてテキストファイルに保存（忘れると大変なことになります）
    • Region：最寄りのサーバーを選択。通常Tokyo（東京）またはSingapore（シンガポール）が最速
  6. Create new projectをクリック

Supabaseがクラウド上でサーバーをプロビジョニングします（約2～3分待機）。この間にコーヒーを淹れても良いでしょう。画面のスピナーが消え、ダッシュボードが表示されたら、おめでとうございます！あなたは月額数十ドル相当のエンタープライズ級データベースを手に入れました！

ステップ2：プロジェクト接続の「神聖な鍵」を取得

Line Botコースで学んだように、外部プログラムがクラウドサービスを制御するには「鍵」が必要です。

Supabaseの左メニューから歯車アイコンの**Project Settings（プロジェクト設定）**を開き、APIを選択します。 ここに2つの極めて重要な情報が表示されます：

  1. Project URL：データベースのURL
  2. Project API Keys（anon / public）：公開鍵

🚨 注意： Vibe Codingで使用する際、これらの鍵を直接コード（index.jsやpage.tsx）に記述してはいけません。ハッカーに見つかるとデータベースを削除される可能性があります。 正しい方法は、プロジェクトフォルダに.env.localファイルを作成し、以下の情報を貼り付けることです：

NEXT_PUBLIC_SUPABASE_URL=あなたの_Project_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=あなたの_anon_key

AIはこれらの環境変数を見て、安全にSupabaseに接続する方法を理解します。

ステップ3：SQL魔法で「テーブル（Table）」を作成

データを格納する容器を作成しましょう。SupabaseではUIからテーブルを作成できますが、Vibe Coderとしてより高度で強力な方法、直接SQLコマンドを貼り付ける方法を採用します。

Supabase左メニューのSQL Editorを開き、New queryをクリックします。大きな黒いテキストボックスが表示されます。 これがデータベースに命令を下すコンソールです。

「会員注文システム」の基本構造を作成してみましょう。以下のAIが生成したSQLを貼り付け、右下の**Run（実行）**をクリックしてください：

-- 1. 「会員テーブル（users）」作成
CREATE TABLE users (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT UNIQUE NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 2. 「商品テーブル（products）」作成
CREATE TABLE products (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  price DECIMAL(10, 2) NOT NULL,
  stock_quantity INTEGER DEFAULT 0
);

-- 3. 「注文テーブル（orders）」作成（会員と商品に関連付け）
CREATE TABLE orders (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  product_id INTEGER REFERENCES products(id),
  quantity INTEGER NOT NULL,
  total_price DECIMAL(10, 2) NOT NULL,
  order_date TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 4. テスト用ダミーデータを投入！
INSERT INTO users (name, email) VALUES 
('王大明', 'ming@vibetutor.com'),
('陳小美', 'mei@vibetutor.com');

INSERT INTO products (title, price, stock_quantity) VALUES 
('Vibe プレミアムメカニカルキーボード', 3500.00, 50),
('人間工学AIチェア', 12000.00, 10);

1秒もかからず、画面下部にSuccessと表示されれば、データベース構造が瞬時に構築されました！UIで「新規フィールド追加、型設定」を手動で行うよりも数百倍速いです！これがテキストインターフェース（CLI/SQL）が決して廃れない理由です。

ステップ4：Vibe Prompt実戦！AIでデータ取得コードを書く

データベースの準備とダミーデータの投入が完了したら、最後のピースは、私たちのウェブページ（Next.js/React）がSupabaseからこれらのデータを「取得して画面に表示」できるようにすることです。

Supabase公式は非常に強力なJavaScript SDKを提供しています。同様に、supabase.from('users').select('*')のような構文を暗記する必要はありません。Cursorに正しい呪文を唱えるだけで良いのです：

【神級接続Promptをコピー】 Next.js（App Router）プロジェクトを開発中です。 Supabaseデータベースは既にセットアップ済みで、.env.localにNEXT_PUBLIC_SUPABASE_URLとNEXT_PUBLIC_SUPABASE_ANON_KEYを設定しました。

以下のタスクを完了してください：

  1. まず、@supabase/supabase-jsパッケージを使用してSupabase接続クライアントファイル（例：lib/supabase.ts）を作成
  2. 次に、フロントエンドページapp/products/page.tsxを作成
  3. このページで、Client ComponentとuseEffectを使用し、ページロード時にSupabaseのproductsテーブルから全データを取得
  4. 取得中は「読み込み中...」アニメーションを表示
  5. 取得成功後、Tailwind CSSで美しいグリッドカードレイアウトを作成し、商品のtitleとpriceを見栄え良く表示（カードにhover:shadow-lgホバー発光効果を追加）
  6. 取得失敗時、画面に赤色のエラーメッセージを表示

Cursorがこの指示を受けると、自動的に2つのファイルを作成します。1つは安全な接続処理用、もう1つは画面レンダリング用です。 ブラウザでlocalhost:3000/productsを開くと、SQL Editorで入力した「Vibe プレミアムメカニカルキーボード」と「人間工学AIチェア」が完璧に表示されるはずです！

これが所謂フル���タック開発（Full-Stack Development）です！ フロントエンドの画面、バックエンドのAPI連携、クラウドデータベースへのアクセス。 以前なら情報工学科で3年間学ぶ必要があった内容が、このVibe Codingのワークフローを習得すれば、週末だけで全て完了します！

🚨 トラブルシューティング：Supabase常見エラーとデバッグガイド

Supabase連携で初心者が遭遇する主な問題：

1. RLS（Row Level Security）権限ブロック

Supabase初心者の最初の落とし穴！ AIが生成したデータ挿入（INSERT）コードを実行すると、以下のエラーが発生することがあります： new row violates row-level security policy for table "users" これはSupabaseがデフォルトでデータベース保護のため、外部（匿名ユーザー）からの書き込みを拒否するRLSファイアウォールを有効にしているためです。

👉 解決呪文：

「Supabaseでデータ書き込み時にRLSエラー：new row violates...が発生しています。これはテストプロジェクトなのでセキュリティ保護は不要です。SQL Editorで実行可能な、usersとordersテーブルのRLS機能を一時無効化、または全操作を許可（Allow all）にするSQLコマンドを��えてください。」 AIはすぐにALTER TABLE users DISABLE ROW LEVEL SECURITY;のような構文を提供します。これを実行すれば解決します。

2. 環境変数が見つからない（process.env.NEXT_PUBLIC...）

ターミナルでsupabaseUrl is requiredエラーが発生した場合。 100%の確率で.env.localファイルを作成し忘れているか、ファイル名を間違えている（例：.env.txt）、または環境変数を設定した後「開発サーバーを再起動し忘れている」ことが原因です。 ターミナルでCtrl + Cを押してサーバーを終了し、npm run devで再起動すれば、通常は奇跡的に正常に動作し始めます。

会員限定無料チュートリアル

このチャプターは登録会員限定の無料コンテンツです！ログインまたは登録してすぐにロックを解除してください。

今すぐログイン / 登録