Harmonic Society
オンライン予約 お問い合わせ
データベース・インフラ

【初心者向け】Supabaseの使い方入門ガイド｜基礎から実践まで徹底解説

kento_morota 18分で読めます

「Excel管理に限界を感じているが、本格的なシステム開発は費用も時間もかかりそう」「バックエンドの構築を簡単に始められるサービスはないか」――Supabaseなら、無料プランから始められ、データベースから認証機能まで一通りの機能が揃っています。

本記事では、Supabaseの使い方をアカウント作成からデータベース構築、認証機能の実装まで、ステップバイステップで初心者にもわかりやすく解説します。

Supabaseとは？初心者が知るべき基礎知識

Supabase（スーパーベース）は、データベース、認証、ストレージ、APIなどのバックエンド機能を統合したオープンソースのBaaS（Backend as a Service）です。PostgreSQLをベースとし、「Firebaseのオープンソース代替」として注目されています。

Excel管理の限界や属人化に悩む中小企業にとって、Supabaseは現実的な解決策となります。無料プランから始められ、段階的に機能を拡張できるため、小さく試して大きく育てることが可能です。

Supabaseの主な特徴

  • PostgreSQLベース: 強力なリレーショナルデータベースを採用
  • 自動API生成: テーブル作成と同時にRESTful APIが利用可能
  • 認証機能: メール/パスワード、OAuth（Google、GitHubなど）を標準搭載
  • リアルタイム機能: データ変更を即座に反映
  • Row Level Security（RLS）: 行レベルでの細かなアクセス制御
  • ファイルストレージ: 画像やPDFなどの管理機能

これらの機能により、顧客管理システム、案件管理ツール、予約システムなど、さまざまな業務システムを構築できます。

FirebaseやExcel管理との違い

Firebaseとの比較

Supabaseはリレーショナルデータベース（PostgreSQL）を採用しているため、複雑なデータ構造や高度な検索が必要な業務システムに適しています。一方、FirebaseはNoSQLのため、シンプルなアプリケーション向けです。

また、Supabaseは完全オープンソースのため、ベンダーロックインを回避しやすく、必要に応じて自社環境への移行も可能です。

Excel管理との比較

Excel管理には以下の課題があります。

  • 複数人での同時編集が困難
  • データの整合性を保ちにくい
  • 権限管理が不十分
  • バージョン管理が煩雑

Supabaseに移行することで、データの一元管理、細かなアクセス権限設定、変更履歴の追跡が実現します。

中小企業が選ぶべき理由

1. 開発コストの大幅削減

バックエンド機能が既に用意されているため、従来の開発費用を1/3〜1/2程度に抑えられる可能性があります。開発期間も大幅に短縮できます。

2. 無料プランの充実度

  • データベース容量: 500MB
  • ストレージ: 1GB
  • 月間アクティブユーザー: 50,000人まで
  • APIリクエスト: 無制限（帯域幅制限あり）

小規模な業務システムなら、無料プランのまま運用を続けることも可能です。

3. スモールスタートが可能

全社システムを一度に刷新するのではなく、まずは一部の業務（顧客管理や案件管理など）から始められます。リスクを最小限に抑えながらデジタル化を進められます。

4. 属人化の解消

データを一元管理し、適切な権限設定を行うことで、「あの人しか分からない」という状況を解消できます。

導入前の確認ポイント

必要な技術知識

Supabaseは初心者でも扱いやすいツールですが、以下の基礎知識があるとスムーズです。

  • データベースの基本概念（テーブル、カラム、リレーション）
  • SQL文の基礎（SELECT、INSERT、UPDATE、DELETE）
  • JavaScript/TypeScriptの基礎（フロントエンド連携時）

完全な非エンジニアが一人で構築するのは難しい場合もあります。その際は、外部の開発パートナーへの相談を検討しましょう。

セキュリティ要件

Supabaseはクラウドサービスのため、データは外部サーバーに保存されます。個人情報や機密情報を扱う場合は、Row Level Security（RLS）の設定が必須です。これを怠ると、データ漏洩のリスクがあります。

運用体制の確保

