コンテンツにスキップ / Skip to content
</>
Vibe Coder Guide
Supabase

データベース(Supabase)

お客様のデータを保存・管理するための仕組みです。Tier 2プロジェクトで、データの保存が必要な場合に使います。

Tier 2 プロジェクト

データベースとは?

データベースは、情報を整理して保存する場所です。Excelの表のように、行と列でデータを管理しますが、ウェブサイトやアプリから直接データを読み書きできるのが特徴です。

🏠 たとえるなら:物件管理台帳です。「どのお客様が」「どの物件に」「いつ問い合わせたか」を一覧で管理できます。紙の台帳と違い、ウェブサイトから自動で記録・検索ができます。
関連用語:

なぜSupabaseを使うの?

Supabaseは、データベースを簡単に使えるサービスです。私たちのチームに最適な理由がいくつかあります。

Excelのような管理画面

プログラミング不要で、表形式でデータを見たり編集できます。お客様からの問い合わせ一覧なども、ブラウザ上で確認できます。

セキュリティ内蔵

ログイン認証機能が標準装備。「誰がどのデータを見られるか」を細かく制御できます。

自動でAPI生成

テーブル(表)を作るだけで、ウェブサイトから読み書きできるAPIが自動で作られます。Claude Codeがこの接続を自動で設定します。

無料で始められる

無料プランでデータベース500MB、月間50,000ユーザーまで対応。小〜中規模のプロジェクトなら十分です。

どうやって使うの?

データベースのセットアップはエンジニアが行います。皆さんは以下のことだけ覚えてください。

1

エンジニアにデータベースが必要と伝える

プロジェクト依頼時に「お客様のデータを保存したい」「フォームの送信内容を記録したい」と伝えてください。エンジニアがSupabaseプロジェクトを作成します。

2

どんなデータを保存するか相談する

「物件情報」「お客様情報」「お問い合わせ内容」など、どんなデータを扱うかエンジニアと相談してください。テーブル(表)の構成を一緒に決めます。

📋 物件管理台帳の「列」を決めるイメージです。「物件名」「住所」「価格」「担当者」など。
3

Claude Codeで開発する

エンジニアがSupabaseの接続情報を環境変数に設定します。あとはClaude Codeに「フォームの送信内容をデータベースに保存して」などと指示するだけ。Claude Codeが接続コードを書いてくれます。

4

管理画面でデータを確認する

Supabaseの管理画面(ダッシュボード)にアクセスすると、保存されたデータをExcelのような表形式で確認・編集できます。エンジニアがアクセス権を設定してくれます。

どんな時にデータベースが必要?

以下のような機能を作りたい場合は、データベースが必要です。

データベースが必要 ✅
  • お問い合わせフォームの送信内容を保存したい
  • お客様のアカウント登録・ログイン機能を作りたい
  • 物件情報の一覧を管理・表示したい
  • 予約システムを作りたい
  • お客様マイページに過去のやり取りを表示したい
データベース不要 ❌
  • ランディングページを作る(情報を表示するだけ)
  • 会社紹介ページを作る
  • イベント告知ページを作る
  • デモやプロトタイプを作る

料金

Supabaseは無料プランから始められます。

Free
$0/ 月額
  • データベース 500MB
  • 月間 50,000 ユーザー
  • ファイルストレージ 1GB
  • 2つのプロジェクトまで
Recommended
Pro
$25/ 月額(プロジェクトごと)
  • データベース 8GB
  • 月間 100,000 ユーザー
  • ファイルストレージ 100GB
  • 日次バックアップ

まずは無料プランで始めて、プロジェクトが成長したらProプランにアップグレードできます。料金の管理はエンジニアが行います。

セキュリティについて

Supabase利用時のセキュリティルールです。

関連用語:

Supabaseダッシュボードの使い方

データの確認や簡単な編集は、Supabaseのダッシュボード(管理画面)で行えます。プログラミングの知識は不要です。

テーブルエディタ

Excelのような画面でデータを表示・編集。行の追加・削除も簡単です。

フィルター・検索

特定の条件でデータを絞り込めます。「東京都の物件だけ表示」のような操作が可能です。

CSVエクスポート

データをCSVファイルとしてダウンロードできます。Excelで開いて分析や報告に使えます。

Claude Codeへの指示例

やりたいことClaude Code への指示
フォームのデータを保存したい

「お問い合わせフォームの送信内容をSupabaseに保存して」

保存したデータを表示したい

「Supabaseから物件一覧を取得して、カード形式で表示して」

ログイン機能を追加したい

「Supabase Authでメールアドレスのログイン機能を作って」

データを検索できるようにしたい

「物件をエリアと価格帯で検索できる機能を作って」

📌大切なポイント

  • データベースが必要かどうか迷ったら、エンジニアに相談してください
  • データベースを使うプロジェクトは自動的にTier 2になります
  • Supabaseのセットアップはエンジニアが行うので、皆さんが設定する必要はありません
  • 保存されたデータはSupabaseのダッシュボードでいつでも確認できます