Supabaseを導入してAIから扱いやすい状態にする

新しいキッチンを使い始めるとき、調理器具にラベルを貼ったり、食材を分類して棚にしまったりしますよね。そうしておけば、初めてキッチンに入った人でも「塩はここ、フライパンはあそこ」とすぐに見つけられます。

データベース（＝データを整理して保存する場所）も同じです。AIという頼れる助手に「このデータは何か」がすぐ伝わるように、きれいに整えておくのがこのレッスンの目標です。

具体的には、Supabase（スーパベース＝ブラウザだけでデータベースを作れるクラウドサービス）にテーブル（＝表）を作り、AIが読みやすい名前と説明を付けていきます。

このレッスンを始める前に、次の準備が終わっているか確認しましょう。

• Google または GitHub のアカウントを持っている
• ブラウザ（Chrome など）が使える
• 前のレッスン「Next.jsアプリを作る」が完了している
• 環境変数（＝アプリに渡す設定値）の扱い方を知っている

1. ブラウザで supabase.com を開きます
2. 画面右上の「Start your project」をクリックします
3. GitHub アカウントでログインします（GoogleアカウントでもOKです）

ログインが終わると、Supabaseのダッシュボード（＝管理画面）が表示されます。

💡 AIに聞いてみよう: ログイン画面で迷ったら、ChatGPT や Claude に「Supabaseに GitHub アカウントでサインアップする手順を教えて」と聞いてみましょう。画面が変わっていても最新の手順を教えてくれます。

プロジェクト（＝データをまとめる箱）を作ります。レストランでいう「新しい店舗をオープンする」イメージです。

1. 「New Project」をクリックする
2. 次の項目を入力する
   • Name: my-app（自分のアプリ名でOKです）
   • Database Password: 「Generate a password」をクリックして、表示されたパスワードをどこかにメモしておく
   • Region: Northeast Asia (Tokyo) を選ぶ（日本から使うなら一番速い場所です）
3. 「Create new project」をクリックする

完了まで1〜2分かかります。そのまま待ちましょう。

⚠️ パスワードは必ずメモしてください。 あとから確認できないため、忘れるとプロジェクトを作り直すことになります。メモ帳アプリやパスワード管理ツールに保存しましょう。

プロジェクトができたら、データを入れるテーブルを作ります。ここが一番重要なステップです。

テーブル名は「AIが見てすぐ意味が分かる名前」にするのがコツです。棚に「お皿」とラベルを貼るように、データの中身がそのまま伝わる英語の名前を付けましょう。

良い名前の例

• profiles — ユーザーのプロフィール
• posts — 投稿
• todos — やることリスト

悪い名前の例

• table1 — 何のデータか分からない
• usr_mst_2024 — 略語が多くてAIが誤解しやすい
• ユーザー情報 — 日本語だとAIが扱いにくい場合がある

実際に作ってみる

1. 左メニューの「Table Editor」をクリックする
2. 「Create a new table」をクリックする
3. テーブル名に profiles と入力する
4. 「Enable Row Level Security (RLS)」のチェックは入れたままにする（データを守る仕組みです。あとのレッスンで詳しく扱います）
5. 「Add column」を使って、次のカラム（＝列）を追加する

1. 「Save」をクリックする

💡 AIに聞いてみよう: 「profiles テーブルに他にどんなカラムがあると便利？」と Claude Code や ChatGPT に聞いてみましょう。アバター画像のURL用カラムや自己紹介用カラムを提案してくれます。

AIがテーブルの意味を正しく理解できるように、コメント（＝説明文）を書きます。レシピに「この調味料は味をまとめるため」とメモを残すのと同じです。

このひと手間が、あとでAIにコードを書いてもらうときの精度を大きく左右します。

1. Table Editor で profiles テーブルを開く
2. 右上の歯車「⚙」アイコンをクリックする
3. テーブルの説明欄に次のように入力する
   • 「このアプリのユーザープロフィールを保存するテーブル」
4. 保存したら、各カラムの「⚙」からコメントを追加する
   • user_id → 「Supabase認証ユーザーのID」
   • name → 「ユーザーの表示名」
   • created_at → 「レコード作成日時（自動入力）」

良いコメントの例

• 「Supabase認証ユーザーのID。auth.users.id と紐づく」 — 関連がわかる

悪いコメントの例

• 「ID」 — カラム名を繰り返しただけで情報が増えていない

AIツール（Claude Code や Cursor など）にSupabaseを操作してもらうには、接続情報（＝住所と鍵）が必要です。

1. 左メニューの「Settings」→「API」を開く
2. 次の2つをメモする
   • Project URL（例: https://xxxx.supabase.co）— これが「住所」です
   • anon public キー（長い文字列）— これが「鍵」です

⚠️ service_role キーは権限が強すぎるため、ここでは使いません。必ず anon（アノン＝誰でも安全にアクセスできるキー）を使いましょう。誤って公開すると、データを全件削除される危険があります。

環境変数ファイルに書き込む

メモした接続情報を、前のレッスンで学んだ環境変数ファイル（.env.local）に追加します。

NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...

↑ これは「アプリに『Supabaseの住所と鍵はここだよ』と教える設定」です。xxxx と eyJ... の部分を、先ほどメモした自分の値に置き換えてください。

💡 AIに聞いてみよう: Claude Code を使っているなら、こう聞いてみましょう：「.env.local に Supabase の接続情報を追加して。Project URL は https://xxxx.supabase.co で、anon key は eyJ... です」。ファイルの編集をAIがやってくれます。

最後に、AIがちゃんとテーブル構造を理解しているか確認します。これが「成果物」です。

方法1: ChatGPT / Claude に聞く

次のプロンプト（＝AIへの指示文）をコピーして貼り付けてください。

SupabaseのプロジェクトURLは https://xxxx.supabase.co、APIキーは eyJ... です。
profiles テーブルの構造を教えてください。
カラムごとの型と説明も含めてください。

方法2: Claude Code / Cursor で聞く（おすすめ）

プロジェクトフォルダで Claude Code を起動して、次のように入力します。

.env.local の Supabase 接続情報を使って、profiles テーブルの構造を確認して。

成功の判断基準

AIの返答に以下の4つが含まれていれば成功です。

• ✅ id カラムがある（int8 / Primary Key）
• ✅ user_id カラムがある（uuid）
• ✅ name カラムがある（text）
• ✅ created_at カラムがある（timestamptz）

4つすべて確認できたら、AIの返答のスクリーンショットを撮って保存しましょう。これがこのレッスンの完了証拠になります。

💡 上の表で解決しない場合は、エラーメッセージをそのままコピーして Claude Code に「このエラーの原因と対処法を教えて」と聞きましょう。AIはエラー解読が得意です。

• Supabase にアカウントを作り、プロジェクトを立ち上げた
• AIが理解しやすい名前と説明でテーブルを作った
• 接続情報を環境変数に設定した
• AIにテーブル構造を正しく読ませることを確認した

次のレッスンでは、このテーブルにデータを安全に読み書きするルール（RLS）を設定します。