Supabaseでフルスタック開発を始める完全ガイド！初心者でも10分でバックエンドが完成

Supabaseとは何か

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-js

4. 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: '[email protected]',
  password: 'securepassword123'
})

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

2. ログイン機能

// メールとパスワードでログイン
const { data, error } = await supabase.auth.signInWithPassword({
  email: '[email protected]',
  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実装なしで、モダンなリアルタイムアプリケーションが簡単に作成できます。

おすすめ記事

Docker Composeで開発環境を簡単構築！初心者向け完全ガイド

Docker

ソフトウェアテスト自動化完全ガイド！初心者から始める効率的な品質管理法

プログラミング

【2025年最新】バックエンドパフォーマンス最適化完全ガイド：レスポンス時間を5倍速くする実践テクニック

パフォーマンス最適化

【2025年保存版】WebAssemblyフロントエンド統合完全ガイド：高速化と新機能活用の実践テクニック

JavaScript