Supabaseとは？できること・実際の使い方をエンジニア視点で解説

Webアプリケーションを開発する際には、データベースの用意やサーバーの構築、認証処理の実装など、多くの作業をこなす必要があります。
そこで利用できるのが、PostgreSQLをベースにしたオープンソースのバックエンドプラットフォーム「Supabase」です。

Supabaseは「Firebaseのオープンソース版」と紹介されることも多く、データベースを中心に認証やファイルストレージなど、Webアプリのバックエンドに必要な機能をまとめて利用できます。この記事では、Supabaseの基本から、実際にプロジェクトを作成してデータベースを操作する方法、JavaScriptからデータを取得する方法まで解説します。

Supabaseとは

Supabaseは、オープンソースの技術をベースとしたバックエンドプラットフォーム（BaaS：Backend as a Service）です。
データベースを中心として、認証やファイルストレージ、リアルタイム通信、サーバー側の処理など、Webアプリケーションのバックエンドに必要な機能をまとめて利用することができます。

Supabaseの大きな特徴は、データベースにオープンソースのリレーショナルデータベース「PostgreSQL」をそのまま採用している点です。
独自仕様のデータベースではなく標準的なPostgreSQLであるため、SQLを使った操作や、PostgreSQL向けの各種ツール・知識をそのまま活かせます。

Supabaseの主な機能には、次のようなものがあります。

• Database：PostgreSQLを利用したデータベース
• Authentication：ユーザー登録やログインなどの認証
• Storage：画像やファイルの保存
• Realtime：データの変更をリアルタイムに検知
• Edge Functions：サーバー側で独自の処理を実行

このように、データを保存するだけでなく、アプリケーションに必要となる様々なバックエンド機能をまとめて利用できることが、Supabaseの特徴です。それぞれの機能については、記事後半の「Supabaseのよく使う機能」で詳しく紹介します。

×

Supabaseを始める

アカウントを作成する

Supabaseを利用するには、まずアカウントを作成します。
Supabase公式サイトにアクセスし、「Start your project」などの案内からサインアップ画面へ進みます。

アカウントを作成してログインすると、Supabaseのダッシュボードを利用できるようになります。

Organizationを作成する

Supabaseでは、プロジェクトを「Organization」内で管理します。

Organizationは、Supabase上でプロジェクトやメンバーなどをまとめて管理するための機能です。
個人で利用する場合でも、まずOrganizationを作成して、その中にプロジェクトを作成する形になります。

初回ログイン時に以下のような画面が表示されるので、「New Organization」をクリックして作成画面に移りましょう。

Organization名や種別、プランを選択し、「Create organization」をクリックすれば作成完了です。

新規プロジェクトを作成する

Organizationを作成すると、続いて新規プロジェクトの作成画面に移ります。
先ほどと同様に、表示されている項目を入力していきましょう。

設定が完了したら、画面下部のボタンをクリックでプロジェクトを作成できます。
なお、作成フォームの「Security」欄には「Automatically expose new tables」という項目があり、2026年9月時点ではデフォルトでオフになっています。これは、新しく作成したテーブルを自動的にAPI経由で公開しない設定で、後述するRow Level Securityとあわせて、アクセス制御を意図せず緩めてしまわないための仕組みです。
プロジェクトの作成が完了すると、Supabaseの各種機能を利用できるようになります。

Supabaseの基本の使い方：データベースを操作する

テーブルを作成する

まずは、新しいテーブルを作成してみましょう。
サイドメニューから「Table Editor」を選択すると、編集画面に移動できます。

画面左側の「New table」、もしくは中央の「Create a table」をクリックし、作成画面を開きます。
テーブル名やディスクリプション、カラムなどの設定を行い、「Save」をクリックで保存しましょう。

今回は例として、ユーザーが入力したメモを保存する「notes」というテーブルを作成しました。

テーブルを作成すると、設定したカラムに沿ってデータを保存できるようになります。

データを追加する

画面右上の「Insert」をクリックすると、行を追加してデータを登録できます。
「Insert row」を選択し、設定したカラムに沿って登録したいデータの内容を入力していきましょう。

「Save」をクリックして保存すると、テーブルに入力したデータが保存されます。
SQLを書くことなくデータを追加・編集できるため、データベースを初めて扱う場合でも操作しやすくなっています。

データを確認する

データを登録したら、Table Editorからテーブルの内容を確認できます。
登録したデータが行として表示されるため、実際にデータが保存されていることを画面上で確認できます。