システムは作って終わりではありません。以下の運用体制を確保できるか確認しましょう。

  • データのバックアップ計画
  • セキュリティアップデートの対応
  • ユーザーからの問い合わせ対応
  • 機能追加や改修の計画

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

アカウント作成手順

Supabaseのアカウント作成は数分で完了します。

手順1: 公式サイトにアクセス

https://supabase.com/にアクセスし、「Start your project」をクリックします。

手順2: 認証方法の選択

以下の方法でアカウントを作成できます。

  • GitHubアカウント（推奨）: 最も簡単で一般的
  • Googleアカウント: Googleアカウントをお持ちの方向け
  • メールアドレス: その他の方法

初心者の方には、GitHubアカウントでの登録を推奨します。

手順3: 認証を完了

選択した方法で認証を行うと、Supabaseのダッシュボードに自動的にリダイレクトされます。これでアカウント作成は完了です。

プロジェクトの作成

手順1: 「New Project」をクリック

ダッシュボードの「New Project」ボタンをクリックします。初回は「Organization（組織）」の作成を求められる場合があります。組織名は会社名や個人名など、任意の名前で問題ありません。

手順2: プロジェクト情報の入力

  • Name: プロジェクト名（例: customer-management）
  • Database Password: データベースのパスワード（必ず安全な場所に保管）
  • Region: データセンターの場所
  • Pricing Plan: 料金プラン（まずは「Free」を選択）

手順3: リージョンの選択

日本からのアクセスが中心の場合は、Northeast Asia（Tokyo）を選択することを推奨します。リージョンはプロジェクト作成後に変更できないため、慎重に選択しましょう。

手順4: プロジェクトの作成

「Create new project」をクリックすると、1〜2分程度でプロジェクトが初期化されます。

初期設定の確認

API KeyとURLの確認

「Settings」→「API」から、以下の情報を確認できます。

  • Project URL: プロジェクト固有のURL
  • anon public: フロントエンドから使用する公開API Key
  • service_role: サーバーサイドで使用する秘密のAPI Key

service_role Keyは絶対にフロントエンドのコードに含めないでください。すべてのセキュリティ制限をバイパスできる強力な権限を持っています。

セキュリティ設定

「Authentication」→「Policies」で、Row Level Security（RLS）の設定状況を確認できます。デフォルトではRLSが無効のため、本格的にデータを入れる前に必ず設定しましょう。

データベースの基本的な使い方

テーブルの作成（GUI操作）

Supabaseの最大の魅力の一つが、GUIでテーブルを作成できる点です。SQLを書かなくても、マウス操作だけでデータベースを構築できます。

手順1: Table Editorを開く

ダッシュボードの左メニューから「Table Editor」をクリックします。

手順2: 新しいテーブルの作成

「New Table」ボタンをクリックし、以下の情報を入力します。

  • Name: テーブル名（例: customers、projects）
  • Description: テーブルの説明（任意）
  • Enable Row Level Security (RLS): チェックを入れる（重要）

テーブル名は小文字と英数字、アンダースコアのみを使用し、複数形で命名するのが一般的です。

手順3: カラムの追加

テーブルには以下のカラムがデフォルトで作成されます。

  • id: 主キー（自動採番）
  • created_at: レコード作成日時（自動設定）

追加でカラムを作成する場合は、「Add column」をクリックします。

顧客管理テーブルの例

  • company_name（text、必須）: 会社名
  • contact_person（text）: 担当者名
  • email（text）: メールアドレス
  • phone（text）: 電話番号
  • status（text）: ステータス

データの操作

データの追加

  1. 作成したテーブルをTable Editorで開く
  2. 「Insert」→「Insert row」をクリック
  3. 各カラムに値を入力
  4. 「Save」をクリック

データの編集

  1. 編集したいセルをクリック
  2. 値を変更
  3. Enterキーを押すか、他のセルをクリックすると自動保存

データの削除

  1. 削除したい行を選択
  2. 右クリックまたは行の左端のメニューから「Delete row」を選択
  3. 確認ダイアログで「Delete」をクリック

SQLエディタの活用

GUIでの操作に慣れてきたら、SQLエディタを使うことで、より複雑な操作や効率的なデータ処理が可能になります。

