【2026年版】Supabaseで始める個人開発バックエンド入門｜Firebase代替のオープンソースBaaSを徹底解説

広告

ConoHa WING

最大3,500円還元

詳しく見る →

Firebaseとの比較｜どちらを選ぶべきか

「SupabaseとFirebase、どちらを使えばいいか」は個人開発者がよく直面する問いです。両者の特性を整理しておきましょう。

Supabaseが有利なシーン

• 複雑なクエリが必要 — JOINや集計関数など、SQLの表現力がフルに使える
• ベンダーロックインを避けたい — PostgreSQLは標準技術。Supabaseから自前のPostgreSQLサーバーへ移行も容易
• 既存のSQLスキルを活かしたい — SQL経験者はSupabaseの学習コストが低い
• オープンソースにこだわる — セルフホストも可能。依存先をコントロールしたい開発者に向く
• AIアプリを作る — pgvectorによるベクトル検索がネイティブに使える

Firebaseが有利なシーン

• Googleエコシステムとの深い連携 — Firebase Hosting、Cloud Functionsとの統合が必要な場合
• モバイルアプリ（Android）が主戦場 — Google PlayとのFirebase Analytics連携など
• NoSQLのドキュメント型が最適 — 非構造化・ネストの深いデータを扱う場合

2026年時点では、新規個人開発プロジェクトのバックエンドとしてSupabaseを選ぶ理由の方が多くなっています。特にAI機能を組み込む場合、pgvectorの存在は大きなアドバンテージです。

実践：Supabaseプロジェクトのセットアップ

ここからは実際に手を動かしてみましょう。フロントエンドはNext.js（React）を想定していますが、Supabaseのクライアントライブラリは主要フレームワーク（Vue、SvelteKit、Nuxt等）に対応しています。

ステップ1：プロジェクト作成

まず supabase.com でアカウントを作成し、新規プロジェクトを作成します。プロジェクトを作成したら、ダッシュボードの「Settings > API」からURLとanon keyをコピーしてください。

ステップ2：クライアントライブラリのインストール

npm install @supabase/supabase-js

Next.jsプロジェクトなら、さらにSSR対応のパッケージを追加します。

npm install @supabase/ssr

ステップ3：クライアントの初期化

// lib/supabase.ts
import { createClient } from '@supabase/supabase-js'

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

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

環境変数は .env.local に記載します。

NEXT_PUBLIC_SUPABASE_URL=https://xxxxxxxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

認証（Auth）を実装する

Supabaseの認証機能は、数行のコードでメール/パスワード認証とOAuthを実装できます。

メール/パスワード認証

// サインアップ
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'securepassword123',
})

// サインイン
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'securepassword123',
})

// サインアウト
await supabase.auth.signOut()

// 現在のユーザー取得
const { data: { user } } = await supabase.auth.getUser()

GitHub OAuth（ワンクリック認証）

// GitHubでサインイン
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'github',
  options: {
    redirectTo: 'https://your-app.com/auth/callback'
  }
})

SupabaseダッシュボードでGitHub OAuth AppのClient IDとSecretを設定するだけで動きます。GoogleやDiscordも同様の手順で追加できます。

セッション管理の注意点

Next.js App Routerを使う場合、サーバーコンポーネントでのセッション管理には @supabase/ssr を使うことが推奨されています。Cookieベースのセッション管理で、セキュリティと使い勝手のバランスが取れます。

データベース操作｜SQL＋型安全なクライアント

SupabaseのデータベースはPostgreSQLなので、ダッシュボードのSQLエディタで直接テーブルを作成できます。

テーブル作成（SQL）

-- タスク管理アプリの例
CREATE TABLE tasks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  completed BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Row Level Security（RLS）を有効化
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

-- 自分のタスクだけ読み書きできるポリシー
CREATE POLICY "Users can manage their own tasks"
  ON tasks
  FOR ALL
  USING (auth.uid() = user_id)
  WITH CHECK (auth.uid() = user_id);

Row Level Security（RLS）は必ず有効化してください。 RLSなしでは、anon keyを知っている誰でも全データにアクセスできてしまいます。

JavaScriptからのCRUD操作

// データ取得
const { data: tasks, error } = await supabase
  .from('tasks')
  .select('*')
  .order('created_at', { ascending: false })

// データ追加
const { data, error } = await supabase
  .from('tasks')
  .insert({ title: '新しいタスク', user_id: user.id })
  .select()
  .single()

// データ更新
const { error } = await supabase
  .from('tasks')
  .update({ completed: true })
  .eq('id', taskId)

