supabase-developer

Supabase 開発スキル

概要

このスキルでは、オープンソースの Firebase 代替サービスである Supabase を使用して、本番環境に対応したアプリケーションを構築するための包括的な専門知識を提供します。データベース設計、認証、Row Level Security（RLS）、ファイルストレージ、Edge Functions、リアルタイムサブスクリプションを扱います。Edge Functions は現在、デフォルトで Deno 2.1 上で実行されます（2025年8月に全面展開）。ローカルプレビューは2025年3月から利用できます。

主な機能

データベースと PostgreSQL

• スキーマ設計：適切なリレーションシップとインデックスを備えた正規化テーブル
• マイグレーション：バージョン管理されたデータベースの変更
• クエリ：JOIN、CTE、集計を含む複雑なクエリ
• 関数：PostgreSQL のストアドプロシージャとトリガー
• 拡張機能：PostGIS、pg_vector、pgcrypto など

認証

• メール／パスワード：従来型の認証フロー
• マジックリンク：パスワード不要のメール認証
• OAuth プロバイダー：Google、GitHub、Discord、Twitter など
• 電話番号認証：SMS ベースの認証
• 多要素認証：TOTP と SMS による検証
• セッション管理：JWT トークンと更新処理

Row Level Security（RLS）

• ポリシー設計：安全なデータアクセスパターン
• ユーザーベースのアクセス制御：認証済みユーザーに紐づくポリシー
• ロールベースのアクセス制御：カスタムロールと権限
• 組織ベースのアクセス制御：マルチテナントのセキュリティパターン
• パフォーマンス：適切なインデックスを使用した RLS の最適化

ストレージ

• ファイルのアップロード：直接アップロードと再開可能なアップロード
• アクセス制御：バケットポリシーと RLS の統合
• 変換：画像のリサイズと最適化
• CDN：グローバルなコンテンツ配信
• 署名付き URL：一時的なアクセストークン

Edge Functions

• Deno 2.1 ランタイム：シームレスな npm インポート、ネイティブの TypeScript サポート、Web API との互換性、パフォーマンス向上を備えた TypeScript／JavaScript のエッジコンピューティング
• ダッシュボードエディター：迅速な更新やプロトタイピングに使える、ダッシュボード内の Edge Functions エディター
• AI アシスタント：関数コードを生成する組み込み AI アシスタント
• API ルート：カスタムバックエンドロジック
• Webhook：イベント駆動型の統合
• スケジュールタスク：Cron ベースの関数（pg_cron）
• サードパーティ API：外部サービスとの統合
• Docker なしでのデプロイ：Docker を利用できない場合は、supabase functions deploy --no-docker でデプロイできます

Realtime

• データベースの変更：INSERT、UPDATE、DELETE を監視
• ブロードキャスト：チャンネルへのメッセージの公開
• プレゼンス：オンラインユーザーと状態の追跡
• Postgres の変更：行レベルの変更サブスクリプション

実装パターン

プロジェクト構成

├── supabase/
│   ├── config.toml           # Project configuration
│   ├── migrations/           # Database migrations
│   │   ├── 20240101000000_initial_schema.sql
│   │   └── 20240102000000_add_profiles.sql
│   ├── functions/            # Edge Functions
│   │   ├── hello-world/
│   │   │   └── index.ts
│   │   └── _shared/          # Shared utilities
│   │       └── cors.ts
│   └── seed.sql              # Development seed data
├── src/
│   ├── lib/
│   │   └── supabase.ts       # Client initialization
│   ├── types/
│   │   └── database.types.ts # Generated types
│   └── ...
└── package.json

データベーススキーマの例

-- Users profile extension
create table public.profiles (
  id uuid references auth.users on delete cascade primary key,
  username text unique not null,
  full_name text,
  avatar_url text,
  created_at timestamptz default now() not null,
  updated_at timestamptz default now() not null
);

-- Enable RLS
alter table public.profiles enable row level security;

-- RLS Policies
create policy "Public profiles are viewable by everyone"
  on public.profiles for select
  using (true);

create policy "Users can update their own profile"
  on public.profiles for update
  using (auth.uid() = id);

-- Trigger for updated_at
create trigger handle_updated_at
  before update on public.profiles
  for each row execute function moddatetime(updated_at);

クライアントの初期化

// src/lib/supabase.ts
import { createClient } from '@supabase/supabase-js'
import type { Database } from '@/types/database.types'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient<Database>(
  supabaseUrl,
  supabaseAnonKey
)

認証パターン

// Sign up with email
const { data, error } = await supabase.auth.signUp({
  email: '[email protected]',
  password: 'secure-password',
  options: {
    data: {
      full_name: 'John Doe'
    }
  }
})

