テンプレート一覧に戻る
Remix + TypeScript
Remix (React Router v7) + TypeScript のプロジェクト向けCLAUDE.md。nested routesとloaders/actionsパターンに最適です。
中級remixreact-routertypescriptnested-routes
CLAUDE.md
# プロジェクト名
Remix / React Router v7 + TypeScript で構築されたWebアプリケーション。
## 技術スタック
- **フレームワーク**: Remix / React Router v7
- **言語**: TypeScript 5.x (strict mode)
- **スタイリング**: Tailwind CSS v4
- **デプロイ**: Cloudflare Workers / Node.js
- **テスト**: Vitest + Testing Library
- **パッケージマネージャ**: npm
## コマンド
| コマンド | 用途 |
|---------|------|
| `npm run dev` | 開発サーバー起動 (localhost:5173) |
| `npm run build` | プロダクションビルド |
| `npm run start` | プロダクション起動 |
| `npm test` | Vitest実行 |
| `npm run typecheck` | 型チェック |
## ディレクトリ構造
| パス | 役割 |
|-----|------|
| `app/routes/` | ファイルベースルーティング(nested routes) |
| `app/components/` | UIコンポーネント |
| `app/lib/` | ユーティリティ・サーバーロジック |
| `app/styles/` | スタイルシート |
| `public/` | 静的ファイル |
## コーディング規約
- loaderでデータ取得、actionでデータ変更
- `useLoaderData` / `useActionData` で型安全なデータアクセス
- フォーム送信は `<Form>` コンポーネントを使用
- エラーハンドリングは `ErrorBoundary` エクスポートで統一
- 楽観的UIは `useFetcher` で実装
## Git規約
- ブランチ: `feature/`, `fix/`, `chore/`
- コミットメッセージ: Conventional Commits形式