📄
概念 📚 beginner-stepup

CLAUDE.md・プロジェクト設定

CLAUDE.mdの役割と書き方を理解し、Claude Codeがプロジェクトを正確に把握できる設定ファイルを構築する

CLAUDE.mdはClaude Codeがプロジェクトを開始するたびに自動的に読み込む設定ファイルである。プロジェクトの概要・技術スタック・命名規則・よく使うコマンドをここに記述することで、毎回同じ説明をする手間がなくなり、Claudeがより正確なコードを生成できるようになる。

CLAUDE.mdを置く場所

myapp/
├── CLAUDE.md          ← プロジェクトルートに置く（最重要）
├── src/
│   └── CLAUDE.md      ← サブディレクトリにも置ける（任意）
└── package.json

ルートのCLAUDE.mdはすべてのセッションで読み込まれる。~/.claude/CLAUDE.md にグローバルな設定を書くこともできる。

CLAUDE.mdに書くべき内容

# プロジェクト概要

ヘルスケア業界向けのデモWebアプリ。患者の検査結果を管理・可視化する。

## 技術スタック

- フロントエンド: Next.js 15 (App Router), React 19, TypeScript, Tailwind CSS
- バックエンド: Next.js Route Handlers / Server Actions
- DB: PostgreSQL (Neon), Drizzle ORM
- デプロイ: Vercel
- テスト: Vitest, Playwright

## よく使うコマンド

