「データベースって難しそう」——受講者との初回面談で、8割以上がこう口にする。テーブル設計、SQL、リレーション。確かに用語だけ聞くと敷居が高い。だが、バイブコーディングでデータベースを扱う分には、これらを自分で書く必要がなかった。
バイブコーディングでデータベースを使う方法、結論から言うとSupabaseかFirebaseを選び、AIにテーブル設計からクエリまで任せれば動く。必要なのは「どんなデータを保存したいか」を言語化する力だけだ。
少なくとも、僕の講座で50人以上がこの方法でデータベース連携のアプリを完成させている。
- データベースの基本概念——プログラミング未経験者でも理解できる解説
- Supabase vs Firebase——バイブコーディングに最適なDB選び
- AIにデータベース設計を任せるプロンプトの書き方
- バイブコーディングでCRUD操作を実装する手順
- データベース連携でよくあるトラブルと対処法
データベースの基本概念——これだけ知っておけばいい
データベースとは、データを整理して保存する場所。Excelのスプレッドシートに近いイメージで考えれば十分だろう。
たとえばタスク管理アプリなら、「タスク名」「期限」「完了フラグ」「担当者」といった列を持つテーブルが1つあればいい。Excelで言うシートがテーブル、列がカラム、行がレコード。この3つの用語だけ覚えておけば、AIへの指示に困ることはなかった。
データベースを操作する言語がSQL。SELECT、INSERT、UPDATE、DELETE——こうしたSQLの文法をバイブコーディングで学ぶ必要はない。AIがSQLを自動生成し、Supabaseのクライアントライブラリがそれを実行する。ただし「SQLとは何をする言語か」というレベルの理解はあると、トラブル時の対処がスムーズになるのではないだろうか。
Supabase vs Firebase——バイブコーディングでのDB選び
データベースサービスの2大選択肢がSupabaseとFirebase。どちらもバイブコーディングと組み合わせて使える。
| 項目 | Supabase | Firebase |
|---|---|---|
| DB種類 | PostgreSQL（リレーショナル） | Firestore（NoSQL） |
| 無料枠 | 500MB、50,000行 | 1GB、50,000読み取り/日 |
| 認証機能 | 内蔵（Auth） | 内蔵（Firebase Auth） |
| AIとの相性 | ◎（SQLベースで出力安定） | ○（NoSQLはAIの出力がブレやすい） |
| 学習コスト | 低い | やや高い |
僕のおすすめはSupabase。理由は2つ。SQLベースなのでAIが生成するクエリの精度が高い。そしてダッシュボードからテーブルの中身を直接確認・編集できるため、デバッグが楽だった。
Firebaseを選ぶべきケースもある。リアルタイム同期が必要なチャットアプリや、Googleのエコシステム（Firebase Hosting、Cloud Functions）を活用したい場合だ。ただし初学者がバイブコーディングで最初に触るなら、Supabaseの方がつまずきにくかった。
AIにデータベース設計を任せるプロンプトの書き方
データベース設計をAIに任せる際、プロンプトの書き方が出力を大きく左右する。
最も効果的だったのは、「どんなデータを保存したいか」をリストで渡す方法。「ユーザーテーブル（名前、メール、パスワードハッシュ、登録日）と、タスクテーブル（タスク名、説明、期限、完了フラグ、担当ユーザーID）を作って」のように、テーブルとカラムを列挙する。
リレーション（テーブル同士の関連）も日本語で指示できた。「1人のユーザーが複数のタスクを持つ」と書けば、AIは外部キーを設定したSQLを生成した。ERD（Entity-Relationship Diagram）を描く必要はない。
SupabaseにはRLS（Row Level Security）という仕組みがある。これを有効にしないと、誰でもデータベースの全データにアクセスできてしまう。「RLSを有効にして、ログインユーザーが自分のデータだけ読み書きできるポリシーを設定して」とAIに指示するのを忘れないこと。僕の受講者の約3割がこの設定を忘れて、テストデータが外部から見える状態になっていた。
バイブコーディングでCRUD操作を実装する
CRUD（Create, Read, Update, Delete）はデータベース操作の基本4パターン。タスク管理アプリを例に、バイブコーディングでの実装手順を示す。
supabase.comでプロジェクトを作成し、テーブルエディタからテーブルを手動で作成する。もしくはCursorに「Supabaseのマイグレーションファイルを作って」と指示すれば、SQLが自動生成された。
「Supabase JSクライアントを使って接続して。URLとanon keyは環境変数から読み込んで」と指示する。Supabaseの接続情報はダッシュボードの「Settings > API」から取得できた。
「タスクの追加フォーム、一覧表示、編集ボタン、削除ボタンを実装して。Supabaseのinsert、select、update、deleteを使って」と指示した。フォームのバリデーションも含めて、Cursorが一括で生成してくれた。
この一連の工程にかかった時間は約45分。データベースの知識がない受講者でも、1時間以内にCRUDアプリを動かせている。
データベース連携でよくあるトラブルと対処法
受講者がつまずくポイントを3つ挙げる。
Supabaseのテーブルにデータが入らないケースの原因は、RLSポリシーの設定ミスが最も多かった。RLSが有効でポリシーが未設定だと、全てのINSERT操作が拒否される。SupabaseのダッシュボードでRLSの状態を確認するのが最初の一手だろう。
SupabaseのURLやAPIキーが.envファイルに正しく設定されていない場合に発生する。Next.jsの場合、環境変数のプレフィックスにNEXT_PUBLIC_が必要な点を忘れがちだった。エラーが出たら環境変数名の確認が先決だ。
テーブルのカラムがinteger型なのに文字列を送信してエラーになるケースも頻発した。AIが生成するコードとテーブル定義の型が合っていない場合に発生した。テーブル定義をAIに共有すると、型の不一致を回避できる。
- バイブコーディングでデータベースを使うのに、SQLやDB設計の知識は不要
- Supabase（PostgreSQL）がバイブコーディングとの相性で最も優れている
- プロンプトでは「保存したいデータ」をテーブルとカラムのリストで渡すのが効果的
- CRUD操作は約45分でフル実装が可能。未経験者でも1時間以内に動かせた
- RLS（Row Level Security）の設定はセキュリティ上必須。忘れると全データが公開される
- データ保存されない・環境変数エラー・型の不一致が三大トラブル
データベースはアプリの「記憶」。これがないと、ページをリロードするたびにデータが消える。バイブコーディングでデータベース連携ができれば、作れるアプリの実用性が格段に上がるのではないだろうか。