登録したデータの編集・削除なども、同様にTable Editorから行えます。

SQL Editorで同じデータを確認する

Supabaseには、SQLを直接実行できる「SQL Editor」も用意されています。
例えば、先ほど作成したテーブルのデータを取得する場合は、次のSQLを実行します。

SELECT * FROM notes;

SELECT * FROM notes;

実行すると、テーブルに保存されているデータがSQLの実行結果として表示されます。

Table Editorでは視覚的にデータを操作できる一方、SQL EditorではSQLを使ってデータの取得や追加、更新、削除などを行えます。
Supabaseではこのように、画面上の操作とSQLの両方から同じPostgreSQLデータベースを扱えることが特徴です。

▼こちらもチェック▼

SQLとは？初心者向けに基礎知識から具体例まで分かりやすく解説 ▶

テーブルのアクセス制御：Row Level Security（RLS）とは

ここまではSupabaseのダッシュボード上でテーブルを操作してきましたが、実際のアプリケーションではJavaScriptなどからAPI経由でデータベースへアクセスします。
その際に重要になるのが、Row Level Security（RLS）という仕組みです。

RLSは、テーブルの行（レコード）ごとに、どのユーザーがアクセスできるかをデータベース側で制御する機能です。
クライアント（ブラウザなど）から直接データベースへアクセスできるSupabaseでは、RLSを設定していないと、誰でもテーブルのデータを読み書きできてしまう可能性があります。

反対に、RLSを有効にした状態でポリシー（アクセスを許可するルール）を1つも設定しないと、今度はAPI経由で誰もデータを取得できなくなります。
そのため、実際にテーブルをアプリケーションから利用する際は、「誰が」「どの行に」「どのような操作（取得・追加・更新・削除）を行えるか」を、ポリシーとして設定しておく必要があります。

今回作成したnotesテーブルのように学習・検証目的で一時的に利用する場合は問題になりにくいですが、実際のアプリケーションに組み込む際は、次に紹介するAPIキーの使い分けとあわせて、RLSの設定を必ず確認するようにしてください。

Supabaseを実際に使ってみる：JavaScriptからデータを取得する

APIキーを確認する

Supabaseのデータベースへアプリケーションからアクセスするには、プロジェクトのURLとAPIキーが必要です。
Supabaseのダッシュボードでは、画面上部の「Connect」から接続に必要な情報を確認できます。

また、「Project Settings」→「API Keys」からプロジェクトのAPIキーを確認することもできます。2026年9月時点のSupabaseでは、キーの種類が整理されており、クライアント（フロントエンド）側で利用するキーとして「publishable key」、サーバー側で利用するキーとして「secret key」が用意されています。

publishable keyは名前の通り、Webサイトのソースコードやモバイルアプリに含めることを前提としたキーです。ただしこれは、前の章で紹介したRow Level Security（RLS）によって、テーブルへのアクセスが適切に制限されていることが前提となります。RLSを設定しないままpublishable keyを使うと、誰でもテーブルの全データにアクセスできてしまうため注意してください。

一方のsecret keyは、RLSを無視してデータベースへ全権限でアクセスできる強力なキーです。secret keyは環境変数として管理し、フロントエンドのコードには含めないようにしてください。Supabaseには、これらのキーが登場する以前から使われている「anon key」「service_role key」というJWT形式のキーもあり、それぞれpublishable key・secret keyと同等の役割を持ちます。旧来のanon key・service_role keyは2026年9月時点でも引き続き利用できますが、Supabaseはこれらのレガシーキーを将来的に廃止する方針を示しているため、新規プロジェクトでは新しい形式のキーを使うことをおすすめします。

supabase-jsをインストールする

JavaScriptからSupabaseを利用する際は、公式のJavaScriptライブラリである「supabase-js」を使用できます。
npmを利用しているプロジェクトで、次のコマンドを実行します。

npm install @supabase/supabase-js

npm install @supabase/supabase-js

@supabase/supabase-jsには、データベースへのアクセスだけでなく、AuthenticationやStorage、Realtimeなど、Supabaseの各種機能を利用するためのAPIが用意されています。

▼こちらもチェック▼

npmとは？Node.jsパッケージ管理の基礎コマンド一覧とpackage.jsonの初期化・使い方まで徹底解説します ▶

クライアントを初期化する

ライブラリをインストールしたら、createClient()を使ってSupabaseのクライアントを作成します。

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