// Sign in with OAuth
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: `${window.location.origin}/auth/callback`
  }
})

// Get current user
const { data: { user } } = await supabase.auth.getUser()

// Listen to auth changes
supabase.auth.onAuthStateChange((event, session) => {
  if (event === 'SIGNED_IN') {
    // Handle sign in
  }
})

データベースクエリ

// Select with relations
const { data: posts, error } = await supabase
  .from('posts')
  .select(`
    id,
    title,
    content,
    author:profiles(username, avatar_url),
    comments(id, content, created_at)
  `)
  .eq('published', true)
  .order('created_at', { ascending: false })
  .range(0, 9)

// Insert with returning
const { data: post, error } = await supabase
  .from('posts')
  .insert({
    title: 'New Post',
    content: 'Content here',
    author_id: user.id
  })
  .select()
  .single()

// Update with filters
const { error } = await supabase
  .from('posts')
  .update({ published: true })
  .eq('id', postId)
  .eq('author_id', user.id)

// Delete with cascade
const { error } = await supabase
  .from('posts')
  .delete()
  .eq('id', postId)

ストレージ操作

// Upload file
const { data, error } = await supabase.storage
  .from('avatars')
  .upload(`${userId}/avatar.png`, file, {
    cacheControl: '3600',
    upsert: true
  })

// Get public URL
const { data: { publicUrl } } = supabase.storage
  .from('avatars')
  .getPublicUrl(`${userId}/avatar.png`)

// Download file
const { data, error } = await supabase.storage
  .from('documents')
  .download('report.pdf')

// Create signed URL
const { data, error } = await supabase.storage
  .from('private')
  .createSignedUrl('file.pdf', 3600)

リアルタイムサブスクリプション

// Subscribe to database changes
const channel = supabase
  .channel('posts-changes')
  .on(
    'postgres_changes',
    {
      event: '*',
      schema: 'public',
      table: 'posts',
      filter: 'published=eq.true'
    },
    (payload) => {
      console.log('Change:', payload)
    }
  )
  .subscribe()

// Broadcast messages
const channel = supabase.channel('room-1')
channel.subscribe((status) => {
  if (status === 'SUBSCRIBED') {
    channel.send({
      type: 'broadcast',
      event: 'cursor',
      payload: { x: 100, y: 200 }
    })
  }
})

// Presence tracking
const channel = supabase.channel('online-users')
channel.on('presence', { event: 'sync' }, () => {
  const state = channel.presenceState()
  console.log('Online users:', state)
})
channel.subscribe(async (status) => {
  if (status === 'SUBSCRIBED') {
    await channel.track({ user_id: user.id, online_at: new Date() })
  }
})

// Cleanup
supabase.removeChannel(channel)

Edge Function の例

// supabase/functions/send-email/index.ts (Deno 2.1)
import "jsr:@supabase/functions-js/edge-runtime.d.ts"
import { createClient } from 'npm:@supabase/supabase-js@2'

const corsHeaders = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
}

Deno.serve(async (req) => {
  if (req.method === 'OPTIONS') {
    return new Response('ok', { headers: corsHeaders })
  }

  try {
    const supabase = createClient(
      Deno.env.get('SUPABASE_URL')!,
      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
    )

    const { email, subject, body } = await req.json()

    // Your email sending logic here

    return new Response(
      JSON.stringify({ success: true }),
      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
    )
  } catch (error) {
    return new Response(
      JSON.stringify({ error: error.message }),
      { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
    )
  }
})

Edge Function 管理 API

CI/CD パイプラインや自動化されたワークフローで、プログラムによるデプロイや更新を行うには、Management API を使用します。

curl -X POST "https://api.supabase.com/v1/projects/{ref}/functions" \
  -H "Authorization: Bearer $SUPABASE_ACCESS_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name": "hello-world", "slug": "hello-world", "verify_jwt": true}'

ベストプラクティス

セキュリティ

• パブリックテーブルでは必ず RLS を有効にします
• サービスロールキーはサーバーサイドでのみ使用します
• Edge Functions で入力を検証します
• 適切な認証チェックを実装します
• パラメーター化クエリを使用します
• RLS ポリシーを定期的に確認します

パフォーマンス

• 頻繁にクエリされるカラムにインデックスを追加します
• select() を使用して、返されるカラムを制限します
• range() でページネーションを実装します
• 複雑な操作にはデータベース関数を使用します
• 本番環境ではコネクションプーリングを有効にします
• 件数のみを取得するクエリには head: true を使用します

アーキテクチャ

