テンプレート一覧に戻る
SolidJS + TypeScript
SolidJS + Vite + TypeScript のプロジェクト向けCLAUDE.md。細粒度リアクティビティによる高パフォーマンスUI開発に最適です。
中級solidjstypescriptvitereactive
CLAUDE.md
# プロジェクト名
SolidJS + TypeScript で構築されたWebアプリケーション。
## 技術スタック
- **フレームワーク**: SolidJS 1.9+
- **ビルドツール**: Vite 6
- **言語**: TypeScript 5.x
- **スタイリング**: Tailwind CSS v4
- **ルーティング**: @solidjs/router
- **テスト**: Vitest + solid-testing-library
- **パッケージマネージャ**: npm
## コマンド
| コマンド | 用途 |
|---------|------|
| `npm run dev` | 開発サーバー起動 (localhost:3000) |
| `npm run build` | プロダクションビルド |
| `npm test` | Vitest実行 |
| `npm run lint` | ESLint実行 |
## ディレクトリ構造
| パス | 役割 |
|-----|------|
| `src/components/` | UIコンポーネント |
| `src/pages/` | ページコンポーネント |
| `src/lib/` | ユーティリティ・ストア |
| `src/types/` | TypeScript型定義 |
| `public/` | 静的ファイル |
## コーディング規約
- createSignal / createStore でリアクティブ状態管理
- コンポーネントは関数コンポーネント(Reactと異なりhooksルール不要)
- Props分割代入ではなく `props.xxx` でアクセス(リアクティビティ維持)
- Show / For / Switch で条件付きレンダリング
- ファイル名はkebab-case、コンポーネント名はPascalCase
## Git規約
- ブランチ: `feature/`, `fix/`, `chore/`
- コミットメッセージ: Conventional Commits形式