claude code用設定追加, 指導用メモ追加

CLAUDE.md

@@ -0,0 +1,137 @@
+# 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学習カリキュラム