Supabase の insertを使ってデータを登録する

Supabaseを使ってReact アプリ内でデータを insert（追加） する方法にフォーカスします。

前提

このチュートリアルでは、簡単な 学習記録アプリ を作成

• ユーザーが学習内容と学習時間を入力し、登録ボタンを押すとデータが保存される
• 登録後にリストが自動更新され、リロードしてもデータが保持される
• Supabase の insert を使用してデータを追加

---

1. Supabase クライアントのセットアップ

supabaseClient.js を作成して以下を記述。

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

const SUPABASE_URL = "https://xxxx.supabase.co";  // 自分のURLに変更
const SUPABASE_ANON_KEY = "your-anon-key";  // APIキーをセット

export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

---

2. Supabase の insert を使ってデータを登録

① データを追加する関数

const onClickAdd = async () => {
  if (text === "") {
    setError("学習内容を入力してください");
    return;
  }
  if (time <= 0) {
    setError("学習時間を1以上にしてください");
    return;
  }
  setError("");
  
  // Supabase の `insert` を使ってデータを追加
  const { error } = await supabase.from("study-record").insert([{ text, time }]);
  if (error) {
    console.error("データ追加エラー:", error);
    return;
  }
  
  await fetchData();  // 最新データを取得
  setText("");
  setTime(0);
};

② データ取得用の fetchData を作成

const fetchData = async () => {
  const { data, error } = await supabase.from("study-record").select("*");
  if (error) {
    console.error("データ取得エラー:", error);
    return;
  }
  setRecords(data);
};

③ 初回データ取得を実行（マウント時の処理）

useEffect(() => {
  fetchData();
}, []);

マウントとは？

React では、コンポーネントが最初に画面に表示（追加）されることを 「マウント」 と呼びます。
この useEffect は、コンポーネントがマウントされたとき （初回表示時） に fetchData() を実行し、Supabase からデータを取得します。

useEffect(() => { fetchData(); }, []); の動作

• fetchData() をコンポーネントの初回レンダリング時に実行
• []（空の依存配列）を指定することで、初回のみ実行
• Supabase からデータを取得し、リロードしても表示されるようにする

依存配列 [] とは？

useEffect の第2引数には 「依存配列」 を指定できます。

useEffect(() => {
  fetchData();
}, []);

• []（空の配列）を指定すると、最初の1回だけ実行される
• 例えば [text] を指定すると、text が変わるたびに fetchData() が実行される
• [] を使うことで、無駄な再実行を防ぐ

まとめ

• Supabase の insert を使ってデータを追加
• 追加後に fetchData() でリストを最新化
• リロードしてもデータが保持される
• マウント時に fetchData() を実行し、データを初期表示
• []（依存配列）を使い、初回だけ実行されるよう制御

参考資料