\`\`\`bash
npm run dev          # 開発サーバー起動（localhost:3000）
npm run build        # ビルド確認
npm run lint         # ESLintチェック
npm test             # Vitestでテスト実行
npx drizzle-kit generate  # マイグレーション生成
npx drizzle-kit migrate   # マイグレーション適用
\`\`\`

## ディレクトリ構造

\`\`\`
src/
├── app/             # Next.js App Router（ページ・APIルート）
├── components/      # 共通UIコンポーネント
├── db/              # Drizzleスキーマ・クエリ
├── lib/             # ユーティリティ関数
└── types/           # 型定義
\`\`\`

## 命名規則

- コンポーネントファイル: PascalCase（例: PatientCard.tsx）
- ユーティリティ: camelCase（例: formatDate.ts）
- DB関数: 動詞+名詞（例: getPatientById, createLabResult）
- 環境変数: UPPER_SNAKE_CASE

## 重要な制約

- 患者データはPII（個人識別情報）なので、ログに出力しない
- DBは直接アクセスせず必ず /db ディレクトリの関数を経由する
- 認証なしのAPIエンドポイントは作成しない

CLAUDE.mdが効く場面

コード生成の精度向上:

  • 「患者一覧ページを作って」→ app/patients/page.tsx をDrizzle ORMを使って作成
  • 技術スタックを知っているので適切なライブラリを使う

コマンドの自動化:

  • 「マイグレーションを実行して」→ CLAUDEが npx drizzle-kit migrate を実行
  • よく使うコマンドを覚えさせる

制約の遵守:

  • 「このAPIを追加して」→ 認証ミドルウェアを自動的に追加する
  • セキュリティ要件を一度書けば毎回適用される

.claudeignore

Claude Codeに読み込ませないファイルを指定する：

# .claudeignore
.env*
node_modules/
.next/
*.log
dist/
coverage/

大きなファイルや秘匿情報を除外することでコンテキストウィンドウを節約できる。

sns_clone 参考実装

参考実装リポの Claude Code 設定ファイル。

  • CLAUDE.md — プロジェクトルール・コマンド・コミット規約
  • AGENTS.md — AI エージェント向けの補足指示

参考リソース

確認クイズ

Q1. CLAUDE.mdはいつ自動的に読み込まれますか？　A. 手動で /load CLAUDE.md と入力したとき　B. Claude Codeがプロジェクトを開始するたびに自動的に　C. ファイルを変更したときだけ　D. 毎日午前0時に自動で

正解: B

解説: CLAUDE.mdはClaude Codeがプロジェクトを開始するたびに自動的に読み込む設定ファイル。これにより毎回同じ説明をする手間がなくなり、Claudeがプロジェクトの文脈を理解した上でコードを生成できる。

Q2. グローバルな設定（全プロジェクト共通）を書く場合、CLAUDE.mdをどこに置きますか？

正解: ~/.claude/CLAUDE.md

解説: プロジェクトルートの CLAUDE.md はそのプロジェクト専用の設定として読み込まれる。~/.claude/CLAUDE.md に書いた設定はすべてのプロジェクトで共通して適用されるグローバル設定となる。

Q3. CLAUDE.mdに書くべき内容として適切でないものはどれですか？　A. 技術スタック（使用ライブラリ・フレームワーク）　B. よく使うコマンド　C. 個人のパスワードや秘密鍵の値　D. 命名規則

正解: C

解説: 個人のパスワードや秘密鍵はCLAUDE.mdに書くべきではない。秘匿情報は .env ファイルや環境変数として管理する。CLAUDE.mdには技術スタック・よく使うコマンド・ディレクトリ構造・命名規則・重要な制約などを書く。

Q4. サブディレクトリにもCLAUDE.mdを置くことはできますか？

正解: できる

解説: src/CLAUDE.md のようにサブディレクトリにも任意でCLAUDE.mdを置くことができる。ルートのCLAUDE.mdはすべてのセッションで読み込まれ、サブディレクトリのCLAUDE.mdはそのディレクトリ内の作業時に追加的に参照される。

Q5. .claudeignore ファイルの目的を説明してください。

正解: Claude Codeに読み込ませないファイルを指定する

解説: .claudeignore に記述したファイルやディレクトリはClaude Codeのコンテキストから除外される。node_modules/ や .env* のような大きなファイルや秘匿情報を除外することで、コンテキストウィンドウを節約しClaudeの応答精度を保てる。

Q6. CLAUDE.mdに重要な制約（「認証なしのAPIエンドポイントは作成しない」など）を書く利点はなんですか？

正解: 一度書けば毎回のセッションで自動的に適用され、毎回同じ注意事項を伝える手間がなくなる

解説: セキュリティ要件や制約をCLAUDE.mdに記述することで、Claudeは毎回そのルールを踏まえてコードを生成する。「認証なしのAPIを追加して」と指示しても、CLAUDE.mdの制約が適用されて認証ミドルウェアが自動的に追加されるようになる。

Q7. CLAUDE.mdの命名規則セクションで示されている「DB関数」の命名パターンはどれですか？　A. pascalCase（例: GetPatient, CreateLabResult）　B. 動詞+名詞（例: getPatientById, createLabResult）　C. UPPER_SNAKE_CASE（例: GET_PATIENT_BY_ID）　D. ファイル名と同じパターンでよい

正解: B

解説: DB関数は「動詞+名詞」の形式（例: getPatientById, createLabResult）で命名するルールが示されている。コンポーネントファイルはPascalCase、ユーティリティはcamelCase、環境変数はUPPER_SNAKE_CASEと種別ごとに異なる規則が定義されている。

Q8. CLAUDE.mdに「よく使うコマンド」を書くことで得られる具体的なメリットを説明してください。

正解: Claudeが「マイグレーションを実行して」などの自然言語の指示から適切なコマンド（例: npx drizzle-kit migrate）を自動実行できるようになる

解説: よく使うコマンドをCLAUDE.mdに記録しておくと、毎回コマンドを調べたり教えたりする手間がなくなる。Claudeがコマンド名を把握しているため、日本語での作業指示だけでコマンドを実行してくれるようになる。

Q9. このドキュメントで示されているディレクトリ構造において db/ ディレクトリが担う役割はなんですか？

正解: Drizzleスキーマ・クエリの管理

解説: src/db/ ディレクトリはDrizzleのスキーマ定義とDBクエリ関数を管理する場所として示されている。重要な制約として「DBは直接アクセスせず必ず /db ディレクトリの関数を経由する」と定義することで、DBアクセスの一元管理が保証される。

Q10. CLAUDE.mdを設定するとコード生成の精度が向上する理由を説明してください。

正解: ClaudeがプロジェクトのDrizzle ORMやNext.jsなどの技術スタックを把握しているため、「患者一覧ページを作って」という指示だけで適切なライブラリを使ったコードを生成できるから

解説: CLAUDE.mdがない状態では毎回「このプロジェクトはNext.js 15を使っています」「ORMはDrizzleです」といった説明が必要になる。CLAUDE.mdに技術スタックを記述することで、プロジェクト固有の文脈を踏まえた正確なコードが1回の指示で生成されやすくなる。

生きているコード

本ドキュメントで扱ったパターンの完全な動作コードは、メンター側リポジトリの参照ブランチで確認できます。

  • 対応 Week: W1
  • 参照ブランチ:
  • W1: reference/week-1
  • 対応 checklist 項目: N9

ブランチの作り方・見方は b00-curriculum-map を参照してください。

📚 beginner-stepup 全 53 章
導入編 13 章
  1. 1. 📄Web とは何か
  2. 2. 📄URL を打ってから画面が表示されるまで
  3. 3. 📄ネットワーク基礎（TCP/IP・DNS・HTTPS）
  4. 4. 📄【発展】物理層から通信が成立するまで（電力・Ethernet・Wi-Fi・Bluetooth）
  5. 5. 📄WSL2・Docker セットアップ詳細（Windows 向け）
  6. 6. 📄環境構築の段階的導入（macOS / Windows）
  7. 7. 📄カリキュラム全体マップ（Week × 教材 × 参照ブランチ × 要求チェックリスト）
  8. 8. 📄このカリキュラムの使い方（SQL・Python・Dify経験者向け）
  9. 9. 📄シェル・ターミナル基礎
  10. 10. 📄Windows で完全にゼロから始める開発環境構築（Week 1）
  11. 11. 📄Git基礎
  12. 12. 📄GitHubワークフロー
  13. 13. 📄パッケージ管理（pnpm workspace）
応用編 16 章 ● この編を閲覧中
  1. 1. 📄AWSインフラ基礎
  2. 2. 📄AWS Budget Alert の設定（Month 5 Week 17）
  3. 3. 📄環境変数管理
  4. 4. 📄Bastion EC2 と SSH ProxyJump（Month 5 Week 18）
  5. 5. 📄CI/CD基礎
  6. 6. 📄ECR への Docker イメージ push と App EC2 デプロイ（Month 5 Week 19）
  7. 7. 📄テスト設計の基本
  8. 8. 📄CloudFront + S3 + ALB で公開する（Month 5 Week 20）
  9. 9. 📄CLAUDE.md・プロジェクト設定
  10. 10. 📄PR レビュー 5 観点ルーブリック（全 Week 共通）
  11. 11. 📄タスク分解・仕様の書き方
  12. 12. 📄Playwright で E2E テスト（Month 6 Week 22）
  13. 13. 📄生成コードのレビュー・デバッグの勘所
  14. 14. 📄Trivy で脆弱性スキャン（Month 6 Week 23）
  15. 15. 📄CloudWatch Logs の読み方と運用（Month 6 Week 23）
  16. 16. 📄PDF ポートフォリオの自動生成（Month 6 Week 24）