const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
)

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

const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
)

createClient()には、SupabaseのプロジェクトURLとpublishable keyを渡します。
実際のアプリケーションでは、URLやAPIキーをソースコードへ直接書き込むのではなく、上記のようにViteの環境変数（import.meta.env）などを利用して管理する方法が一般的です。

データを取得して表示する

クライアントを初期化したら、from()とselect()を使ってテーブルからデータを取得できます。

const { data, error } = await supabase
  .from('notes')
  .select('*')

if (error) {
  console.error(error)
} else {
  console.log(data)
}

const { data, error } = await supabase
  .from('notes')
  .select('*')

if (error) {
  console.error(error)
} else {
  console.log(data)
}

from(‘notes’)で取得対象となるテーブルを指定し、select(‘*’)ですべてのカラムを取得しています。
取得したデータはdataに、エラーが発生した場合はerrorにその内容が格納されるため、上記のように分岐させておくと安心です。

Supabaseのよく使う機能

Authentication（認証）：ログイン・会員登録機能をコードなしで用意できる

Authenticationは、ユーザーのログインや会員登録などを実装するための機能です。
メールアドレスとパスワードによるログイン、パスワードレス認証、ソーシャルログインなど、さまざまな認証方式に対応しています。

通常、ログイン機能を自分で実装する場合には、ユーザー情報の管理やパスワードの扱い、認証状態の管理など、多くの処理が必要になります。
Supabase Authを利用すれば、こうした認証機能をSupabase側で用意し、JavaScriptなどからAPIを呼び出して利用できます。

また、認証したユーザーの情報とRow Level Securityを組み合わせることで、「ログインしているユーザー本人のデータだけを参照できる」といったアクセス制御を構築することもできます。

Storage：画像やファイルをアップロード・配信できる

Storageは、画像や動画、PDFなどのファイルを保存・配信するための機能です。
プロフィール画像をアップロードする機能や、ユーザーが画像を投稿するアプリケーションなどで利用できます。

Supabase Storageに保存したファイルは、Supabaseのデータベースと組み合わせて管理することもできます。
また、アクセス権限を設定して、誰がファイルを利用できるかを制御することも可能です。

Edge Functions：サーバーを立てずに独自の処理を実行できる

Edge Functionsは、Supabase上でサーバー側の処理を実行するための機能です。
TypeScript（Deno環境）で関数を作成し、Supabase側の環境へデプロイして利用できます。

Web APIの作成やWebhookの受け取り、外部サービスとの連携など、クライアント側だけでは扱いにくい処理に利用できます。

Realtime：データの変更をリアルタイムに検知して反映できる

Realtimeは、データベースなどの変更をリアルタイムに検知して、接続しているアプリケーションへ反映できる機能です。

例えば、チャットアプリで新しいメッセージが投稿されたとき、ページを再読み込みしなくても新しいメッセージを画面へ表示するといった用途に利用できます。
他にも、複数のユーザーが同じ情報を確認するダッシュボードや、オンライン状態を表示するアプリケーションなど、リアルタイム性が求められる場面で活用できます。

料金プランを確認する

プラン比較（Free / Pro / Team / Enterprise）

Supabaseには、Free、Pro、Team、Enterpriseの4つの料金プランがあります。
以下は2026年9月時点で確認した内容です。料金や上限は変更される可能性があるため、最新情報は必ず公式の料金ページで確認してください。

Teamプランは、Proプランと同じ従量課金の仕組みに加えて、SSOやSOC2レポートなど組織向けのセキュリティ・権限管理機能が追加されるプランです。
なお、有料プランでは基本料金に加えて、利用量に応じた追加料金や、プロジェクトごとの計算インスタンス費用が発生する場合があります。

無料プランでどこまでできるか

Freeプランでも、PostgreSQLによるデータベース、Authentication、Storage、Realtime、Edge Functionsなど、Supabaseの主要な機能を利用できます。
個人で簡単なWebアプリを作成し、ユーザー情報を管理したり、少量の画像を保存したり、データベースの変更をリアルタイムに反映したりする程度であれば、Freeプランでも十分に試せる内容となっています。

2026年9月時点でのFreeプランの主な利用上限は、次の通りです。

• プロジェクト数：最大2つまで
• データベース容量：500MB
• Storage容量：1GB
• 転送量（Egress）：5GB／月
• Realtimeの同時接続数：200接続、メッセージ数：200万件／月
• Edge Functionsの呼び出し回数：50万回／月
• 月間アクティブユーザー（MAU）：50,000人

