Claude Code Media
103,949中級

Claude Code × Supabase 完全ガイド|MCP連携・スキーマ設計・RLS自動生成【2026年版】

Claude Code と Supabase を連携する方法を完全解説。Supabase MCP サーバーのセットアップから、スキーマ設計・RLS ポリシー・Edge Functions の自動生成まで実装コード付きで紹介します。バックエンド開発を AI で自動化するワークフローも紹介。

By Claude Code Media 編集部Reviewed by Claude Code Media 編集部

Claude Code と Supabase を組み合わせると、バックエンドの開発速度が劇的に変わります。Supabase は PostgreSQL ベースのオープンソース BaaS(Backend as a Service)で、Auth・Database・Storage・Edge Functions をワンセットで提供します。Claude Code はそのすべてを MCP 経由で直接操作し、RLS ポリシーや Edge Functions を自動生成できます。

本記事では「Claude Code × Supabase」の連携セットアップから、実務で使える自動化ワークフローまでを実装コード付きで解説します。

1. Claude Code × Supabase でできること

Claude Code と Supabase を連携させると、従来は手動で行っていた多くのバックエンド作業を自動化できます。

1-1. MCP 経由でのデータベース操作

Supabase には公式の MCP サーバーが用意されており、Claude Code から直接テーブルの CRUD・マイグレーション・RLS 設定などを操作できます(参考: Supabase 公式ドキュメント MCP ガイド)。Claude がスキーマを把握したうえで SQL を生成するため、カラム名の誤りやリレーション漏れが大幅に減ります。

1-2. RLS ポリシーの自動生成

Row Level Security(RLS)は Supabase のセキュリティの要ですが、正しく書くのが難しい部分でもあります。Claude Code に「このテーブルは認証ユーザーだけが自分のデータを読み書きできるようにして」と指示するだけで、適切な RLS ポリシーが自動生成されます。

1-3. Edge Functions・TypeScript 型の生成

Supabase Edge Functions(Deno ベース)と TypeScript の型定義も Claude Code が自動で生成します。supabase gen types typescript 相当の型出力を CLAUDE.md に組み込んでおけば、型安全なクライアントコードも自動補完されます。

1-4. 実装できる主なタスク一覧

タスクClaude Code での指示例
テーブル設計「ユーザー・投稿・コメントの3テーブルを設計して」
マイグレーション作成posts テーブルに published_at カラムを追加するマイグレーションを書いて」
RLS ポリシー「各ユーザーが自分のデータのみ操作できる RLS を設定して」
Edge Functions「メール送信の Edge Function を Resend API で実装して」
TypeScript 型「Supabase のスキーマから型定義ファイルを生成して」

2. Supabase MCP サーバーのセットアップ

Claude Code に Supabase を認識させるために、MCP サーバーを設定します。

2-1. 前提条件

  • Supabase アカウントとプロジェクトが作成済みであること
  • Claude Code がインストール済みであること(→ Claude Code インストール方法 を参照)
  • Node.js 18 以上がインストールされていること

2-2. MCP 設定ファイルの作成

プロジェクトルートに .claude/settings.json を作成し、Supabase MCP サーバーを追加します。

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": [
        "-y",
        "@supabase/mcp-server-supabase@latest",
        "--supabase-url",
        "https://<あなたのプロジェクトID>.supabase.co",
        "--supabase-service-role-key",
        "<サービスロールキー>"
      ]
    }
  }
}

セキュリティ注意: supabase-service-role-key は強力な権限を持つキーです。.env.local に分離し、環境変数経由で参照することを推奨します。.env.local は必ず .gitignore に追加してください。

環境変数を使った安全な設定例:

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@supabase/mcp-server-supabase@latest"],
      "env": {
        "SUPABASE_URL": "${SUPABASE_URL}",
        "SUPABASE_SERVICE_ROLE_KEY": "${SUPABASE_SERVICE_ROLE_KEY}"
      }
    }
  }
}

2-3. 動作確認

Claude Code を起動して以下のように確認します。

claude

Claude Code のプロンプトで:

Supabase のテーブル一覧を取得して

上記を入力し、あなたのプロジェクトのテーブルが一覧表示されれば MCP の接続成功です。

2-4. CLAUDE.md にプロジェクトコンテキストを記述する

