【2026年最新】Supabase入門｜Firebaseの代替として注目のBaaS

「バックエンドを簡単に構築したい」「Firebaseの代わりになるサービスを探している」

そんな方におすすめなのがSupabaseです。

Supabaseは「オープンソース版Firebase」とも呼ばれるBaaS（Backend as a Service）。PostgreSQLベースのデータベース、認証、ストレージ、リアルタイム機能を無料から使えます。

この記事では、Supabaseの基本から実践的な使い方まで詳しく解説します。

Supabaseとは？

Supabaseは、PostgreSQLをベースにしたオープンソースのBaaSプラットフォームです。

Firebaseとの比較

機能	Supabase	Firebase
データベース	PostgreSQL（SQL）	Firestore（NoSQL）
リアルタイム	✓	✓
認証	✓	✓
ストレージ	✓	✓
Edge Functions	✓	Cloud Functions
オープンソース	✓	×
セルフホスト	可能	不可

Supabaseを選ぶ理由

SQLの知識が活かせる: PostgreSQLなので、SQLがそのまま使える
オープンソース: ベンダーロックインを避けられる
移行しやすい: 標準的なPostgreSQLなので他サービスへの移行も容易
無料枠が充実: 個人開発には十分な無料プラン

Supabaseの料金プラン

無料プラン（Free）

項目	無料プラン
データベース	500MB
ストレージ	1GB
エグレス（帯域幅）	5GB/月
MAU（月間認証ユーザー）	50,000
Edge Functions	月50万呼び出し
Realtime	200同時接続、月200万メッセージ
プロジェクト数	2つまで

注意: 1週間非アクティブなプロジェクトは一時停止されます（再開可能）。

有料プラン

プラン	月額料金	主な内容
Pro	$25/月（$10コンピュートクレジット込）	8GB DB、100GBストレージ、月10万MAU、月250GBエグレス、月200万Edge Functions、Realtime 500同時接続、7日間バックアップ
Team	$599/月（$10コンピュートクレジット込）	SOC2認証、SSO（50MAUまで）、14日間バックアップ、28日間ログ保持、メールサポート+SLA
Enterprise	要問い合わせ	HIPAA対応、稼働時間SLA、BYOクラウド、24/7プレミアムサポート、指定サポートマネージャー

ポイント: Proプランには$10のコンピュートクレジットが含まれるため、実質$15で8GBデータベース、100GBストレージが使える。月5万MAU（認証ユーザー）まで無料は非常に太っ腹。

Supabaseの始め方

Step 1: アカウント作成

Supabase公式サイトにアクセス
「Start your project」をクリック
GitHubでログイン
新しいプロジェクトを作成

Step 2: プロジェクト設定

Project name: my-app
Database Password: 強力なパスワードを設定
Region: Northeast Asia (Tokyo)

Step 3: 接続情報を取得

プロジェクトダッシュボードから以下を取得：

SUPABASE_URL=https://xxxxx.supabase.co
SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIs...

データベース操作

テーブル作成

-- SupabaseのSQL Editorで実行
CREATE TABLE posts (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  content TEXT,
  author_id UUID REFERENCES auth.users(id),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

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

JavaScript SDKでのCRUD

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.SUPABASE_URL,
  process.env.SUPABASE_ANON_KEY
);

// 取得（SELECT）
const { data, error } = await supabase
  .from('posts')
  .select('*')
  .order('created_at', { ascending: false });

// 作成（INSERT）
const { data, error } = await supabase
  .from('posts')
  .insert({ title: 'Hello', content: 'World' });

// 更新（UPDATE）
const { data, error } = await supabase
  .from('posts')
  .update({ title: 'Updated' })
  .eq('id', 1);

// 削除（DELETE）
const { data, error } = await supabase
  .from('posts')
  .delete()
  .eq('id', 1);

認証（Auth）

Supabaseは多様な認証方法に対応しています。

対応認証プロバイダー

メール/パスワード
マジックリンク（パスワードレス）
OAuth: Google, GitHub, Twitter, Discord, Apple 等
電話番号（SMS）

実装例

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

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

// OAuthログイン（GitHub）
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'github',
});

// ログアウト
await supabase.auth.signOut();

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

ストレージ

ファイルのアップロード・管理ができます。

バケット作成

Supabaseダッシュボードで「Storage」→「New bucket」から作成。

ファイル操作

// アップロード
const { data, error } = await supabase.storage
  .from('avatars')
  .upload('public/avatar1.png', file);

// 公開URLを取得
const { data } = supabase.storage
  .from('avatars')
  .getPublicUrl('public/avatar1.png');

// ダウンロード
const { data, error } = await supabase.storage
  .from('avatars')
  .download('public/avatar1.png');

// 削除
const { error } = await supabase.storage
  .from('avatars')
  .remove(['public/avatar1.png']);

リアルタイム機能

データベースの変更をリアルタイムで監視できます。

// 変更を購読
const channel = supabase
  .channel('posts-changes')
  .on(
    'postgres_changes',
    { event: '*', schema: 'public', table: 'posts' },
    (payload) => {
      console.log('Change received!', payload);
    }
  )
  .subscribe();

// 購読解除
supabase.removeChannel(channel);

活用例

チャットアプリ
リアルタイム通知
ダッシュボードの自動更新
共同編集機能

Edge Functions

サーバーレス関数を実行できます。

作成方法

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

# 関数を作成
supabase functions new hello-world

関数の実装

// supabase/functions/hello-world/index.ts
import { serve } from "https://deno.land/std@0.168.0/http/server.ts";

serve(async (req) => {
  const { name } = await req.json();
  const data = {
    message: `Hello ${name}!`,
  };
  return new Response(JSON.stringify(data), {
    headers: { "Content-Type": "application/json" },
  });
});

デプロイ

supabase functions deploy hello-world

Row Level Security（RLS）

Supabaseの重要なセキュリティ機能です。

RLSポリシーの例

-- ユーザーは自分の投稿のみ閲覧可能
CREATE POLICY "Users can view own posts"
ON posts FOR SELECT
USING (auth.uid() = author_id);

-- ユーザーは自分の投稿のみ作成可能
CREATE POLICY "Users can create own posts"
ON posts FOR INSERT
WITH CHECK (auth.uid() = author_id);

-- ユーザーは自分の投稿のみ更新可能
CREATE POLICY "Users can update own posts"
ON posts FOR UPDATE
USING (auth.uid() = author_id);

Next.js + Supabaseの構成例

環境変数

# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOi...

クライアント設定

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

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

認証フック

// hooks/useAuth.ts
import { useEffect, useState } from 'react';
import { supabase } from '@/lib/supabase';
import type { User } from '@supabase/supabase-js';

export function useAuth() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    supabase.auth.getUser().then(({ data: { user } }) => {
      setUser(user);
      setLoading(false);
    });

    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (event, session) => {
        setUser(session?.user ?? null);
      }
    );

    return () => subscription.unsubscribe();
  }, []);

  return { user, loading };
}

まとめ

Supabaseは、モダンなWebアプリケーションのバックエンドとして最適なBaaSです。

Supabaseがおすすめな人

SQLの知識を活かしてバックエンドを構築したい
Firebaseの代替を探している
オープンソースを好む
個人開発で無料から始めたい

注意点

無料プランは7日間非アクティブで一時停止
複雑なクエリはパフォーマンスに注意