🚀

"Supabase vs Convex：初心者向けデータベース比較とセットアップ手順"

に公開
初心者向け
DB
tech

emoji: "🗄️"
type: "tech"
topics: ["supabase", "convex", "database", "typescript", "nextjs"]
published: true

SupabaseとConvex：データベース比較ガイド

初心者がBaaS（Backend as a Service）選択で迷わないための実践的な比較とセットアップ手順をまとめました。

特徴比較

項目 Supabase Convex
ベース技術 PostgreSQL TypeScript独自DB
データ操作 SQL 関数ベース
型安全性 手動設定必要 デフォルトで強力
リアルタイム 標準搭載 デフォルト
学習コスト SQL知識必要 TypeScript重視
無料枠 充実 充実
認証 統合済み 別途設定
ストレージ 統合済み 別途設定

開発手順

1. 環境準備（共通）

# Claude Code + Cursor環境
npm install -g @anthropic-ai/claude-code
# MCPの設定は各ツールの公式ドキュメント参照

2. GitHubリポジトリ作成
bashgh repo create test --public
git clone https://github.com/yourusername/test.git
cd test

Supabase版セットアップ
3. プロジェクト初期化
bashnpx create-next-app@latest . --typescript --tailwind --app
npm install @supabase/supabase-js
4. Supabase設定
typescript// lib/supabase.ts
import { createClient } from '@supabase/supabase-js'

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

export const supabase = createClient(supabaseUrl, supabaseKey)
bash# .env.local
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
5. Userテーブル作成
Supabaseダッシュボードで以下のSQLを実行：
sqlCREATE TABLE users (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  email VARCHAR UNIQUE NOT NULL,
  name VARCHAR NOT NULL,
  status VARCHAR DEFAULT 'active',
  created_at TIMESTAMP DEFAULT NOW()
);
6. データ操作例
typescript// lib/database.ts
import { supabase } from './supabase'

export async function createUser(email: string, name: string, status = 'active') {
  const { data, error } = await supabase
    .from('users')
    .insert({ email, name, status })
    .select()
  
  if (error) throw error
  return data
}

export async function getUsers() {
  const { data, error } = await supabase
    .from('users')
    .select('*')
  
  if (error) throw error
  return data
}

Convex版セットアップ
3. プロジェクト初期化
bashnpx create-next-app@latest . --typescript --tailwind --app
npm install convex
npx convex dev
4. スキーマ定義
typescript// convex/schema.ts
import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

export default defineSchema({
  users: defineTable({
    email: v.string(),
    name: v.string(),
    status: v.optional(v.string()),
  }).index("by_email", ["email"]),
});
5. データ操作関数
typescript// convex/users.ts
import { mutation, query } from "./_generated/server";
import { v } from "convex/values";

export const createUser = mutation({
  args: {
    email: v.string(),
    name: v.string(),
    status: v.optional(v.string()),
  },
  handler: async (ctx, args) => {
    return await ctx.db.insert("users", {
      email: args.email,
      name: args.name,
      status: args.status ?? "active",
    });
  },
});

export const getUsers = query({
  handler: async (ctx) => {
    return await ctx.db.query("users").collect();
  },
});
6. フロントエンド設定
typescript// app/ConvexClientProvider.tsx
"use client";
import { ConvexProvider, ConvexReactClient } from "convex/react";

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

export default function ConvexClientProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return <ConvexProvider client={convex}>{children}</ConvexProvider>;
}

使い分けの判断基準
Supabaseを選ぶべき場合

SQLに慣れている
PostgreSQLの豊富な機能を使いたい
認証・ストレージも一括で管理したい
既存のPostgreSQLデータがある

Convexを選ぶべき場合

TypeScript重視の開発
型安全性を最優先したい
リアルタイム機能をメインで使う
関数型的なアプローチが好み

どちらも初心者に優しく、リアルタイム機能が簡単に実装できます。プロジェクトの要件と開発チームのスキルセットに合わせて選択しましょう。

Discussion