左メニューから「SQL Editor」をクリックします。

基本的なSQL文の例

-- 全ての顧客を取得
SELECT * FROM customers;

-- 条件を指定して取得
SELECT * FROM customers WHERE status = 'active';

-- データの追加
INSERT INTO customers (company_name, email, status)
VALUES ('株式会社サンプル', 'sample@example.com', 'active');

-- データの更新
UPDATE customers
SET status = 'inactive'
WHERE id = 1;

-- データの削除
DELETE FROM customers WHERE id = 3;

注意点: UPDATE文やDELETE文は必ずWHERE句を付けることを習慣化しましょう。WHERE句がないと、全てのレコードが更新・削除されてしまいます。

リレーション（テーブル間の関連付け）

実務では、複数のテーブルを関連付けて使用することが一般的です。

顧客と案件の関連付け例

CREATE TABLE projects (
  id BIGSERIAL PRIMARY KEY,
  project_name TEXT NOT NULL,
  customer_id BIGINT REFERENCES customers(id),
  budget INTEGER,
  status TEXT DEFAULT 'planning',
  created_at TIMESTAMP DEFAULT NOW()
);

customer_id BIGINT REFERENCES customers(id)が外部キーの設定です。これにより、projectsテーブルのcustomer_idは、必ずcustomersテーブルに存在するidでなければなりません。

リレーションを使ったデータ取得

-- 顧客名と案件名を一緒に取得
SELECT 
  customers.company_name,
  projects.project_name,
  projects.budget
FROM projects
JOIN customers ON projects.customer_id = customers.id;

このようにデータを適切に分割し、リレーションで繋ぐことで、データの重複を避け、管理しやすいシステムを構築できます。

認証機能の実装

業務システムにおいて、アクセス制御を行う認証機能は必須です。Supabaseは強力な認証機能を標準搭載しており、複雑な実装なしに安全なシステムを構築できます。

Supabase Authの概要

Supabase Authは以下の機能を提供します。

  • メール/パスワード認証: 基本的な認証方式
  • マジックリンク認証: パスワード不要のメール認証
  • OAuth認証: Google、GitHub、Microsoft等のソーシャルログイン
  • 多要素認証（MFA）: セキュリティ強化のための2段階認証

認証の仕組みは以下の通りです。

  1. ユーザーがログイン
  2. Supabaseが認証情報を検証
  3. 認証成功時、JWTトークンを発行
  4. 以降のAPIリクエストでこのトークンを使用
  5. Row Level Securityでデータアクセスを制御

メール認証の設定

認証設定の確認

「Authentication」→「Settings」を開き、「Email」が有効になっていることを確認します（デフォルトで有効）。

ユーザー登録の実装

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

const supabase = createClient(
  'YOUR_PROJECT_URL',
  'YOUR_ANON_KEY'
)

// ユーザー登録
async function signUp(email, password) {
  const { data, error } = await supabase.auth.signUp({
    email: email,
    password: password
  })

  if (error) {
    console.error('登録エラー:', error.message)
  } else {
    console.log('登録成功:', data)
  }
}

// ログイン
async function signIn(email, password) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email: email,
    password: password
  })

  if (error) {
    console.error('ログインエラー:', error.message)
  } else {
    console.log('ログイン成功:', data)
  }
}

// ログアウト
async function signOut() {
  const { error } = await supabase.auth.signOut()

  if (error) {
    console.error('ログアウトエラー:', error.message)
  }
}

ソーシャルログインの追加

ソーシャルログインを追加することで、ユーザーの利便性が大幅に向上します。

Google認証の設定手順

  1. Google Cloud Consoleで新しいプロジェクトを作成
  2. OAuth 2.0クライアントIDを作成
  3. Supabaseの「Authentication」→「Providers」→「Google」で、取得したクライアントIDとシークレットを設定

実装例

async function signInWithGoogle() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google'
  })
}

フロントエンドとの連携

Supabaseクライアントライブラリのインストール

npm install @supabase/supabase-js

基本的なデータ取得・更新

// データの取得
const { data, error } = await supabase
  .from('customers')
  .select('*')
  .eq('status', 'active')

