Supabase

スーパベース

Next.js

Jamstack

TypeScript

Supabase を分かりやすく

Supabase はバックエンドの開発をスムーズにし、一つのプラットフォームでほとんどの必要なサービスを提供することで、開発者の負担を大幅に軽減してくれるんです。

つまり、データベース・OAuth 認証・ストレージ・リアルタイムの更新など、全てがこの一つのサービスで可能なんです。これにより、開発者は、これらのサービスを個別に設定する必要がなくなり、開発の効率が大幅に向上します。

Supabase は、オープンソースの Firebase の代替品として人気があります。主にバックエンドの機能をフロントエンド開発者に提供し、短期間でフルスタックアプリケーションを構築できるように設計されています。

主な機能

データベース: PostgreSQL を基盤としたリレーショナルデータベースがあります。
認証: メール、パスワード、ソーシャルログインなど多様な認証方法をサポートしています。
ストレージ: ファイルのアップロードやダウンロードができるストレージ機能があります。
リアルタイム: データベースの変更をリアルタイムでフロントエンドに反映できます。
API: REST と GraphQL の両方の API が自動的に生成されます。

使い方の一例（JavaScript）

データを挿入する場面での Supabase のコードは以下のようになります。

const { data, error } = await supabase
  .from("table_name")
  .insert([{ key: "value" }]);

これは非常にシンプルで、SQL を直接書く必要がありません。エラーハンドリングも簡単に行えます。

全体的に Supabase は、フロントエンド開発者がバックエンドの機能を簡単に利用できるようにするための便利なツールです。多くの基本的なバックエンドの機能をカバーしているため、導入が簡単で、開発速度を大幅に向上させることが可能です。

`fetchUsers`関数

以下は、Supabase を使った例を紹介します。

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
const supabase = createClient(supabaseUrl, supabaseKey);

async function fetchUsers() {
  const { data, error } = await supabase
    .from("users")
    .select("*")
    .order("created_at", { ascending: false });

  if (error) throw error;

  return data;
}

export default function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    async function getUsers() {
      const data = await fetchUsers();
      setUsers(data);
    }
    getUsers();
  }, []);

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

この例では、Supabase を使って、データベースからユーザーを取得しています。Supabase は、RESTful API と Realtime な API を提供しており、ここでは、RESTful API を使って、users テーブルからユーザーを取得しています。

Supabase の JavaScript クライアントライブラリを使って、データの取得を行います。まず、createClient関数を使って、Supabase のクライアントを作成します。その後、fetchUsers関数を作成して、Supabase のfrom関数を使って、usersテーブルから全てのデータを取得し、order関数を使って、created_atの降順で並び替えています。

フックを使ったデータの取得

最後に、取得したユーザーをコンポーネントに表示しています。ここでは、useStateフックとuseEffectフックを使って、データの取得と表示を行っています。useStateフックを使って、取得したユーザーのデータを state に保存し、useEffectフックを使って、コンポーネントがマウントされた時に、fetchUsers関数を実行して、ユーザーのデータを取得しています。

また、Supabase は、Realtime モードを提供しています。これにより、データベースに変更があったときに、その変更をリアルタイムに受信して UI を更新することができます。これは、チャットアプリやリアルタイムの競技ゲームなど、リアルタイム性が必要なアプリケーションに特に適しています。

Supabase は、以下のように使用できます。

import { useState, useEffect } from "react";
import { createClient } from "@supabase/supabase-js";

export default function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const supabase = createClient("https://abc123.supabase.co", "my-api-key");

    supabase
      .from("my-table")
      .select("*")
      .then(({ data: newData }) => setData(newData))
      .catch(console.error);

    const mySubscription = supabase
      .from("my-table")
      .on("INSERT", ({ new: newData }) => setData([...data, newData]))
      .subscribe();

    return () => {
      mySubscription.unsubscribe();
    };
  }, []);

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

上記の例では、useStateを使用して data ステートを宣言しています。次に、useEffectフックを使用して、Supabase クライアントを作成し、fromメソッドを使用してテーブルにアクセスしています。selectメソッドを使用して、テーブル内の全てのデータを取得しています。その後、取得したデータを setData で data ステートに保存しています。

また、mySubscriptionという変数に、Supabase のリアルタイムサブスクリプションをセットしています。これにより、テーブルに新しいデータが挿入されたときに、INSERT イベントを受信して、新しいデータを data ステートに追加しています。

最後に、useEffectのクリーンアップ関数内で、mySubscription.unsubscribe()を呼び出すことで、リアルタイムサブスクリプションを解除しています。

このように、Supabase は簡単に導入でき、リアルタイム機能も備えており、開発者にとって非常に使いやすいデータベースです。

Next.js を学ぶ一覧へ