// データ削除
const { error } = await supabase
  .from('tasks')
  .delete()
  .eq('id', taskId)

型安全なクエリ：supabase-gen-types

SupabaseにはDBスキーマからTypeScript型を自動生成するCLIが用意されています。

npx supabase gen types typescript --project-id "your-project-id" > types/supabase.ts

生成された型をクライアントに渡すことで、テーブル名のタイポやカラムの型ミスをコンパイル時に検出できます。個人開発でも型安全なコードを維持しやすくなります。

広告

マネーフォワード

最大2,000円還元

詳しく見る →

リアルタイム機能｜PostgreSQLの変更をライブ配信

Supabaseのリアルタイム機能は、PostgreSQLのChange Data Capture（CDC）をWebSocketで配信する仕組みです。他のユーザーの操作をリアルタイムに反映するコラボ系アプリや、モニタリングダッシュボードに最適です。

// タスクの変更をリアルタイム受信
const channel = supabase
  .channel('tasks-changes')
  .on(
    'postgres_changes',
    {
      event: '*', // INSERT, UPDATE, DELETE すべて
      schema: 'public',
      table: 'tasks',
      filter: `user_id=eq.${userId}`,
    },
    (payload) => {
      console.log('Change received!', payload)
      // UIを更新する処理
      refreshTasks()
    }
  )
  .subscribe()

// クリーンアップ
supabase.removeChannel(channel)

フィルタ条件を指定することで、関係するデータの変更だけを受信できます。全テーブルの変更をブロードキャストするとパフォーマンスに影響するため、できるだけ絞り込むのがポイントです。

Edge Functions｜サーバーサイドロジックをDenoで

Edge Functionsは、Denoで書くサーバーレス関数です。Webhookのエンドポイント、決済処理、外部APIの呼び出しなど、クライアントに漏らしたくないロジックをここに集約します。

Edge Functionの作成

# Supabase CLIをインストール
npm install -g supabase

# ローカル初期化
supabase init

# Edge Functionを作成
supabase functions new send-welcome-email

作成された supabase/functions/send-welcome-email/index.ts を編集します。

import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'

serve(async (req) => {
  const { userId, email } = await req.json()

  // ResendやSendGridでウェルカムメール送信
  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@yourapp.com',
      to: email,
      subject: 'ご登録ありがとうございます！',
      html: `
ようこそ！アカウントの準備ができました。
`,
    }),
  })

  return new Response(JSON.stringify({ success: true }), {
    headers: { 'Content-Type': 'application/json' },
  })
})

AuthのWebhookと組み合わせる

SupabaseのAuth Webhookを使えば、ユーザー登録時に自動でEdge Functionを呼び出す設定が可能です。ダッシュボードの「Auth > Hooks」で、「After Sign Up」イベントにEdge FunctionのURLを登録するだけです。

ストレージ｜ファイルアップロードとCDN配信

Supabaseのストレージは、S3互換のオブジェクトストレージです。画像・動画・PDFのアップロードとCDN配信が簡単に実装できます。

// 画像をアップロード
const file = event.target.files[0]
const { data, error } = await supabase.storage
  .from('avatars') // バケット名
  .upload(`${userId}/avatar.png`, file, {
    contentType: 'image/png',
    upsert: true, // 上書きを許可
  })

// 公開URLを取得
const { data: { publicUrl } } = supabase.storage
  .from('avatars')
  .getPublicUrl(`${userId}/avatar.png`)

画像変換（リサイズ・クロップ・フォーマット変換）も、URLパラメータで指定できます。

// 200x200にリサイズしたサムネイルURL
const { data: { publicUrl } } = supabase.storage
  .from('avatars')
  .getPublicUrl(`${userId}/avatar.png`, {
    transform: {
      width: 200,
      height: 200,
      resize: 'cover',
    }
  })

pgvector｜AIアプリのベクトル検索

Supabaseは pgvector 拡張をネイティブサポートしており、PostgreSQL内でベクトル検索ができます。OpenAIのEmbedding APIやローカルLLMで生成したベクトルを保存し、類似検索でRAGパイプラインを構築するのに最適です。

-- pgvector拡張の有効化
CREATE EXTENSION IF NOT EXISTS vector;

-- ドキュメントテーブル（1536次元はtext-embedding-3-smallの場合）
CREATE TABLE documents (
  id BIGSERIAL PRIMARY KEY,
  content TEXT,
  embedding VECTOR(1536)
);

