Loading...
Supabase入門：Firebase代替のオープンソースBaaSを始めよう
Web開発フロントエンドNext.js

Supabase入門：Firebase代替のオープンソースBaaSを始めよう

PostgreSQL + 認証 + ストレージ + リアルタイムを無料から。SupabaseでフルスタックWebアプリのバックエンドを最速で構築する方法を紹介します。

2026-02-10約11分で読める

Supabaseとは

Supabaseは、オープンソースのFirebase代替として急成長しているBaaS（Backend as a Service）です。PostgreSQLをベースに、認証・ストレージ・リアルタイム機能・Edge Functionsを統合しています。

Firebaseとの最大の違いは、PostgreSQLがデータベースエンジンであること。NoSQLではなくRDBなので、SQLの知識がそのまま活かせます。

Supabaseが選ばれる理由

  • PostgreSQL：業界標準のRDB。SQLが使える
  • オープンソース：セルフホスティング可能、ベンダーロックインなし
  • 無料枠が充実：個人開発・プロトタイプに十分な容量
  • リアルタイム：データ変更を即座にクライアントに配信
  • Row Level Security：データベースレベルでアクセス制御

プロジェクトの作成

1. アカウント登録

Supabaseのダッシュボードにアクセスし、GitHubアカウントでサインアップします。

2. 新規プロジェクト

「New Project」からプロジェクトを作成します。

  • Name：プロジェクト名
  • Database Password：PostgreSQLのパスワード（安全なものを設定）
  • Region：Northeast Asia（東京）を選択

3. APIキーの確認

作成後、Settings → APIから以下を取得します。

  • Project URL：https://xxxxx.supabase.co
  • anon key：クライアント側で使う公開キー
  • service_role key：サーバー側で使う秘密キー（公開厳禁）

Next.jsとの連携

セットアップ

npm install @supabase/supabase-js

環境変数を設定します。

NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

クライアントを作成します。

// src/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!
)

データベース操作

テーブルの作成

SupabaseダッシュボードのSQL Editorから直接SQLを実行できます。

CREATE TABLE posts (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  content TEXT,
  author_id UUID REFERENCES auth.users(id),
  created_at TIMESTAMPTZ DEFAULT now()
);

データの取得

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

// 条件付き取得
const { data } = await supabase
  .from('posts')
  .select('*')
  .eq('author_id', userId)
  .limit(10)

データの挿入

const { data, error } = await supabase
  .from('posts')
  .insert({
    title: '新しい記事',
    content: '記事の内容...',
    author_id: user.id
  })
  .select()

データの更新と削除

// 更新
await supabase
  .from('posts')
  .update({ title: '更新後のタイトル' })
  .eq('id', postId)

// 削除
await supabase
  .from('posts')
  .delete()
  .eq('id', postId)

認証（Auth）

メール・パスワード認証

// サインアップ
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'
})

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

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

OAuth（Google, GitHub等）

const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: 'http://localhost:3000/auth/callback'
  }
})

ダッシュボードのAuthentication → ProvidersでOAuthプロバイダーの設定が必要です。

Row Level Security（RLS）

SupabaseのRLSは、データベースレベルでアクセス制御を実現する強力な機能です。

-- RLSを有効化
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

-- 誰でも閲覧可能
CREATE POLICY "公開記事は誰でも閲覧可" ON posts
  FOR SELECT USING (true);

-- 本人のみ作成・編集・削除可能
CREATE POLICY "本人のみ作成可" ON posts
  FOR INSERT WITH CHECK (auth.uid() = author_id);

CREATE POLICY "本人のみ編集可" ON posts
  FOR UPDATE USING (auth.uid() = author_id);

CREATE POLICY "本人のみ削除可" ON posts
  FOR DELETE USING (auth.uid() = author_id);

RLSを使えば、クライアントからの直接アクセスでも安全にデータを保護できます。

ストレージ

バケットの作成

ダッシュボードのStorage → New Bucketから作成します。

ファイルのアップロード

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

公開URLの取得

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

