テンプレート一覧に戻る

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形式

関連ガイド

検索

ガイドやテンプレートを検索...