SupabaseとReactアプリを連携する完全ガイド

この記事では、バックエンドの知識がなくても簡単にデータベースを扱えるSupabaseと、フロントエンドで人気のライブラリReactを連携させる方法を、初心者向けにわかりやすく解説します。

1. Supabaseとは？

Supabaseは、バックエンドをゼロから構築することなく、リアルタイムデータベースや認証機能などを簡単に利用できるBaaS (Backend as a Service) です。PostgreSQLをベースにしているので、SQLの知識があればすぐに使い始められます。Firebaseの代替として注目されています。

2. 手順の概要

大まかな手順は以下の通りです。

1. Supabaseプロジェクトの作成：データベースを用意します。
2. テーブルの作成：データの入れ物となるテーブルを作ります。
3. Reactアプリの準備：連携するためのReactアプリをローカルに作成します。
4. Supabaseクライアントのインストールと初期設定：ReactアプリからSupabaseに接続するための準備をします。
5. データの取得・追加：実際にデータベースとやりとりするコードを書いて、動作を確認します。

3. ステップバイステップ解説

Step 1: Supabaseプロジェクトの作成

まず、Supabaseの公式サイトにアクセスし、アカウントを作成します。

1. Supabaseのダッシュボードにログイン後、「New project」をクリック。
2. プロジェクト名（例：my-react-app-db）を入力し、データベースのパスワードを設定します。
3. リージョン（サーバーの場所）を選択します。日本からアクセスするなら「ap-northeast-1 (Tokyo)」がおすすめです。
4. 「Create new project」をクリックして、プロジェクトが作成されるのを待ちます。

Step 2: テーブルの作成

次に、データを保存するためのテーブルを作成します。今回は簡単な「Todoリスト」を作ってみましょう。

1. 左側のメニューから、アイコンの「Table Editor」を選択します。
2. 「Create a new table」をクリックします。
3. テーブル名にtodosと入力します。
4. 以下のようにカラムを追加します。
   • id (主キー、自動生成されるため変更不要)
   • title (型: text)
   • is_complete (型: boolean, デフォルト値: false)
5. 「Save」をクリックしてテーブルを作成します。

これで、データを保存する準備が整いました。

Step 3: Reactアプリの準備

次に、ローカルでReactアプリを作成します。

1. ターミナルを開き、以下のコマンドを実行します。
   npx create-react-app my-todo-app
   
2. 作成したディレクトリに移動します。
   cd my-todo-app

Step 4: Supabaseクライアントのインストールと初期設定

ReactアプリからSupabaseに接続するためのライブラリをインストールします。

1. ターミナルで以下のコマンドを実行します。
   npm install @supabase/supabase-js
2. SupabaseプロジェクトのAPIキーを取得します。
   • Supabaseダッシュボードの左側メニューから「Project Settings」⚙️ -> 「API」を選択します。
   • 「anon public」キーと「URL」をメモしておきます。これらの情報は、他人に知られないように注意してください。
3. srcフォルダ内にsupabaseClient.jsというファイルを作成し、以下のコードを記述します。

import { createClient } from '@supabase/supabase-js' 
const supabaseUrl = 'YOUR_SUPABASE_URL' // ここにURLを貼り付け 
const supabaseKey = 'YOUR_SUPABASE_KEY' // ここにanon publicキーを貼り付け 
export const supabase = createClient(supabaseUrl, supabaseKey)

これで、Supabaseに接続するための準備が完了しました。

Step 5: データの取得・追加

最後に、App.jsを編集して、実際にSupabaseとデータのやりとりを行います。

src/App.jsを以下のように書き換えます。

import React, { useState, useEffect } from 'react';
import { supabase } from './supabaseClient'; // 作成したクライアントをインポート

function App() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  // Todoリストを取得する関数
  async function getTodos() {
    let { data: todos, error } = await supabase
      .from('todos')
      .select('*');
    if (error) {
      console.error('Error fetching todos:', error);
    } else {
      setTodos(todos);
    }
  }

  // 新しいTodoを追加する関数
  async function addTodo() {
    const { data, error } = await supabase
      .from('todos')
      .insert([
        { title: newTodo, is_complete: false },
      ]);
    if (error) {
      console.error('Error adding todo:', error);
    } else {
      setNewTodo('');
      getTodos(); // 追加後にリストを再取得
    }
  }

  // コンポーネントがマウントされたときにTodoを取得
  useEffect(() => {
    getTodos();
  }, []);

  return (
    <div>
      <h1>My Todo List 📝</h1>
      <div>
        <input
          type="text"
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
          placeholder="新しいTodoを入力"
        />
        <button onClick={addTodo}>追加</button>
      </div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

【ポイント解説】

• useEffectフックを使って、コンポーネントが最初に表示されたときにgetTodos関数を呼び出しています。
• supabase.from('todos').select('*')で、todosテーブルのすべてのデータを取得しています。
• supabase.from('todos').insert(...)で、新しいデータをtodosテーブルに追加しています。

最後に、ローカルサーバーを起動して動作を確認しましょう。

npm start

ブラウザでhttp://localhost:3000にアクセスし、入力欄にテキストを入れて「追加」ボタンを押してみてください。Supabaseのダッシュボードでテーブルを確認すると、追加されたデータが表示されているはずです。

これで、SupabaseとReactアプリの連携が完了しました。認証機能など、さらに多くの機能があるので、ぜひ色々試してみてください！🎉