-- コサイン類似度で近い順に取得する関数
CREATE OR REPLACE FUNCTION match_documents (
  query_embedding VECTOR(1536),
  match_count INT DEFAULT 5
)
RETURNS TABLE (id BIGINT, content TEXT, similarity FLOAT)
LANGUAGE SQL STABLE
AS $$
  SELECT id, content, 1 - (embedding <=> query_embedding) AS similarity
  FROM documents
  ORDER BY embedding <=> query_embedding
  LIMIT match_count;
$$;

Webページの要約機能（例えば AI要約ツール）を作る場合、ページ内容のベクトル化→Supabaseに保存→類似ページの推薦という構成が数十行で実現できます。

個人開発での実践的な活用パターン

Supabaseを使った個人開発プロダクトのアーキテクチャ例を紹介します。

パターン1：Webサービス監視ダッシュボード

複数のWebサービスの死活監視を行うツールは、Supabaseと相性がよいユースケースです。

• DB — サービスURL・チェック間隔・アラート設定をPostgreSQLで管理
• Edge Functions — 定期的にURLにリクエストし、ステータスをDBに記録
• Realtime — ダッシュボードの死活状態をリアルタイム更新
• Auth — チームメンバーをプロジェクトに招待

Webサービスの監視という点では、PagePulse（Webページ変更監視ツール）のようなサービスと組み合わせることで、監視対象ページの変更検知も自動化できます。

パターン2：ステータスページの自動化

サービスのインシデント情報を公開するステータスページも、Sup abaseで効率よく構築できます。SupabaseのRealtimeでインシデント情報の更新を即座にページへ反映し、Auth機能で運営チームだけが編集できる仕組みを作れます。ステータスページは StatusCraft（ステータスページ作成ツール）のような専用ツールと組み合わせるのも効果的です。

パターン3：AI要約・検索サービス

pgvectorを活用したセマンティック検索エンジンは、Supabaseの得意分野です。ユーザーがURLを入力すると内容を取得→OpenAI APIでベクトル化→Supabaseに保存→類似コンテンツを推薦する流れは、QuickSummary（AI要約Chrome拡張）のようなツールのバックエンドとしても応用できます。

セキュリティの注意事項

Supabaseを使う上で、特に重要なセキュリティポイントをまとめます。

必ずRow Level Security（RLS）を設定する

最重要事項です。テーブルを作成したら必ずRLSを有効化し、適切なポリシーを設定してください。RLSなしのテーブルは、anon keyさえあれば誰でもアクセスできます。

-- すべてのテーブルでRLSを有効化（習慣にする）
ALTER TABLE your_table ENABLE ROW LEVEL SECURITY;

Service Role Keyの扱いに注意

SupabaseにはRLSをバイパスできる service_role キーがあります。このキーは絶対にクライアントサイドに含めてはいけません。Edge FunctionsやサーバーサイドのAPIルートのみで使用し、環境変数に格納してください。

認証エンドポイントのレート制限

SupabaseのAuthにはデフォルトでレート制限が設けられていますが、ダッシュボードの「Auth > Rate Limits」で設定を確認・調整できます。ブルートフォース攻撃対策として、メールサインアップ・パスワードリセットの制限値を適切に設定しましょう。

まとめ｜Supabaseで個人開発のバックエンドを爆速構築

Supabaseは、個人開発者がバックエンドに費やす時間を大幅に削減しながら、プロダクションレベルの機能を提供します。

• ✅ PostgreSQLベース — SQLの表現力で複雑なクエリも対応。ベンダーロックインなし
• ✅ 認証・DB・ストレージが一体化 — 管理先を分散させずに開発に集中できる
• ✅ リアルタイム対応 — コラボ系・モニタリング系アプリのリアルタイム機能が簡単に実装
• ✅ pgvectorでAI対応 — ベクトル検索・RAGパイプラインをPostgreSQL内で完結
• ✅ 充実した無料枠 — 月50,000アクティブユーザーまで無料。個人開発の初期フェーズは課金不要
• ✅ 型安全なクライアント — スキーマから型を自動生成し、TypeScriptとの親和性が高い

Firebase代替として検討している方、PostgreSQLに移行したい方、AIアプリのバックエンドを探している方——どのシーンでもSupabaseは有力な選択肢です。まずは無料プロジェクトを作成して、ダッシュボードの使い心地を体験してみてください。

バックエンドを素早く立ち上げて、プロダクトの本質的な価値の構築に集中する。それが2026年の個人開発の正しいアプローチです。