現状はまず読み取り(GET)のみ実装

技術スタック

• Vite + React + Cloudflare Pages (現状)
• Turso
• Cloudflare Pages Functions
• Tanstack Query

実装タスク（理想）

Turso のセットアップ

• Turso CLI インストール (brew install tursodatabase/tap/turso)
• Turso アカウント作成・認証 (turso auth login)
• データベーススキーマ定義 (schema.sql)
• テストデータの作成 (seed.sql)
• ローカルデータベースの作成・管理 (turso dev)
• データベース操作のテスト (turso db shell)

Cloudflare Pages Functions の実装

• functions ディレクトリを作成
• 共通ユーティリティの作成 (DB接続、レスポンス形式の標準化など)
• イベント一覧取得のAPIエンドポイント作成 (functions/api/events.ts)
• 単一イベント取得のAPIエンドポイント作成 (functions/api/events/[id].ts)
• ローカル環境での関数テスト (wrangler pages dev)
• エラーハンドリングの実装

ローカル開発、フロントエンド統合

• Tanstack Queryのインストールと設定
• QueryClientProviderのセットアップ
• APIクライアント関数の作成 (src/lib/api.ts)
• イベント一覧ページの修正 (useQueryの実装)
• イベント詳細ページの修正 (useQueryの実装)
• ローディング状態とエラー状態のUI実装
• 統合テスト (フロントエンドからAPIを呼び出して動作確認)

本番環境へデプロイ

• リモートTursoデータベースの作成 (turso db create)
• スキーマとデータの適用
• Cloudflare Pagesの環境変数設定 (Turso接続情報)
• フロントエンドとサーバレス関数のビルド
• Cloudflare Pagesへのデプロイ
• デプロイ後の動作確認

ディレクトリ構造モデル

functions/ ├── api/ │ ├── events.ts # GET: 一覧取得 │ ├── events/ │ │ ├── [id].ts # GET: 個別取得 │ │ ├── create.ts # POST: 作成 (将来用) │ │ ├── [id]/update.ts # PUT: 更新 (将来用) │ │ ├── [id]/delete.ts # DELETE: 削除 (将来用) │ │ └── [id]/apply.ts # POST: イベント申し込み (将来用) │ └── utils/ │ ├── db.ts # DB接続用共通モジュール │ └── response.ts # レスポンス整形用ヘルパー

将来の拡張案

• 認証機能の検討
• イベント作成・編集機能のAPI設計
• デプロイ自動化の検討（GitHub Actionsなど）