forked from semi-23e/nextjs-todo-tutorial
138 lines
3.7 KiB
Markdown
138 lines
3.7 KiB
Markdown
# 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学習カリキュラム
|