// データの追加
const { data, error } = await supabase
  .from('customers')
  .insert([
    { company_name: '株式会社サンプル', email: 'sample@example.com' }
  ])

// データの更新
const { data, error } = await supabase
  .from('customers')
  .update({ status: 'inactive' })
  .eq('id', 1)

// データの削除
const { data, error } = await supabase
  .from('customers')
  .delete()
  .eq('id', 1)

Next.jsとの連携

Next.jsでSupabaseを使用する場合、環境変数を設定します。

.env.localファイルを作成し、以下を記述します。

NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

エラーハンドリング

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

if (error) {
  console.error('エラー:', error.message)
  // ユーザーにエラーメッセージを表示
} else {
  console.log('データ:', data)
  // データを処理
}

その他の便利な機能

ファイルストレージ

Supabaseは画像やPDFなどのファイル管理機能も提供しています。

// ファイルのアップロード
const { data, error } = await supabase
  .storage
  .from('avatars')
  .upload('public/avatar1.png', file)

// ファイルのダウンロードURL取得
const { data } = supabase
  .storage
  .from('avatars')
  .getPublicUrl('public/avatar1.png')

リアルタイム機能

データの変更をリアルタイムで検知できます。

const channel = supabase
  .channel('customers-changes')
  .on('postgres_changes', 
    { event: '*', schema: 'public', table: 'customers' }, 
    (payload) => {
      console.log('変更がありました:', payload)
    }
  )
  .subscribe()

無料プランと有料プランの違い

無料プラン
- データベース: 500MB
- ストレージ: 1GB
- 月間アクティブユーザー: 50,000人

Proプラン（月25ドル）
- データベース: 8GB
- ストレージ: 100GB
- 月間アクティブユーザー: 100,000人
- メールサポート

小規模なシステムであれば、無料プランで十分に運用可能です。

導入時の注意点とよくある質問

セキュリティで気をつけること

Row Level Security（RLS）の設定は必須

RLSを設定しないと、データが誰でもアクセス可能な状態になります。本番環境では必ず設定しましょう。

-- ユーザーが自分のデータのみ閲覧できるようにする
CREATE POLICY "Users can view own data"
ON customers
FOR SELECT
USING (auth.uid() = user_id);

API Keyの管理

  • anon publicキーはフロントエンドで使用可能
  • service_roleキーは絶対にフロントエンドに含めない
  • 環境変数を使用して管理する

つまずきやすいポイント

1. RLSを有効にしたらデータが取得できない

RLSを有効にすると、ポリシーを設定するまでデータにアクセスできません。適切なポリシーを作成しましょう。

2. リレーションの設定ミス

外部キーの設定を間違えると、データの整合性が保てません。テーブル設計は慎重に行いましょう。

3. 認証状態の管理

フロントエンドで認証状態を適切に管理しないと、ユーザー体験が悪化します。Supabaseのセッション管理機能を活用しましょう。

学習リソース

  • 公式ドキュメント: https://supabase.com/docs
  • 公式YouTubeチャンネル: 動画チュートリアルが充実
  • Discord コミュニティ: 質問や情報交換が活発

Supabaseの使い方を学ぶことで、中小企業でも高度な業務システムを低コストで構築できます。サーバーレス処理が必要な場合はSupabase Edge Functionsの使い方もご覧ください。まずは無料プランで小さく始めて、段階的に機能を拡張していきましょう。

システム開発や運用に不安がある場合は、Harmonic Societyのような伴走支援を提供する開発パートナーに相談することで、安心して導入を進められます。

#Supabase#使い方#入門
共有:

関連記事

AWS Lambda活用事例7選｜中小企業でも始められる実践…

AWS Lambda活用事例7選｜中小企業でも始められる実践的な使い方を解説
バックアップ3-2-1ルールとは？中小企業でも実践できる具体…

バックアップ3-2-1ルールとは？中小企業でも実践できる具体的な方法を解説
Cloudflare Workers活用ガイド｜中小企業でも…

Cloudflare Workers活用ガイド｜中小企業でも始められる実践的な使い方

ちょっとした業務の悩みも、気軽にご相談ください。

まずは話だけ聞いてもらう