Supabase という便利なデータベースがあるそうです。
無料で良い感じに使え、色々便利な機能があるっぽいので試して見ようと思います。
Supabase を使おうと思った理由
まずはシンプルに、Reactでの実装が簡単っぽいのが良き。
個人的に便利そうだな～と思ったのは、簡単にログイン機能を実装できるところ。GoogleやMicrosoftのアカウントでログインできるはもちろん、DiscordやGitHubなどでもサインインできるような機能がサポートされてるんですよね。こういうの作るの面倒くさいから助かる……
またストレージもサポートしてます。DBとストレージを別々に用意しなくても済むって最高じゃない？（特に初心者からすると覚える事が少なくて済む！）
あと使わないけど、リアルタイムのデータ同期もできるとのこと。すごい！！
Supabase の設定
では、早速 Supabase を使っていきましょう。ますはホームページにアクセスしてください。
Start your project をクリックすると、ログイン画面が出ます。アカウントが現状無いので Sign Up Now から作成してください。
アカウントを作ったら、New project からプロジェクトを作成してください。
プロジェクトの作成が完了すると、以下のページが表示されます。
下の方に移動するとProject API が表示されています。ここにProject URLとAPI Keyがあるのを見つけておきます。
データベース（テーブル）を作ってみる
クイックスタートが以下に書いてあるので、その通りに操作してみます。
SQL でデータベースのテーブルを作れるようなので試します。左メニューに SQL Editor があるので開きます。
テーブルの作成
SQL Editor ではドキュメントのとおり、以下を記入。
-- Create the table
create table countries (
id bigint primary key generated always as identity,
name text not null
);
-- Insert some sample data into the table
insert into countries (name)
values
('Canada'),
('United States'),
('Mexico');
alter table countries enable row level security;そして Run selected をクリック。
左メニューの Table Editor を開くと、ちゃんとテーブルが作成されているのを確認できます！
RLS ポリシーの作成
再度 SQL Editor に移動し、以下に書き換えて Run selected をクリック。
create policy "public can read countries"
on public.countries
for select to anon
using (true);今度は左メニューの Authentication へ移動し Policies を見ると設定が追加されていることを確認できます。
テーブルのTypesをダウンロード
テーブルを作成したら、TypeScript で利用する型ファイルをダウンロードします。自作してもいいけど自動的に生成してくれるみたいなので活用しましょう！
まずは左メニューの API Docs をクリック。
Tables and Views の Introduction をクリック。
Generating types の 右側にある Generate and download types のボタンをクリック。
supabase.tsがダウンロードされます！
React Router v7 で Supabase を利用する
では Supabase を React で動かしてみましょう！
下準備
まずは React Router v7 を適当なディレクトリでインストール。
npx create-react-router@latest my-react-router-appインストールしたディレクトリへ移動。
cd my-react-router-appSupabase を動かすために必要なファイルをインストール。
npm install @supabase/supabase-js秘匿したい情報を env に書き込みたいと思います。Vite で env を扱えるよう vite-plugin-env-compatible をインストール。
npm i vite-plugin-env-compatiblemy-react-router-appの直下に.envを作成。
VITE_SUPABASE_URL = "Project URL"
VITE_SUPABASE_KEY = "API Key"そして最後に、ダウンロードしてあったsupabase.tsをmy-react-router-app/app/に移動させておきましょう。
Supabase が動くページを作る
現状作ってあるテーブルを読み込むだけのページを作ってみましょう。
まずは./app/routes/countries.tsxを作成します。
import type { Route } from "./+types/countries";
import { useEffect, useState } from "react";
// Supabaseの型ファイル
import type { Database } from "../supabase";
// Supabaseを利用する
import { createClient } from "@supabase/supabase-js";
// Supabaseに接続
const supabase = createClient<Database>(
import.meta.env.VITE_SUPABASE_URL,
import.meta.env.VITE_SUPABASE_KEY
);
export function meta({}: Route.MetaArgs) {
return [{ title: "Countries" }];
}
export default function Component() {
// Supabaseのテーブルを保持
const [countries, setCountries] = useState<Database["public"]["Tables"]["countries"]["Row"][]>([]);
// レンダリング時のみSupabaseのテーブルを取得
useEffect(() => {
getCountries();
}, []);
async function getCountries() {
const { data, error } = await supabase.from("countries").select();
if (error) {
console.error("Error:", error);
return;
}
if (data) {
setCountries(data);
}
}
return (
<div className="h-screen flex items-center justify-center">
<div className="p-6 border border-gray-200 dark:border-gray-700 rounded-3xl">
<ul>
{countries &&
countries.map((country) => (
<li key={country.name}>{country.name}</li>
))
}
</ul>
</div>
</div>
);
}
そして./app/routes.tsを編集してみます。
import { type RouteConfig, index, route } from "@react-router/dev/routes";
export default [
index("routes/home.tsx"),
route("countries", "routes/countries.tsx"),
] satisfies RouteConfig;編集が完了したら起動してみます。
npm run dev起動したら http://localhost:5173/countries へアクセスしてみましょう。すると、テーブルと同じ情報が表示されました！
〆
とりあえずテーブルを読み込む、ということは簡単にできましたね！
ログイン画面とか、テーブルの編集画面とか、編集・削除できるユーザを絞るとか、そういう事も色々できるみたいなので試して見ましょうね！（今回は簡単に確認するだけでしたので割愛します）
無料の注意点
ちなみに無料版では Supabase に1週間アクセスないと データが消えてしまう プロジェクトが停止（利用できない状態になる） みたいです。なのでテストするときは注意しましょう！
2024/12/26 21:15 追記
単純にプロジェクトが停止するだけで、Web上で再稼働できるみたいです！でも止まっちゃうと困るので注意しましょう！！
Cronとかで数日ごとに自動的にアクセスしてテーブルを読み込む……ってやれば対策はできそうかな？ググって出てきたradditでも張っておきます。
