supabaseの使用方法について

はじめに

supabaseの使用方法についていつでも見返せるように、わかりやすく記述します。

supabaseとは

主にデータベースを管理できるオープンソースです。フルリレーショナルデータベース(データをテーブルで管理し、テーブル同士でつなげられるDB）が特徴でリレーション(関係)を自由に扱うことができます。

他にも認証やストレージ管理も使用することができ、Firebaseに似た特徴を持ちます。

使用方法

1,supabaseへログイン

2,New Projectでプロジェクト作成

3,プロジェクトが作成されると、Project URLとAPI Keyが作成されるので.envファイルに保存する(.gitignoreへ.envを必ず設定)

4,下記を使用しクライアントセットアップ

npm install @supabase/supabase-js

5,src/supabaseClient.jsファイルを作成する
　中身は下記を記述します。

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

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

6,envファイルにsupabaseのProjectURLとAPIKEYを設定

VITE_SUPABASE_URL=---URL---
VITE_SUPABASE_ANON_KEY=---APIKEY---

7,Reactのコンポーネントで下記のようにして使用する

import { supabase } from "./supabaseClient";

ここまでの関数

createClient　→　supabaseとサーバーとのやり取りを行う関数

import.meta.env　→　環境変数を読み込むという意味
上記によりコードに直接URLやAPIを書かずに安全に管理ができる

createClient → URLとAPIキーを渡してSupabaseクライアントを作成

データベースの作成

supabase内のDatabaseをクリック、「create a new table」でテーブルを追加していく。

  useEffect(() => {
    const fetchData = async () => {
      const { data, error } = await supabase.from("テーブル名").select("*");
      if (error) console.log(error);
      else setRecords(data);
    };
    fetchData();
  }, []);

supabase.from("テーブル名")　→　自身のテーブル名を指定

select("*")　→　すべてのカラムの情報を取得する

終わりに

基本的なセットアップを記述しました。セットアップに迷ったときはまた見返したいと思います。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！