nextjs-todo-tutorial/CLAUDE.md

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プロジェクトです。初学者向けの教育用プロジェクトとして設計されています。

開発コマンド

# 開発サーバー起動 (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/配下にディレクトリとして作成:

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

レイアウト

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

メタデータ

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

Tailwind CSS v4の使用方法

基本的なスタイリング

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

ダークモード対応

<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学習カリキュラム