Appearance
データベース連携
このセクションでは、Vercel Postgresを使ってデータを保存できるようにします。
ゴール
- ToDoデータがデータベースに保存される
- ページを更新してもデータが残る
- CRUD（作成・読取・更新・削除）が全てできる
1. Vercel Postgresとは
Vercel Postgresは、Vercelが提供するデータベースサービスです。
メリット：
- Vercelアカウントがあれば無料で使える
- 設定が簡単
- Next.jsとの相性が良い
2. プロジェクトをVercelに連携
まず、ToDoアプリのフォルダでVercelと連携します。
Vercelにプロジェクトをリンク
bash
vercel link以下の質問に答えます：
- 「Set up」 →
Yを入力 - 「Which scope」 → 自分のアカウントを選択
- 「Link to existing project?」 →
Nを入力（新規作成） - 「What's your project's name?」 →
todo-appと入力 - 「In which directory is your code located?」 → そのままEnter
3. データベースを作成
Vercel Postgresを作成
Claude Codeに指示：
vercel postgres create todo-db コマンドでデータベースを作成してまたは、ターミナルで直接実行：
bash
vercel postgres create todo-db確認メッセージ
「Created Postgres database」と表示されれば成功です。
環境変数をダウンロード
bash
vercel env pull .env.localこれでデータベースの接続情報が .env.local ファイルに自動で保存されます。
セキュリティ注意
.env.local ファイルには秘密情報が含まれます。GitHubにpushしないでください（通常は自動で除外されます）。
4. データベース接続を設定
Claude Codeに指示：
Vercel Postgresに接続するための設定をして。
@vercel/postgres パッケージを使って。5. データベーステーブルを作成
ToDoを保存するためのテーブルを作成します。
Claude Codeに指示
ToDoを保存するためのデータベーステーブルを作成して。
テーブル名：todos
カラム：
- id: 自動採番
- title: ToDoの内容（文字列）
- completed: 完了フラグ（真偽値）
- created_at: 作成日時6. APIを作成
フロントエンドとデータベースをつなぐAPIを作成します。
Claude Codeに指示
ToDoのCRUD操作をするAPIを作成して。
エンドポイント：
- GET /api/todos - 全てのToDoを取得
- POST /api/todos - 新しいToDoを作成
- PUT /api/todos/[id] - ToDoを更新（完了/未完了）
- DELETE /api/todos/[id] - ToDoを削除7. フロントエンドをAPIに接続
画面からAPIを呼び出すように変更します。
Claude Codeに指示
ToDoアプリのフロントエンドを、作成したAPIを使うように修正して。
- ページ読み込み時にAPIからToDoを取得
- 追加ボタンでAPIを呼び出してToDoを追加
- 完了切替でAPIを呼び出してToDoを更新
- 削除ボタンでAPIを呼び出してToDoを削除8. 動作確認
開発サーバーを再起動
開発サーバーを再起動してテスト
ToDoを追加
- 入力して追加ボタンをクリック
- リストに追加される
ページを更新（重要！）
- ブラウザを更新
- データが残っている！ 🎉
完了にする
- ToDoをクリック
- 更新してもデータが残っている
削除する
- 削除ボタンをクリック
- 更新してもデータが消えたまま
トラブルシューティング
データベース接続エラー
データベース接続エラーを確認して修正してAPIエラー
APIのエラーログを確認して修正してデータが保存されない
ToDoの追加処理を確認して、データベースに保存されているか確認してチェックリスト
- [ ] データベースが作成されている
- [ ] 環境変数が設定されている
- [ ] ToDoを追加できる
- [ ] ページ更新後もデータが残る
- [ ] 完了/未完了の切り替えができる
- [ ] 削除ができる
次はデプロイに進みます！