メインコンテンツへスキップ
レッスン一覧に戻る

atom.web-builder.supabase-table-design

Supabaseでテーブルを設計する

Supabaseでテーブルを設計する このレッスンでは、あなたのアプリのデータを保管する「箱」を Supabase(=データを保管してくれるクラウドサービス)に用意します。テーブル設計と聞くと難しそうですが、やるこ...

table-designedtable-designed保存したい情報の入れ物(テーブル)を設計できます。
想定時間未設定公開状態: draft
学習メモ

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: markdown_doc検証: basic_manual_check_v1

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

screenshot

メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。

diagramscreen_capture

レッスン本文

Supabaseでテーブルを設計する

このレッスンでは、あなたのアプリのデータを保管する「箱」を Supabase(=データを保管してくれるクラウドサービス)に用意します。テーブル設計と聞くと難しそうですが、やることは Excel のシートを1枚作る のとほぼ同じです。どんな列(=項目)が必要かを決めて、AI に SQL(=データベースに命令する言葉)を書いてもらうだけで完了します。所要時間は15分です。

テーブル設計の全体像

はじめる前に確認する

  • Supabase のプロジェクトが作成済みで、ダッシュボードにログインできる状態
  • お手元に AI ツール(Claude Code / Codex CLI / Cursor / ChatGPT のいずれか1つ)が使える
  • これから作るアプリで「何を保存したいか」が1つ決まっている(例: ToDo、読書メモ、顧客リストなど)

保存したいものを1行で決める

まず、保存したい情報を1行で言語化します。料理でいう「今日は何を作るか」を決めるステップです。

  • 良い例: 「ユーザーごとの ToDo を保存したい。内容・完了フラグ・作成日時が欲しい」
  • 良い例: 「読んだ本のメモを保存したい。タイトル・著者・感想・読了日が欲しい」
  • 悪い例: 「なんとなくユーザー情報を保存したい」(何を保存するか曖昧)
  • 悪い例: 「ユーザーと商品と注文と在庫を全部管理したい」(1テーブルに収まらない)

この1行が後で AI に渡す「注文書」になります。

AI にテーブル設計を相談する

次の文をそのままコピーして、AI ツールの入力欄に貼り付けてください。<ここにさっき決めた1行> の部分だけあなたの言葉に置き換えます。

Supabase(Postgres) で次の用途のテーブルを1つ設計してください。
用途: <ここにさっき決めた1行>
出力は以下の形式でお願いします:
1. 列一覧(列名・型・必須かどうか・説明)の表
2. CREATE TABLE の SQL
3. 想定される落とし穴を3つ
非エンジニア向けに、専門用語には括弧書きで日本語の説明を添えてください。

このプロンプト(=AIへの指示文)は、AI に「設計の表」「実行する SQL」「注意点」の3点セットを必ず返させるための型です。

返ってきた設計を読み解く

AI が返してきた列一覧を眺めて、次の3点を自分で確認します。

  1. id 列があるか: どの行が誰のものかを識別する番号です。通常 uuid 型が入っています
  2. user_id 列があるか: あなたのアプリでユーザーごとにデータを分けるなら必須です
  3. created_at 列があるか: 後で「いつ保存したか」を並べ替えたいときに使います

この3つが揃っていない場合は、AI にもう一度「id、user_id、created_at を必ず入れて作り直して」とお願いします。

Supabase に SQL を貼り付けて実行する

  1. Supabase ダッシュボード左のメニューから SQL Editor(=SQL を実行する画面)を開く
  2. AI が出した CREATE TABLE ... の SQL をそのまま貼り付ける
  3. 右下の Run ボタンを押す
  4. 「Success」と表示されれば完了です

Supabase SQL Editor でテーブルを作成する様子

作成できたことを確認する

左のメニューから Table Editor(=テーブル一覧の画面)を開き、今作ったテーブル名がリストに出ていればOKです。行(=データ)はまだ0件で問題ありません。この状態のスクリーンショットを1枚撮って、成果物として保存してください。メモには「テーブル名・列の一覧・用途の1行」を書き添えておくと、後で自分が何を作ったか思い出せます。

つまずいたらここを確認する

  • SQL 実行時にエラーが出る: エラー文をそのまま AI に貼り付けて「このエラーを直して」と聞くのが一番早い解決策です
  • 列の型が合っているか不安: 文章は text、数値は int4、日時は timestamptz、真偽は bool、と覚えておけば9割カバーできます
  • テーブルを作り直したい: Table Editor 上でテーブルを一度削除してから、AI に設計を直してもらい、もう一度 SQL を実行すれば作り直せます
  • user_id が必要か迷う: ログインしたユーザーごとにデータを分けたいなら入れる、全員で共有するなら不要、と判断します

このレッスンのゴール

次がすべて言える・見せられる状態になっていれば完了です。

  • 保存したいものを1行で説明できる
  • AI が出した列一覧を自分の言葉で説明できる
  • Table Editor で新しいテーブルが見えているスクリーンショットがある
成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: markdown_doc

検証: basic_manual_check_v1

証跡とメディア

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

screenshot

メディア

diagramscreen_capture
学習完了