24 May, 2025Supabaseとは何か
Supabaseは「オープンソースのFirebase代替」として注目されているBaaS（Backend as a Service）プラットフォームです。複雑なバックエンド開発を大幅に簡素化し、開発者がフロントエンドに集中できるようにします。
主な特徴は以下の通りです：
- PostgreSQLベース: 高性能なリレーショナルデータベース
- リアルタイム機能: データの変更を即座に反映
- 認証システム: ソーシャルログインやメール認証に対応
- API自動生成: RESTとGraphQL APIを自動で提供
- ファイルストレージ: 画像や動画の管理も簡単
従来のバックエンド開発では、サーバー構築からデータベース設計、API開発まで多くの工程が必要でした。Supabaseを使えば、これらの作業を数分で完了できます。
プロジェクトの初期設定
Supabaseを始めるには、まずアカウント作成とプロジェクトセットアップが必要です。
1. Supabaseアカウントの作成
Supabase公式サイトにアクセスし、「Start your project」をクリックします。GitHubアカウントでの登録が推奨されます。
2. 新しいプロジェクトの作成
# 新しいプロジェクトを作成（ダッシュボードから）
Organization: 個人またはチーム名を選択
Project Name: my-first-supabase-app
Database Password: 強力なパスワードを設定
Region: Asia Northeast (Tokyo) を選択3. JavaScriptクライアントライブラリのインストール
npm install @supabase/supabase-js4. Supabaseクライアントの初期化
// utils/supabase.js
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseKey = 'YOUR_SUPABASE_ANON_KEY'
export const supabase = createClient(supabaseUrl, supabaseKey)設定値はSupabaseダッシュボードの「Settings」→「API」から取得できます。これでSupabaseを使う準備が整いました。
データベーステーブルの作成と設定
Supabaseの魅力の一つは、直感的なWebエディターでデータベースを管理できることです。ブログアプリを例にテーブルを作成してみましょう。
1. Table Editorでのテーブル作成
Supabaseダッシュボードの「Table Editor」から新しいテーブルを作成します。
-- postsテーブルの作成例
CREATE TABLE posts (
id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
title TEXT NOT NULL,
content TEXT,
author_id UUID REFERENCES auth.users(id),
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);2. Row Level Security（RLS）の設定
セキュリティを確保するために、RLSポリシーを設定します。
-- RLSを有効化
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;
-- 認証済みユーザーが自分の投稿のみアクセス可能
CREATE POLICY "Users can view own posts" ON posts
FOR ALL USING (auth.uid() = author_id);3. リアルタイム機能の有効化
-- テーブルでリアルタイム機能を有効化
ALTER PUBLICATION supabase_realtime ADD TABLE posts;これで、posts テーブルの変更が即座にクライアントアプリケーションに反映されるようになります。テーブル作成はGUIでも可能で、初心者にも優しい設計です。
JavaScript/TypeScriptでのデータ操作
Supabaseクライアントを使って、データベースの操作を行う方法を見ていきましょう。CRUD操作（Create、Read、Update、Delete）が驚くほど簡単に実装できます。
1. データの取得（SELECT）
// 全ての投稿を取得
const { data: posts, error } = await supabase
.from('posts')
.select('*')
// 特定の条件で投稿を取得
const { data: myPosts, error } = await supabase
.from('posts')
.select('*')
.eq('author_id', userId)
.order('created_at', { ascending: false })2. データの追加（INSERT）
// 新しい投稿を作成
const { data, error } = await supabase
.from('posts')
.insert([
{
title: '初めてのSupabase',
content: 'Supabaseでアプリ開発を始めました！',
author_id: user.id
}
])
.select()3. データの更新（UPDATE）
// 投稿を更新
const { data, error } = await supabase
.from('posts')
.update({ title: '更新されたタイトル' })
.eq('id', postId)
.select()4. データの削除（DELETE）
// 投稿を削除
const { error } = await supabase
.from('posts')
.delete()
.eq('id', postId)エラーハンドリングも忘れずに行いましょう。Supabaseは常にerrorオブジェクトを返すので、適切にチェックすることが重要です。
ユーザー認証機能の実装
Supabaseの認証機能は非常に強力で、メール認証からソーシャルログインまで幅広く対応しています。複雑な認証ロジックを自分で実装する必要がありません。
1. メールによるユーザー登録
// ユーザー登録
const { data, error } = await supabase.auth.signUp({
email: 'user@example.com',
password: 'securepassword123'
})
if (error) {
console.error('登録エラー:', error.message)
} else {
console.log('登録成功:', data.user)
}2. ログイン機能
// メールとパスワードでログイン
const { data, error } = await supabase.auth.signInWithPassword({
email: 'user@example.com',
password: 'securepassword123'
})
if (error) {
console.error('ログインエラー:', error.message)
} else {
console.log('ログイン成功:', data.user)
}3. ログアウト機能
// ログアウト
const { error } = await supabase.auth.signOut()4. 認証状態の監視
// 認証状態の変化を監視
supabase.auth.onAuthStateChange((event, session) => {
if (event === 'SIGNED_IN') {
console.log('ユーザーがログインしました:', session.user)
} else if (event === 'SIGNED_OUT') {
console.log('ユーザーがログアウトしました')
}
})5. GoogleやGitHubでのソーシャルログイン
// Googleでログイン
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'google'
})
// GitHubでログイン
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'github'
})認証機能とRLSポリシーを組み合わせることで、セキュアなアプリケーションを簡単に構築できます。
リアルタイム機能の活用
Supabaseの最大の魅力の一つがリアルタイム機能です。データベースの変更を即座にクライアントアプリケーションに反映できるため、チャットアプリやライブダッシュボードなどを簡単に作成できます。
1. リアルタイムサブスクリプションの基本
// postsテーブルの変更を監視
const subscription = supabase
.channel('posts-changes')
.on(
'postgres_changes',
{ event: '*', schema: 'public', table: 'posts' },
(payload) => {
console.log('データベースが変更されました:', payload)
if (payload.eventType === 'INSERT') {
console.log('新しい投稿が追加されました:', payload.new)
} else if (payload.eventType === 'UPDATE') {
console.log('投稿が更新されました:', payload.new)
} else if (payload.eventType === 'DELETE') {
console.log('投稿が削除されました:', payload.old)
}
}
)
.subscribe()2. 特定の条件での監視
// 特定のユーザーの投稿のみ監視
const userPostsSubscription = supabase
.channel('user-posts')
.on(
'postgres_changes',
{
event: '*',
schema: 'public',
table: 'posts',
filter: `author_id=eq.${userId}`
},
(payload) => {
console.log('あなたの投稿が変更されました:', payload)
}
)
.subscribe()3. Reactでのリアルタイム実装例
import { useEffect, useState } from 'react'
import { supabase } from './utils/supabase'
function PostsList() {
const [posts, setPosts] = useState([])
useEffect(() => {
// 初期データの取得
const fetchPosts = async () => {
const { data } = await supabase
.from('posts')
.select('*')
.order('created_at', { ascending: false })
setPosts(data || [])
}
fetchPosts()
// リアルタイム監視の設定
const subscription = supabase
.channel('posts-channel')
.on(
'postgres_changes',
{ event: '*', schema: 'public', table: 'posts' },
(payload) => {
if (payload.eventType === 'INSERT') {
setPosts(prev => [payload.new, ...prev])
} else if (payload.eventType === 'UPDATE') {
setPosts(prev =>
prev.map(post =>
post.id === payload.new.id ? payload.new : post
)
)
} else if (payload.eventType === 'DELETE') {
setPosts(prev =>
prev.filter(post => post.id !== payload.old.id)
)
}
}
)
.subscribe()
// クリーンアップ
return () => {
subscription.unsubscribe()
}
}, [])
return (
<div>
{posts.map(post => (
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
))}
</div>
)
}4. サブスクリプションの管理
// サブスクリプションの停止
subscription.unsubscribe()
// 全てのサブスクリプションを停止
supabase.removeAllChannels()リアルタイム機能により、ユーザーは常に最新の情報を見ることができ、より良いユーザー体験を提供できます。Supabaseを使えば、複雑なWebSocket実装なしで、モダンなリアルタイムアプリケーションが簡単に作成できます。
最短で課題解決する一冊
この記事の内容と高い親和性が確認できたベストマッチです。早めにチェックしておきましょう。
