テンプレート一覧に戻る

SvelteKit + TypeScript

SvelteKit 2 + Svelte 5 + TypeScript のプロジェクト向けCLAUDE.md。Runes記法を活用したモダンなWeb開発に最適です。

中級sveltesveltekittypescript
CLAUDE.md
# プロジェクト名

SvelteKit 2 + Svelte 5 + TypeScript で構築されたWebアプリケーション。

## 技術スタック

- **フレームワーク**: SvelteKit 2.x + Svelte 5
- **言語**: TypeScript 5.x
- **スタイリング**: Tailwind CSS v4
- **テスト**: Vitest + Playwright
- **パッケージマネージャ**: pnpm

## コマンド

| コマンド | 用途 |
|---------|------|
| `pnpm dev` | 開発サーバー起動 (localhost:5173) |
| `pnpm build` | プロダクションビルド |
| `pnpm preview` | ビルドプレビュー |
| `pnpm check` | svelte-check 実行 |
| `pnpm test` | Vitest実行 |

## ディレクトリ構造

| パス | 役割 |
|-----|------|
| `src/routes/` | ファイルベースルーティング |
| `src/lib/` | 共有ライブラリ(`$lib` エイリアス) |
| `src/lib/components/` | UIコンポーネント |
| `src/lib/server/` | サーバー専用コード |
| `static/` | 静的ファイル |

## コーディング規約

- Svelte 5 Runes(`$state`, `$derived`, `$effect`)を使用
- コンポーネントは `.svelte` ファイル、ロジックは `.ts` に分離
- ファイル名はkebab-case
- load関数でデータフェッチ、form actionsでミューテーション
- サーバー専用コードは `$lib/server/` に配置
- +page.ts / +page.server.ts の使い分けを徹底

## Git規約

- ブランチ: `feature/`, `fix/`, `chore/`
- コミットメッセージ: Conventional Commits形式

関連ガイド

検索

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