Supabaseの始め方 プロジェクト作成から基本操作まで

結論

Supabaseのセットアップはアカウント作成からデータの読み書きまで30分で完了する。無料プランで始められ、個人開発に必要なデータベース・認証・ファイルストレージが一式揃っている。SQLが書ける人なら、FirebaseよりSupabaseの方が直感的に使いやすい。

Supabaseとは

SupabaseはオープンソースのBaaS（Backend as a Service）で、PostgreSQLをベースにしている。Firebaseの対抗馬として登場し、主要な機能は次の通りだ。

機能	概要
Database	PostgreSQL。GUIで操作可能
Auth	メール・SNS・マジックリンクによる認証
Storage	ファイルのアップロード・配信
Edge Functions	Deno製のサーバーサイド関数
Realtime	データ変更のリアルタイム購読

個人開発でよく使うのは Database と Auth と Storage の3つだ。

アカウント作成とプロジェクトの作成

1. アカウント作成

supabase.comにアクセスし、「Start your project」を選ぶ。GitHubアカウントでサインインすると手間が省ける。

2. プロジェクトの作成

ダッシュボードで「New project」を選択する。

Organization: 自分のアカウント名
Name: プロジェクト名（例：my-media）
Database Password: ランダムで強力なパスワード（保存しておく）
Region: Northeast Asia（ap-northeast-1）← 日本に最も近い

「Create new project」を押すと、プロジェクトのセットアップが1〜2分で完了する。

3. APIキーの取得

プロジェクトのダッシュボードで、Settings → APIに移動する。

キー	用途	公開可否
URL	データベースへのエンドポイント	OK
anon（public） key	フロントエンドから使う	RLS設定下でOK
service_role key	管理者権限での操作	絶対NG（公開禁止）

テーブルの作成

ダッシュボードの「Table Editor」からGUIでテーブルを作成できる。SQLに慣れている場合は「SQL Editor」からCREATE TABLEを実行する方が速い。

例として、アクセスカウント用のテーブルを作る場合：

CREATE TABLE page_views (
  id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  slug text NOT NULL,
  count integer NOT NULL DEFAULT 1,
  created_at timestamptz DEFAULT now()
);

SQL Editorでこれを実行すると、テーブルが作成される。

JavaScriptクライアントの設定

AstroやNext.jsのプロジェクトから接続するには、Supabase公式のJavaScriptクライアントを使う。

npm install @supabase/supabase-js

接続クライアントを初期化するファイルを作る（例：src/lib/supabase.ts）：

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

const supabaseUrl = import.meta.env.SUPABASE_URL;
const supabaseAnonKey = import.meta.env.SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

環境変数は.envファイルに設定する：

SUPABASE_URL=https://xxxx.supabase.co
SUPABASE_ANON_KEY=eyJhbGci...

データの読み書き（CRUD）

SupabaseクライアントはSQLライクな記法でデータを操作できる。

データの取得（SELECT）：

const { data, error } = await supabase
  .from('page_views')
  .select('slug, count')
  .order('count', { ascending: false })
  .limit(10);

if (error) console.error(error);
console.log(data);

データの挿入（INSERT）：

const { error } = await supabase
  .from('page_views')
  .insert({ slug: 'my-article', count: 1 });

データの更新（UPDATE）：

const { error } = await supabase
  .from('page_views')
  .update({ count: 5 })
  .eq('slug', 'my-article');

データの削除（DELETE）：

const { error } = await supabase
  .from('page_views')
  .delete()
  .eq('id', 1);

Row Level Security（RLS）の設定

RLSは、テーブルへのアクセスを行レベルで制御するPostgreSQLの機能だ。Supabaseでは、anon keyを使ったフロントエンドからの操作に対してRLSを設定することがセキュリティの基本になる。

RLSを有効にするだけで、ポリシーを設定するまで全てのアクセスがブロックされる。

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

-- 全員が読み取り可能なポリシー
CREATE POLICY "Allow read" ON page_views
  FOR SELECT USING (true);

-- 全員が挿入可能なポリシー（カウンター用）
CREATE POLICY "Allow insert" ON page_views
  FOR INSERT WITH CHECK (true);

認証が必要な操作（更新・削除）には、認証済みユーザーだけに許可するポリシーを設定する。

-- 認証済みユーザーだけが更新できる
CREATE POLICY "Allow update for authenticated" ON page_views
  FOR UPDATE USING (auth.role() = 'authenticated');

RLSの詳細はSupabaseの行レベルセキュリティ（RLS）入門で解説している。

Supabaseダッシュボードの活用

Table EditorはSpreadsheetに近い感覚でデータを確認・編集できる。開発中の動作確認やデータの修正に便利だ。

SQL Editorでは任意のSQLを実行できる。複雑なクエリのデバッグや、バルクデータの処理に使える。

LogsメニューではAPIのアクセスログ・エラーログを確認できる。API呼び出しが想定通り動いているかを確認するときに役立つ。

アクセスカウンターの実装についてはSupabaseでアクセス数カウンターを作るで、問い合わせフォームの実装については問い合わせフォームをSupabase+Resend+Slackで作るで解説している。

まとめ

Supabaseのセットアップは、プロジェクト作成→APIキー取得→クライアントライブラリのインストール→RLS設定の順で進む。無料プランで始められ、PostgreSQLの機能をそのまま使えるため、SQLに慣れている個人開発者には使いやすい選択肢だ。最初にRLSを適切に設定しておくことが、セキュリティを保ったまま開発を進める上で重要になる。