そのため、アプリケーションの利用者が増えたり、データ量が大きくなったりした場合には、上位プランの検討が必要となる可能性があります。

メリット・デメリット・Firebaseとの違い

Supabaseを使うメリット

Supabaseの大きな特徴の一つが、データベースにPostgreSQLを採用していることです。
PostgreSQLはリレーショナルデータベースであり、テーブル同士の関係を扱いやすく、SQLを利用して複雑なデータ操作を行えます。

SupabaseではPostgreSQLをベースにしながら、ダッシュボードからテーブルを操作したり、APIを利用してアプリケーションからデータへアクセスしたりできます。
SQLやリレーショナルデータベースに慣れている人にとって、扱いやすいサービスとなっています。

また、データベースのみに限らず、複数の機能を一つのサービスから利用できるため、機能ごとにサービスを用意して連携する手間を減らすことができるのもメリットの1つです。

▼こちらもチェック▼

【入門編】PostgreSQLとは？特徴や使い方をわかりやすく解説 ▶

導入前に知っておきたい注意点

便利なSupabaseですが、いくつか注意しておきたい点があります。

まず、無料で利用できるとはいっても、各機能には利用量の上限があります。
データベース容量やStorage、通信量、Realtimeの接続数などが増えると、プラン変更や追加料金が必要になる場合があります。

また、前の章で紹介した通り、Supabaseを利用する場合でも、データベースの設計やアクセス権限について考える必要があります。
特にクライアントからデータベースへ直接アクセスするアプリケーションでは、Row Level Security（RLS）を利用して、ユーザーがアクセスできるデータを適切に制御することが重要です。

「Supabaseを使えばバックエンドの知識が一切必要なくなる」というわけではなく、サービスが提供する機能を理解した上で適切に設定する必要があります。

SupabaseとFirebaseの違い

Supabaseと比較されることが多いサービスに、Googleが提供するFirebaseがあります。
どちらもWebアプリケーションやモバイルアプリケーションのバックエンド機能を提供するサービスですが、データベースを中心とした設計に大きな違いがあります。

SupabaseはPostgreSQLというリレーショナルデータベースを中心に構成されています。
一方、Firebaseでは代表的なデータベースとして、NoSQL型のCloud FirestoreやRealtime Databaseが利用されています。

そのため、テーブルやリレーション、SQLを利用してデータを扱いたい場合はSupabaseの構造が理解しやすいでしょう。
一方、FirebaseはGoogleのサービスとの連携や、Firebase独自のエコシステムを活用したアプリケーション開発に向いています。
どちらが優れているというより、扱いたいデータの構造や開発したいアプリケーションの種類に応じて選ぶとよいでしょう。

よくある質問

Supabaseは無料で使えますか？

Freeプランであれば、無料でSupabaseを利用できます（2026年9月時点）。
データベース500MB、Storage1GB、月間アクティブユーザー50,000人までなど一定の利用上限はありますが、個人開発や学習用途であれば十分に試せる内容です。詳しい上限は公式の料金ページを確認してください。

SupabaseとFirebaseはどちらを選べばいいですか？

SQLやリレーショナルデータベースを使ってデータを扱いたい場合はSupabase、Googleのサービスと連携したアプリを開発したい場合はFirebaseが向いています。
どちらが優れているというより、扱いたいデータの構造や開発したいアプリケーションの種類によって選ぶのがポイントです。

SQLの知識がなくてもSupabaseは使えますか？

Table EditorではSQL文を書かずに、画面上の操作だけでテーブルの作成やデータの登録・編集が行えるため、SQLに不慣れな場合でも扱えます。
一方で、Row Level Securityの設定など一部の機能は、SQLやデータベースの基礎知識があるとより理解しやすくなります。

Supabaseは本番環境でも使えますか？

Supabaseは個人開発だけでなく、企業の本番環境でも利用されているサービスです。
ただし本番環境で運用する場合は、Row Level Securityの設定やAPIキーの管理、利用量に応じたプランの選定など、事前に確認しておくべき点があります。

まとめ

Supabaseは、Freeプランでも主要な機能を試すことができるため、まずは小規模なアプリケーションを作成しながら仕組みを学ぶことができます。
PostgreSQLやSQLを利用したWebアプリケーション開発に興味がある場合は、Supabaseを使ってデータベースからバックエンド機能まで一通り体験してみるとよいでしょう。