• マイグレーションは小さく、目的を絞ったものにします
• 副作用にはデータベーストリガーを使用します
• 適切なエラーハンドリングを実装します
• TypeScript 型を生成して使用します
• Edge Functions をドメインごとに整理します
• _shared/ の共有ユーティリティを使用します

開発ワークフロー

• ローカル開発には Supabase CLI を使用します。簡単なプロトタイプにはダッシュボードエディターと AI アシスタントを使用し、本番環境のワークフローには CLI または Management API を利用します
• デプロイ前に RLS ポリシーをテストします
• 一貫性のあるテストを行うため、データベースにシードデータを投入します
• スキーマを変更する際はブランチを使用します
• すべての RLS ポリシーを文書化します

スクリプト

このスキルには、scripts/ フォルダーに実行可能なスクリプトが含まれています。

プロジェクトのセットアップ

• setup-project.sh：設定を含む新しい Supabase プロジェクトを初期化します

  ./scripts/setup-project.sh <project-name>
  

• local-dev.sh：ローカルの Supabase 開発環境を起動します

  ./scripts/local-dev.sh [--reset]
  

データベース

• create-migration.sh：タイムスタンプ付きの新しいマイグレーションファイルを作成します

  ./scripts/create-migration.sh <migration-name>
  

• run-migrations.sh：保留中のマイグレーションを適用します

  ./scripts/run-migrations.sh [--local|--remote]
  

• seed-database.sh：テストデータをデータベースに投入します

  ./scripts/seed-database.sh
  

• generate-types.sh：データベーススキーマから TypeScript 型を生成します

  ./scripts/generate-types.sh [--output PATH]
  

• link-project.sh：ローカルプロジェクトをリモートの Supabase プロジェクトにリンクします

  ./scripts/link-project.sh <project-ref>
  

エッジ関数

• create-function.sh：定型コードを含む新しい Edge Function を作成します

  ./scripts/create-function.sh <function-name>
  

• deploy-function.sh：Edge Function を本番環境にデプロイします（Docker が利用できない場合は --no-docker を使用できます）

  ./scripts/deploy-function.sh <function-name> [--all]
  

• serve-functions.sh：テスト用に Edge Function をローカルで実行します

  ./scripts/serve-functions.sh
  

テストとセキュリティ

• setup-testing.sh：Vitest を使用したテスト環境をセットアップします

  ./scripts/setup-testing.sh
  

• run-tests.sh：さまざまなオプションでテストを実行します

  ./scripts/run-tests.sh [--watch] [--ui] [--coverage]
  

• test-rls.sh：異なるユーザーコンテキストで RLS ポリシーをテストします

  ./scripts/test-rls.sh <table-name>
  

• backup-database.sh：データベースのバックアップを作成します

  ./scripts/backup-database.sh [--output PATH]
  

テンプレート

このスキルには、templates/ フォルダーに本番環境対応のテンプレートが含まれています。

データベース

• schema-base.sql：profiles、posts、comments、RLS ポリシー、トリガー、インデックスを含む完全なベーススキーマ
• rls-policies.sql：包括的な RLS ポリシーパターンライブラリ（ユーザー所有、組織ベース、ロールベース、時間ベースなど、10 種類以上のパターン）

クライアントコード

• supabase-client.ts：ブラウザー、サーバー、管理者向けクライアントとユーティリティ関数を含む、型安全なクライアントの初期化
• auth-helpers.ts：メールアドレス／パスワード、OAuth、マジックリンク、電話認証、MFA、React フックを含む、認証ユーティリティ一式
• storage-helpers.ts：進捗状況の追跡、画像圧縮、バケット管理、React フックを含む、ファイルのアップロード／ダウンロード用ユーティリティ

エッジ関数

• edge-function-complete.ts：CORS、認証、検証、エラー処理、一般的なパターン（Webhook、スケジュールタスク、メール、外部 API、レート制限）を含む完全な Edge Function テンプレート

リソース

このスキルには、resources/ フォルダーに詳細なリファレンスガイドが含まれています。

• database-patterns.md：スキーマ設計、クエリ、マイグレーション、PostgreSQL の機能
• authentication.md：認証フロー、プロバイダー、セッション、MFA
• row-level-security.md：RLS ポリシーパターンとマルチテナントのセキュリティ
• storage.md：ファイルストレージ、アクセス制御、変換
• edge-functions.md：Deno 2.1 ランタイム、ダッシュボードエディター、AI アシスタント、Management API、デプロイ、ベストプラクティス
• realtime.md：サブスクリプション、ブロードキャスト、プレゼンス
• client-libraries.md：JavaScript、Python、その他のクライアントの使用方法

---

専門分野：Supabase フルスタック開発 バージョン：2.0 最終更新日：2026年5月