このプロジェクトは、Hono (Backend), Vite/React (Frontend), Zod (Shared) を組み合わせた、型安全なフルスタック開発のための最小構成テンプレートです。
Node.js 22.12以降を使用してください。
npm ci# Backend (Hono)
npm run dev:backend
# Frontend (Vite)
npm run dev:frontendnpm run typecheck秘密情報が必要になった場合は packages/backend/.dev.vars に定義します。このファイルはGit管理されません。
公開してよい本番設定は packages/backend/wrangler.toml の [vars]、秘密情報はCloudflare Secretsで管理します。
ローカルではViteが /api をWorkerへプロキシし、本番ではReactの静的ファイルとHono APIを同じWorkerから配信します。どちらも同一オリジン相当の相対URLを使うため、API URLやCORS用の環境変数は不要です。
このテンプレートをクローンした後、プロジェクト固有の名称、DB、デプロイ先を初期化します。 Cursor や Cline（Antigravity）などの AI エージェントに以下の「キックオフ・プロンプト」を投げるだけで、面倒な初期化作業から最初のデータ設計までを全自動で完了してくれます。
エディタ（AIエージェント）を開き、以下のプロンプトの 【】 の部分を今回のアイデアに合わせて書き換え、最初の指示として送信してください。
これから新しいWebアプリケーションの開発を始めます。
まずは `.agent/rules/` にあるルールファイル（architecture.md と claude.md）を熟読し、このプロジェクトのアーキテクチャ（Hono+Vite+Zodのモノレポ）と開発作法を完全に理解してください。
【プロジェクト概要】
今回は「【ここにアプリの概要を書く。例：50人の学生の就職活動状況を管理するアプリ】」を作ります。
プロジェクト名は `【プロジェクト名】` 、DB名は `【DB名】` とします。
【最初のタスク】
ルールの「Standard Development Workflow」に従い、以下の手順で作業を開始してください。
1. プロジェクトの初期化（名義変更とDB作成）:
- ルートおよび各 package (frontend, backend, shared) の `package.json` の "name" を今回のプロジェクト名に合わせて変更してください（必要に応じて @スコープ名 を使用）。
- `packages/backend/wrangler.toml` の `name` を今回のプロジェクト名に、`database_name` を今回のDB名に書き換えてください。
- `packages/backend` に移動し、ターミナルで `npx wrangler d1 create <今回のDB名>` を実行してください。
- 出力された `database_id` を、先ほど書き換えた `wrangler.toml` に反映してください。
2. スキーマの設計:
- このアプリのコアとなるデータ構造の Zod スキーマ案を `packages/shared/src/schemas/` に作成し、私に提案してください。
- 最後に `shared/src/index.ts` からそれらを一括 export するのを忘れないでください。
まだAPIやUIの実装には進まず、プロジェクトの初期化とZodスキーマの提案が完了した時点で報告してください。
エージェントがプロジェクトの設定を終わらせ、Zod スキーマ（データベースのテーブルと型の設計図）を提案してきます。 必要な項目（例：「選考ステータスに『辞退』も足して」など）をレビュー・修正し、スキーマが確定したら、以下の指示を出して本格的な開発をスタートさせましょう！
「OK、そのスキーマで DBのマイグレーションファイルと、バックエンドの CRUD API を実装して」
このプロジェクトは npm workspaces を使用したモノレポ構成です。
Backend と Frontend で共有するビジネスロジックやバリデーション、型定義を配置します。
- src/schemas/: Zod スキーマ（バリデーションの実体）を配置します。
- src/types/: スキーマから推論された TypeScript 型（z.infer）を配置します。
- src/index.ts: 各パッケージへ公開するためのエントリポイントです。
Tip
「型優先（Type-First）」の開発を行うため、まずはここから着手するのが理想的です。
Cloudflare Workers / D1環境で動作するAPIサーバーです。本番ではViteのビルド成果物もWorkers Static Assetsとして同じWorkerから配信します。
- src/index.ts: API のルート定義。AppType をエクスポートすることで、Frontend から RPC による型安全な呼び出しが可能になります。
- migrations/: Cloudflare D1 などのデータベースマイグレーション用 SQL ファイルを配置します。
- wrangler.toml: 開発環境やデプロイに関する設定ファイルです。
Hono RPC クライアントを備えた React アプリケーションです。
- src/lib/hc.ts: Hono Client の初期設定。Backend の AppType を参照し、エンドツーエンドの型安全性を担保します。
- src/main.tsx: アプリケーションのエントリポイントです。
Frontend から Backend への通信は、fetch や axios ではなく、packages/frontend/src/lib/hc.ts で設定されたクライアントを使用してください。これにより、API のエンドポイント名や型、パラメータの補完が効くようになります。
ZodはAPI入出力の検証とTypeScript型の源泉です。一方、テーブル、外部キー、インデックスなどのDB構造は packages/backend/migrations/ のSQLを正とします。スキーマ変更時は両方を同じ変更で更新し、整合性を保ってください。
Servlet/JSP経験者向けの解説を、次の順番で読めます。
AI アシスタント（Cursor など）が開発の作法を理解するために、以下のルールファイルが用意されています：
- .agent/rules/claude.md: 開発プロトコルとAIへの指示。
- .cursorrules: Cursor 全体への指示（型優先、RPC 推奨など）。