# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## プロジェクト概要

Next.js 15 App Routerを使用したTODOアプリケーション開発用のTypeScriptプロジェクトです。初学者向けの教育用プロジェクトとして設計されています。

## 開発コマンド

```bash
# 開発サーバー起動 (Turbopack使用)
npm run dev

# プロダクションビルド
npm run build

# プロダクションサーバー起動  
npm run start

# コード品質チェック
npm run lint
```

注意: package.jsonではnpmを使用していますが、pnpm/yarnでも動作します。

## アーキテクチャ

### ディレクトリ構造

```
my-app/
├── src/
│   └── app/              # App Router
│       ├── layout.tsx    # ルートレイアウト
│       ├── page.tsx      # ホームページ
│       └── globals.css   # グローバルスタイル
├── public/              # 静的アセット
├── .next/               # ビルド出力（gitignore）
└── node_modules/        # 依存関係（gitignore）
```

### 技術スタック

- **Next.js 15.3.4** - App Router、Turbopack対応
- **React 19.0.0** - 最新の安定版
- **TypeScript 5.x** - 厳格モード有効
- **Tailwind CSS v4** - PostCSS経由、`@theme inline`構文

### 重要な設定

- TypeScriptパスエイリアス: `@/*` → `./src/*`
- Tailwind CSS: `tailwind.config.ts`でカスタマイズ可能
- フォント: GeistフォントをGeist Sans/Geist Monoとして最適化
- ESLint: Next.jsデフォルト設定（`next/core-web-vitals`）

## App Routerのパターン

### ページ作成

新しいページは`src/app/`配下にディレクトリとして作成:

```typescript
// src/app/todos/page.tsx
export default function TodosPage() {
  return <div>TODOリスト</div>
}
```

### レイアウト

各ディレクトリに`layout.tsx`を配置して共通レイアウトを定義可能。

### メタデータ

```typescript
export const metadata = {
  title: 'TODOアプリ',
  description: 'Next.jsで作るTODOアプリケーション',
}
```

## Tailwind CSS v4の使用方法

### 基本的なスタイリング

```tsx
<div className="bg-white p-4 rounded-lg shadow-md">
  <h1 className="text-2xl font-bold text-gray-800">タイトル</h1>
</div>
```

### ダークモード対応

```tsx
<div className="bg-white dark:bg-gray-800">
  <p className="text-gray-900 dark:text-gray-100">テキスト</p>
</div>
```

### カスタムテーマ変数

`globals.css`で`@theme`を使用してカスタマイズ可能。

## 開発ガイドライン

### コンポーネント作成

1. 機能ごとにコンポーネントを分割
2. 型定義を明確に（interfaceまたはtype）
3. propsの型は必ず定義

### 状態管理

- 単純な状態: `useState`
- 複雑な状態: `useReducer`
- グローバル状態: Context APIまたは状態管理ライブラリ

### エラーハンドリング

- try-catchでエラーをキャッチ
- ユーザーフレンドリーなエラーメッセージ
- error.tsxでエラーバウンダリー実装可能

## 教育プロジェクトとしての指針

このプロジェクトは初学者向けTODOアプリ開発の教材として使用されます：

1. **段階的な実装**: 基本機能から高度な機能へ
2. **型安全性の重視**: TypeScriptの学習を促進
3. **モダンな開発手法**: App Router、Server Components
4. **実践的なGit運用**: ブランチ戦略、コミット規約

関連ドキュメント:

- `todo-app-curriculum.md` - TODOアプリ開発カリキュラム
- `git-gitea-curriculum.md` - Git/Gitea学習カリキュラム