MCP 接続に加えて、CLAUDE.md にプロジェクト固有のスキーマ情報を記述しておくと Claude の精度が上がります。

# Supabase プロジェクト情報

## データベーススキーマ概要
- `profiles`: ユーザー拡張情報(auth.users と 1:1 紐付け)
- `posts`: ブログ投稿(author_id → profiles.id)
- `comments`: コメント(post_id → posts.id, author_id → profiles.id)

## RLS 基本方針
- 読み取り: 認証済みユーザーなら全員可
- 書き込み: 自分の行(user_id = auth.uid())のみ

## 使用テーブルの命名規則
- スネークケース(例: created_at, updated_at)
- 主キーはすべて UUID(gen_random_uuid() デフォルト)

3. 実践ワークフロー:DB設計からAPI実装まで

実際の開発フローを追いながら、Claude Code × Supabase の具体的な使い方を紹介します。

3-1. スキーマ設計をゼロから依頼する

新規プロジェクトでは、Claude Code にビジネス要件を伝えるだけでスキーマ設計ができます。

指示例:

ECサイトを作りたい。
ユーザー・商品・注文・注文明細の4テーブルが必要。
Supabase の PostgreSQL で、UUID 主キー・RLS あり・タイムスタンプ付きで設計して。
マイグレーションファイルも作成してください。

Claude Code はスキーマ設計、マイグレーション SQL、RLS ポリシーまで一括で生成します。

-- Claude Code が生成するマイグレーション例
CREATE TABLE products (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  price INTEGER NOT NULL,  -- 円単位(小数点以下なし)
  stock INTEGER NOT NULL DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT now(),
  updated_at TIMESTAMPTZ DEFAULT now()
);

ALTER TABLE products ENABLE ROW LEVEL SECURITY;

-- 誰でも商品を閲覧可能
CREATE POLICY "products_select" ON products
  FOR SELECT USING (true);

-- 管理者のみ商品を追加・編集可能
CREATE POLICY "products_insert_admin" ON products
  FOR INSERT WITH CHECK (auth.jwt() ->> 'role' = 'admin');

3-2. Edge Functions を自動生成する

Supabase の Edge Functions は Deno で動作するサーバーレス関数です。Claude Code に「〇〇する Edge Function を作って」と依頼するだけで、型安全な実装が生成されます。

指示例:

注文確定時にメール通知を送る Edge Function を Resend API で実装して。
注文IDを受け取り、ユーザーのメールアドレスを products テーブルから引いて送信する構成で。
// Claude Code が生成する Edge Function 例(supabase/functions/order-notification/index.ts)
import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
import { createClient } from "https://esm.sh/@supabase/supabase-js@2";

serve(async (req) => {
  const { orderId } = await req.json();
  
  const supabase = createClient(
    Deno.env.get("SUPABASE_URL")!,
    Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!
  );

  // 注文情報とユーザー情報を取得
  const { data: order } = await supabase
    .from("orders")
    .select("*, profiles(email, full_name)")
    .eq("id", orderId)
    .single();

  if (!order) {
    return new Response(JSON.stringify({ error: "Order not found" }), {
      status: 404,
    });
  }

  // Resend でメール送信
  const res = await fetch("https://api.resend.com/emails", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${Deno.env.get("RESEND_API_KEY")}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      from: "noreply@example.com",
      to: order.profiles.email,
      subject: `ご注文確定のお知らせ(注文番号: ${orderId})`,
      html: `<p>${order.profiles.full_name} 様、ご注文ありがとうございます。</p>`,
    }),
  });

  return new Response(JSON.stringify({ success: res.ok }), { status: 200 });
});

3-3. TypeScript 型定義を自動更新する

スキーマ変更のたびに型定義ファイルを手動更新するのは手間がかかります。Claude Code に以下のように依頼すると、Hooks を使った自動更新ワークフローを構築できます。

Claude Code への指示:

スキーマを変更するたびに supabase gen types typescript が自動実行されるように
PostToolUse Hooks を設定して。
型定義は src/types/supabase.ts に出力する構成で。

Claude Code が生成する ~/.claude/hooks/post-supabase-migration.sh:

