Supabase
Supabase
概要(サマリー)
Supabase(スーパーベース)とは、Webアプリ開発に必要な裏側の仕組み(データベースやユーザー認証など)を、自分で難しいサーバー側のプログラム(バックエンド)を一から作り込まずに用意できる「BaaS(Backend as a Service)」と呼ばれるクラウドサービスである。
通常、ユーザー登録やログイン機能、データの保存先を作るには、Node.jsやPHPなどでサーバー用プログラムを書き、データベースサーバーを構築・連携させる必要がある。
たとえるなら、家を建てる(アプリを作る)際に、電気や水道、ガス(データベースや認証)を一から自分で配管工事する代わりに、最初からライフラインがすべて完備された「オールインワンの分譲マンションの部屋」を借りてすぐに入居できるようにするのが Supabase である。
世界中で大人気の関係データベース「PostgreSQL」をベースにしており、オープンソースで提供されているため、近年急速に普及している。
詳細解説
Supabaseが提供する主な機能
Supabaseは、フロントエンド(HTML/JSやReactなど)の開発に集中できるよう、以下のバックエンド機能をAPI経由で一元的に提供する。
- Database(マネージドPostgreSQL):
- 高性能なPostgreSQLデータベースが最初から用意されている。ブラウザ上の管理画面(ダッシュボード)から、Excelのように表形式でテーブルの作成やデータの追加・編集ができる。 - Auth(ユーザー認証):
- メールアドレスとパスワードによるログイン機能はもちろん、GoogleやGitHubなどのSNSログイン、パスワードを使わないワンタイムパスコード(OTP)認証などが、わずかなコードで実装できる。ログイン状態の判定にはJWTなどが使われ、データベースのアクセス制御とも連携できる。 - Storage(ファイル保存):
- プロフィール画像や動画などのメディアファイルを保存・配信するための領域。 - Realtime(リアルタイム通信):
- データベースの更新をクライアント側に瞬時に通知する仕組み。チャットアプリやリアルタイムの共同編集機能などを簡単に作ることができる。 - Edge Functions(サーバー側処理):
- 決済サービスとの連携、Webhookの受け取り、外部AIサービスの呼び出しなど、ブラウザに置けない処理をTypeScriptで実行できる。
SupabaseとPostgreSQLの関係
Supabaseは、データベースに「PostgreSQL」を丸ごとそのまま採用している。
これは、他のBaaS(NoSQLデータベースを採用しているFirebaseなど)との大きな違いである。ユーザーはPostgreSQLの強力な機能(複雑なSQLクエリ、テーブル同士の結合、外部キー制約、インデックスによる高速化など)をそのまま利用できるため、将来的にアプリのデータ構造が複雑になっても、データの整合性を厳格に保ちながら柔軟に開発を続けることができる。
行レベルセキュリティ(Row Level Security: RLS)による保護
バックエンドサーバーを持たず、ブラウザのJavaScriptから直接データベースにアクセスするため、「他のユーザーにデータを勝手に見られたり改ざんされたりしないか」という不安が生じる。
これを解決するのが、PostgreSQLの機能である「RLS(Row Level Security: 行レベルセキュリティ)」である。
Supabaseでは、「このデータ(行)は、作成した本人(ログイン中のユーザー)しか読み書きできない」というセキュリティルールを設定できる。特に公開されるスキーマのテーブルではRLSを有効化し、anon や authenticated といった役割ごとに必要最小限の権限だけを許可することが重要である。
公開してよいキーと、隠すべきキー
Supabaseでは、フロントエンドから使う公開用のキーと、管理者権限を持つサービス用のキーを使い分ける。
公開用のキーはブラウザで利用される前提だが、データ保護はRLSポリシーに依存する。一方、サービス用のキーはRLSを回避できる強い権限を持つため、ブラウザや公開リポジトリに置いてはいけない。
決済処理、管理者操作、外部サービスの秘密鍵を使う処理は、Edge Functionsやサーバー側の環境変数に分離して扱う必要がある。
AIコーディングとの関係
AIとSupabaseの抜群の相性
Supabaseは、AIコーディングを活用して高速開発を行う際に最も力を発揮するツールの一つである。
AIに「ReactとSupabaseを使って、ToDoリストアプリのデータベース連携コードを書いて」と頼むと、AIは複雑なサーバーサイド(API定義など)をスキップし、フロントエンド用のJavaScriptコードだけで動作する完結したプログラムを一瞬で出力してくれる。
データベースの設定やRLSのセキュリティルール(SQL)の記述も、AIにダッシュボードのテーブル構成を教えて「RLSの設定SQLを書いて」と頼めば、たたき台となるクエリを出力してくれるため、開発スピードが大きく向上する。ただし、認可ルールはアプリの安全性を直接左右するため、AIの出力をそのまま貼るのではなく、想定外のユーザーが読めないか、書き換えられないかを必ず確認する必要がある。
たとえば、データ取得のコードは次のような形になる。
const { data, error } = await supabase
.from('posts')
.select('id, title, created_at')
.order('created_at', { ascending: false })
このように、SQLを直接書かなくてもSDK経由でデータを扱える。一方で、実際にどの行を読めるかはRLSポリシーで決まる。
指示を出す際のポイント
AIにSupabaseの連携コードや設定を依頼する際は、以下のように指示を出すとよい。
- 「SupabaseのJS SDKを使って、ログイン中ユーザーが作成した記事データ一覧を取得するJavaScriptの関数を書いて」
- 「Supabaseの
postsテーブルについて、『サインインしているユーザーだけが自分の投稿を削除できる』ようにするためのRLS(Row Level Security)のSQLポリシーを出力して」
よくある勘違い
SupabaseはFirebaseと全く同じもの?
提供している機能や目的は非常に似ているが、ベースとなるデータベースの設計思想が異なる。
- Firebase (Firestore): NoSQL(JSONに近いツリー構造のデータ)を採用。データのスキーマが自由で初期開発は早いが、リレーション(データの結合)や複雑な集計クエリが苦手。
- Supabase: リレーショナルデータベース(PostgreSQL)を採用。厳格なテーブル定義、高度なSQL検索、テーブル結合(JOIN)が得意。
「データベースの扱いやすさやSQLの知識を活かしたいか」によって使い分けるのが一般的である。
バックエンドのコードを一切書かずに完全なアプリを作れる?
シンプルなCRUD(データの作成・読込・更新・削除)アプリや認証機能であれば、サーバーサイドのコードを1行も書かずにフロントエンドだけで完結できる。
ただし、クレジットカード決済(Stripeなど)との連携や、セキュリティ上の理由でフロントエンドに公開できないAPIキーを扱う処理などが発生した場合は、Supabaseが提供する「Edge Functions」のようなサーバー側処理を少し記述して動かす必要がある。
RLSを有効にすれば、どんなクエリでも安全?
RLSは強力だが、ポリシーの書き方を間違えると本来見せてはいけない行を読めてしまう。
たとえば using (true) のような広すぎる条件を設定すれば、ログイン中の全ユーザーにデータを公開することになる。RLSは「有効にしたら自動で安全」ではなく、「正しい条件を設計して初めて安全に近づく仕組み」と考える必要がある。
SQLを知らないとSupabaseは使えない?
SQLの知識がなくても使用可能である。
テーブルの作成やデータの追加は、ブラウザ上の優れたグラフィカルインターフェース(管理画面)から行える。また、プログラムからデータを取得する際も、SQL文を直接書く代わりに supabase.from('users').select('*') のようなJavaScript風の記述(SDK)で直感的に操作できるため、初心者でも安心して使い始めることができる。
まとめ
- Supabaseは、PostgreSQLデータベース、ユーザー認証、ストレージなどをAPI経由で一元提供するオープンソースのBaaSである。
- データベースにPostgreSQLを採用しているため、厳格なデータ管理や高度なSQL処理が可能である。
- 行レベルセキュリティ(RLS)を適切に設定することで、フロントエンドからデータベースを直接操作する構成でもアクセス範囲を制御できる。
- Edge Functionsを使えば、決済、Webhook、外部API連携など、ブラウザに置けない処理もSupabase側で実行できる。
- AIとの組み合わせにより、バックエンドの環境構築やコード記述の手間を減らし、プロトタイプから実用アプリまで高速に開発しやすくなる。
情報ソース
- Supabase Official Website (supabase.com)
- Supabase Official Documentation
- Supabase Docs: Database
- Supabase Docs: Auth
- Supabase Docs: Row Level Security
- Supabase Docs: Understanding API keys
- Supabase Docs: Edge Functions
より詳しくAIに聞いてみよう
- SupabaseのRow Level Security (RLS)において、ログインしているユーザーだけが自分のデータにアクセスできるようにする「
auth.uid()」を使ったSQLの記述例を詳しく教えてください。 - FirebaseとSupabaseを、データベースの構造(NoSQL vs RDBMS)、リアルタイム通信、料金体系の観点から徹底比較してください。
- Supabaseの「Edge Functions」を使って、外部の決済API(Stripeなど)と安全に連携するサーバーサイド処理を実装する手順を説明してください。
- Next.js(App Router)プロジェクトで、サーバーコンポーネント(SSR)側から安全にSupabaseのデータをフェッチするための設定(@supabase/ssrの使い方)を教えてください。
- AIに「Supabaseを使った認証・データ保存機能付きのReactアプリ」のモックアップコードを作成してもらうためのプロンプトのテンプレートを出力してください。