// data.publicUrl → https://xxxxx.supabase.co/storage/v1/object/public/avatars/...

リアルタイム機能

データベースの変更をリアルタイムでクライアントに配信できます。

// postsテーブルの変更をリアルタイム監視
const channel = supabase
  .channel('posts-changes')
  .on(
    'postgres_changes',
    { event: '*', schema: 'public', table: 'posts' },
    (payload) => {
      console.log('変更検知:', payload)
      // UIを更新
    }
  )
  .subscribe()

// 監視を停止
supabase.removeChannel(channel)

チャットアプリや通知機能の実装に最適です。

Edge Functions

サーバーサイドの処理が必要な場合、Edge Functionsを使えます。DenoベースのサーバーレスFunctionです。

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

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

supabase functions deploy hello

Firebase vs Supabase

| 特徴 | Supabase | Firebase | |------|----------|---------| | データベース | PostgreSQL（SQL） | Firestore（NoSQL） | | オープンソース | はい | いいえ | | セルフホスト | 可能 | 不可 | | リアルタイム | 対応 | 対応 | | 認証 | 対応 | 対応 | | ストレージ | 対応 | 対応 | | Functions | Deno | Node.js | | 無料枠 | 500MB DB, 1GB Storage | 1GB DB, 5GB Storage | | ベンダーロックイン | 低い | 高い |

Supabaseを選ぶべきケース

  • SQLに慣れている
  • リレーショナルデータを扱う
  • ベンダーロックインを避けたい
  • 将来的にセルフホストしたい

料金プラン

| プラン | 月額 | DB | ストレージ | |--------|------|-----|-----------| | Free | $0 | 500MB | 1GB | | Pro | $25 | 8GB | 100GB | | Team | $599 | 8GB | 100GB |

無料プランでも個人開発には十分です。

まとめ

Supabaseは、モダンなWebアプリのバックエンドを最速で構築できるプラットフォームです。

  • PostgreSQLベースでSQLがそのまま使える
  • 認証・ストレージ・リアルタイムをワンストップで提供
  • RLSでデータベースレベルのセキュリティを実現
  • オープンソースでベンダーロックインなし
  • 無料枠で個人開発・プロトタイプに最適

Next.jsとの相性も抜群で、フルスタックWebアプリの構築に最適な選択肢です。

次に読む

役に立ったら、関連記事とカテゴリ一覧もチェックしてください。

記事一覧を見るお問い合わせカテゴリを見る
PR
この記事が役に立ったら:

関連記事

v0 by Vercel入門：プロンプトからUIを生成するAIフロントエンド開発
AIフロントエンドNext.js

「ダッシュボードを作って」でプロダクション品質のUIが生成される。v0の始め方、効果的なプロンプト、実際のプロジェクトへの統合フローを解説。

2026-02-11

v0 by Vercel入門：プロンプトからUIを生成するAIフロントエンド開発

Tailwind CSS v4の新機能まとめ：Rust製エンジンで爆速化、CSSファーストへ大転換
CSSTailwindフロントエンド

設定ファイル不要、CSS内で完結する新しいTailwind。v4で何が変わり、どう移行すべきかを実践的に解説します。

2026-02-10

Tailwind CSS v4の新機能まとめ：Rust製エンジンで爆速化、CSSファーストへ大転換

Lovable入門：プロンプトだけでWebアプリを作るノーコード開発の最前線
AIノーコードWeb開発

「こんなアプリが欲しい」と伝えるだけでWebアプリが完成。Lovableの始め方からSupabase連携、実際のアプリ制作フローまで完全ガイド。

2026-02-08

Lovable入門：プロンプトだけでWebアプリを作るノーコード開発の最前線

Gemini APIで画像を解析し、Next.jsアプリに組み込む方法【2024年版】
Next.jsGemini APIVercel AI SDK

Google Gemini APIとVercel AI SDKを使って、画像から情報を抽出するアプリを構築しよう。

2025-07-27

Gemini APIで画像を解析し、Next.jsアプリに組み込む方法【2024年版】