#!/bin/bash
# Supabase マイグレーション実行後に型定義を自動更新
if [[ "$TOOL_NAME" == "Bash" ]] && echo "$TOOL_OUTPUT" | grep -q "Migration"; then
  npx supabase gen types typescript \
    --project-id "$SUPABASE_PROJECT_ID" \
    > src/types/supabase.ts
  echo "✅ Supabase 型定義を更新しました"
fi

4. Claude Code で Supabase 開発を加速する Tips

4-1. プロジェクトの全スキーマを最初に読み込ませる

Claude Code セッションの冒頭に「supabase/migrations/ フォルダを読んでスキーマを把握して」と伝えると、その後の指示精度が上がります。大規模プロジェクトでは CLAUDE.md にスキーマサマリーを記述する方が効率的です。

4-2. RLS のデバッグを Claude Code に任せる

RLS が意図どおり動かないとき、「この RLS ポリシーで SELECT が失敗する理由を調査して」と伝えると、Claude Code が SET ROLE authenticated; SELECT ... などのデバッグクエリを実行しながら原因を特定してくれます。

4-3. パフォーマンス改善のインデックス提案

EXPLAIN ANALYZE の出力を Claude Code に貼り付けると、どのインデックスを追加すべきかを具体的な SQL 付きで提案してくれます。Supabase のダッシュボードにある「Performance Advisor」との組み合わせも効果的です(参考: Supabase クエリ最適化ガイド)。

4-4. Supabase + Next.js の連携コードを一括生成する

@supabase/ssr パッケージを使った Next.js 15 / App Router の認証フローも Claude Code が一括生成できます。

Next.js 15 App Router + Supabase Auth のログイン/サインアップ/セッション管理を実装して。
@supabase/ssr を使い、middleware.ts でセッションリフレッシュも入れること。

この一言で、middleware・Server Component・Client Component の全セットが生成されます。

5. よくある質問(FAQ)

Q1. Supabase の無料プランで Claude Code MCP は使えますか?

はい、MCP サーバーは Supabase のプランに関わらず利用できます。無料プランは PostgreSQL データベース(500MB)・Auth・Storage(1GB)が含まれます。個人開発や小規模プロジェクトなら無料プランで十分です。

Q2. anon キーと service_role キーのどちらを MCP に使うべきですか?

ローカル開発や管理操作を行う MCP サーバーには service_role キーを使います。ただし本番環境のフロントエンドコードには絶対に使用しないでください。クライアントサイドでは anon キーを使い、RLS でアクセス制御します。

Q3. Claude Code が生成した SQL を本番に適用するときの注意点は?

Claude Code が生成したマイグレーション SQL は、必ず supabase db diff で差分確認してから適用してください。本番環境への適用は CI/CD パイプライン経由(GitHub Actions + supabase db push)で行うと安全です。

Q4. MCP 接続がうまくいかない場合は?

まず npx @supabase/mcp-server-supabase@latest を単体で実行してエラーを確認してください。よくある原因は Node.js のバージョン不足(18 未満)・環境変数の設定漏れ・Supabase プロジェクトの URL 誤りです。


まとめ:Claude Code × Supabase でバックエンド開発を自動化しよう

Claude Code と Supabase を組み合わせることで、以下が実現できます。

  • MCP 経由でテーブル CRUD・マイグレーション・RLS 設定を自動化
  • CLAUDE.md にスキーマコンテキストを記述して生成精度を向上
  • Edge FunctionsTypeScript 型定義 をワンライナーで自動生成
  • Hooks でスキーマ変更時の型更新を自動化

Claude Code の全体像については Claude Code 完全ガイド を、MCP の詳細については Claude Code × MCP 完全ガイド をあわせてご覧ください。

関連記事

この記事の著者

claude-code-media 編集部Claude Code 専門編集チーム

Claude Code の非エンジニア向け業務効率化メディア『claude-code-lab.jp』を運営。フリーランス・中小企業・個人開発者向けに、実装テンプレ・業務自動化テクニック・Vibe Coding 入門を配信。

Claude Code 完全ガイドVibe CodingAI 業務効率化非エンジニア向け AI 教育MCP(Model Context Protocol)
ByClaude Code Media 編集部

AI支援で執筆 — 本記事は Claude Code エージェントによる執筆支援を受け、編集部が事実確認・編集を行っています。 数値・引用元は記事更新日時点で確認済みですが、最新情報は各公式サイトでご確認ください。