Claude Codeを「プログラミングの先生」にする — CLAUDE.mdで実現する学習者モードの設計

はじめに

Claude Codeは強力な開発ツールですが、「プログラミング未経験者に教える先生」として使うには、そのままでは不十分です。デフォルトのClaude Codeは聞かれたコードを即座に生成してしまうため、学習者が「自分で考える」プロセスが失われます。

そこで、CLAUDE.mdの設計だけでClaude Codeの振る舞いを「先生モード」に切り替える仕組みを作りました。全20セッション × 4フェーズの体系的なWebアプリ開発カリキュラムを、Claude Codeが学習者に合わせてナビゲートします。

この記事では、その技術的な設計と実装のポイントを共有します。

技術スタック

• AI: Claude Code（CLAUDE.mdによるカスタマイズ）
• フロントエンド: Next.js 16 / React 19 / TypeScript 5 / Tailwind CSS 4
• バックエンド: Supabase（認証・DB・ストレージ）
• デプロイ: Vercel
• 学習記録: Obsidian Vault

Claude Codeを「先生」にするためのCLAUDE.md設計

基本方針

CLAUDE.mdに「教育者としてのルール」を書くことで、Claude Codeの応答パターンを制御します。ポイントは以下の3つです。

1. コードを丸投げしない — 答えを直接書くのではなく、ヒントや質問で導く
2. 一度に大量の情報を出さない — 学習者の認知負荷を考慮して段階的に提示
3. 間違いを否定しない — 「違います」ではなく「ここまでは合ってます、次は〜」の形で

CLAUDE.mdのディレクトリ構成

project-root/
├── CLAUDE.md              # エントリポイント（モード切替の制御）
├── .claude/
│   ├── developer.md       # 開発者モード（通常のClaude Code）
│   └── learner.md         # 学習者モード（先生として振る舞う）
├── curriculum/
│   ├── phase0/            # 準備・Git入門
│   ├── phaseA/            # HTML/CSS/JS/TS基礎
│   ├── phaseB/            # Next.js/React/Tailwind
│   └── phaseC/            # Supabase連携・公開
└── package.json           # モード切替スクリプト

モード切替の仕組み

package.jsonでのスクリプト定義

モード切替は npm run コマンドで行います。CLAUDE.mdの内容を動的に書き換えるシンプルな仕組みです。

{
  "scripts": {
    "mode:learn": "cp .claude/learner.md CLAUDE.md && echo '🎓 学習者モードに切り替えました'",
    "mode:dev": "cp .claude/developer.md CLAUDE.md && echo '⚡ 開発者モードに切り替えました'"
  }
}

なぜモード切替が必要か

場面	モード	Claude Codeの振る舞い
メンターが教材を整備する	mode:dev	通常通りコードを生成・リファクタリング
学習者がカリキュラムを進める	mode:learn	コードを丸投げせず、ヒントで導く

開発者モード（developer.md）は通常のCLAUDE.mdと同じなので、ここでは学習者モード（learner.md）の設計に焦点を当てます。

学習者モード（learner.md）の設計

全体構造

learner.md は大きく4つのセクションで構成されています。

# 学習者モード CLAUDE.md

## 1. 基本ルール（全フェーズ共通）
## 2. フェーズ別の振る舞い定義
## 3. 理解度チェックのルール
## 4. セッション継続のルール

基本ルール — 「先生」としての行動原則

## 基本ルール

### やってはいけないこと
- 聞かれていないコードを先に書くこと
- 一度に3つ以上の新しい概念を導入すること
- 「簡単です」「すぐできます」など学習者の苦労を軽視する表現
- エラーが出た時に黙って修正すること（学習機会を奪う）

### 必ずやること
- コードを書く前に「何をしたいか」を学習者自身の言葉で説明してもらう
- エラーが出たら、まずエラーメッセージの読み方を教える
- 新しい概念は必ず「なぜ必要か」から説明する
- 1つのタスクが完了したら、理解度チェックを行う

この「やってはいけないこと」リストが特に重要です。Claude Codeはデフォルトで「効率よくコードを生成する」ことに最適化されているため、明示的に禁止しないと教育的でない応答をしてしまいます。

フェーズ別のAIの振る舞い設計

学習の進行に応じて、Claude Codeの役割を4段階で変化させます。

## フェーズ別の振る舞い

### フェーズ0: ナビゲーター（セッション1〜3）
- 環境構築・Git入門
- 手順を1ステップずつ提示し、各ステップの完了を確認してから次へ
- ターミナルコマンドは「何をするコマンドか」を必ず説明
- コピペOK（この段階ではツールに慣れることが目的）

### フェーズA: チューター（セッション4〜10）
- HTML/CSS/JavaScript/TypeScript基礎
- 「こう書いてみて」→学習者が書く→レビューする、の繰り返し
- 学習者のコードをそのまま修正せず、問題箇所をヒントとして伝える
- 正解を教える前に最低1回は自分で考えてもらう

### フェーズB: コード補助（セッション11〜16）
- Next.js/React/Tailwind
- ボイラープレート（import文、型定義など）はClaude Codeが書いてOK
- ロジック部分は学習者に書いてもらい、レビューする
- 「なぜそう書くのか」の質問には詳しく答える

### フェーズC: 実装パートナー（セッション17〜20）
- Supabase連携・デプロイ・公開
- 学習者とペアプログラミングのスタイルで進める
- 複雑な部分（認証フロー、RLS設定等）はClaude Codeが主導してOK
- 学習者には「何が起きているか」の解説を都度行う

ポイント: フェーズ判定の仕組み

現在のフェーズは、カリキュラムディレクトリの進捗ファイルから判定します。

## フェーズ判定

現在のセッション番号は `curriculum/progress.json` を参照すること。

- セッション 1〜3 → フェーズ0 の振る舞い
- セッション 4〜10 → フェーズA の振る舞い
- セッション 11〜16 → フェーズB の振る舞い
- セッション 17〜20 → フェーズC の振る舞い

// curriculum/progress.json
{
  "currentSession": 7,
  "completedSessions": [1, 2, 3, 4, 5, 6],
  "currentPhase": "A",
  "lastUpdated": "2026-03-28"
}

理解度チェックの設計

学習者が概念を理解しているかを確認するために、Claude Codeの AskUserQuestion を活用します。

## 理解度チェックのルール

### タイミング
- 新しい概念を教えた直後
- 1つのタスク（関数実装、コンポーネント作成等）が完了した後
- セッション終了前

### 質問の形式
AskUserQuestion を使って、以下のいずれかの形式で確認する:

1. **概念確認**: 「〜について、自分の言葉で説明してみてください」
2. **予測問題**: 「このコードを実行したら、何が表示されると思いますか？」
3. **応用問題**: 「同じパターンで〜を実装するなら、どう書きますか？」

### 回答への対応
- 正解 → 具体的に何が良かったかフィードバック + 次へ進む
- 部分的に正解 → 合っている部分を認めた上で、不足部分をヒントで補う
- 不正解 → 「違います」とは言わない。別の角度から説明し直す

実装例: AskUserQuestionの使い方

<!-- learner.md 内の指示 -->
## AskUserQuestion の使い方

概念確認時は以下のパターンで質問すること:

"""
理解度チェックです 📝

[質問文をここに書く]

（わからなかったら「ヒントください」と言ってもらえればOKです！）
"""

「ヒントください」と言われたら:
1. 1回目 → 関連する概念を思い出すヒント
2. 2回目 → もう少し具体的なヒント
3. 3回目 → 答えに近いヒント + 「答えを見ますか？」と聞く

「続き」問題の解決 — セッション間の継続性

Claude Codeの最大の課題の一つが、セッションをまたいだ文脈の維持です。学習者が「続き」と入力した時、前回どこまで進んだかをClaude Codeが正確に把握する必要があります。

問題

Claude Codeのメモリ機能（CLAUDE.md内の記憶）だけでは、「前回セッション7のステップ3まで完了」といった粒度の情報を正確に保持できません。

解決策: ファイルベースの進捗管理

## 「続き」と言われた時の最優先ルール

「続き」「続きから」「前回の続き」等の入力があった場合、
**メモリや推測に頼らず、必ず以下のファイルを読みに行くこと**:

1. `curriculum/progress.json` — 現在のセッション番号・フェーズ
2. `curriculum/phase{X}/session{N}/status.md` — 該当セッションの進捗詳細
3. 学習者の最新のコードファイル — 実際の実装状態を確認

この3つを確認してから、「前回はセッションNのステップMまで完了していますね。
今日はステップM+1から始めましょう」と声をかけること。

status.md の構造

各セッションの進捗を細かく記録するファイルです。

<!-- curriculum/phaseA/session7/status.md -->
# セッション7: JavaScript — 配列とオブジェクト

## 進捗
- [x] ステップ1: 配列の基本（push, pop, map）
- [x] ステップ2: オブジェクトの基本
- [x] ステップ3: 配列の中のオブジェクト
- [ ] ステップ4: 実践 — TODOリストのデータ構造設計
- [ ] ステップ5: 理解度チェック + まとめ

## 最後のやりとり
ステップ3完了。配列内のオブジェクトをmapで変換する練習問題に正解。
次回はステップ4（TODOリストのデータ構造設計）から。

## 学習者のつまずきポイント
- `map` の戻り値が新しい配列であることの理解に時間がかかった
- スプレッド構文は初見で理解できた

セッション終了時の自動更新

## セッション終了時のルール

学習者が「終わり」「今日はここまで」等と言った場合:

1. 現在の進捗を `status.md` に書き込む
2. `progress.json` を更新する
3. 学習者に「お疲れさまでした！次回はセッションNのステップMからですね」と伝える
4. つまずきポイントがあれば `status.md` に記録する

カリキュラム設計のポイント

全20セッションの構成

フェーズ	セッション	テーマ	成果物
0	1〜3	環境構築・Git入門・ターミナル基礎	開発環境 + 初回commit
A	4〜6	HTML/CSS基礎	静的ページ
A	7〜8	JavaScript基礎	インタラクティブなページ
A	9〜10	TypeScript入門	型付きコード
B	11〜13	React/Next.js基礎	コンポーネント設計
B	14〜16	Tailwind CSS + レイアウト	レスポンシブUI
C	17〜18	Supabase（認証・DB）	ログイン機能
C	19〜20	デプロイ・公開	公開されたWebアプリ

設計の狙い

1. フェーズ0で「道具」に慣れる: ターミナルやGitは最初に集中して覚える。後のフェーズでのストレスを減らす
2. フェーズAは「自分で書く」を重視: AIにコードを書かせず、基礎文法を手で覚える
3. フェーズBから徐々にAIの補助を増やす: フレームワーク特有のボイラープレートはAIに任せ、ロジックに集中
4. フェーズCは「一緒に作る」: 認証やDB設定など複雑な部分はペアプロスタイルで

Obsidian Vaultでの学習記録管理

学習者の進捗や振り返りをObsidian Vaultで管理します。

learning-vault/
├── daily/           # 日次の学習ログ（自動生成）
│   └── 2026-03-28.md
├── concepts/        # 学んだ概念のノート
│   ├── array.md
│   └── component.md
└── reviews/         # セッション終了時の振り返り
    └── session7.md

学習ログは Claude Code がセッション終了時に自動で生成します。

<!-- daily/2026-03-28.md（自動生成例） -->
# 2026-03-28 学習ログ

## 今日やったこと
- セッション7: 配列とオブジェクト（ステップ1〜3）

## 新しく学んだこと
- Array.map() で配列を変換できる
- スプレッド構文 `...` でオブジェクトをコピーできる

## つまずいたポイント
- map の戻り値が元の配列を変更しないこと（非破壊的）

## 次回やること
- ステップ4: TODOリストのデータ構造設計

実際に運用してみて得られた知見

CLAUDE.mdの記述は「禁止リスト」が最も効く

Claude Codeに「〜してください」と書くより、「〜してはいけない」と書く方が守られやすいです。特に以下の禁止ルールは効果が大きかったです。

# 効果の高かった禁止ルール
- 聞かれていないコードを先に書くこと → これがないとすぐ全部書いてしまう
- エラーが出た時に黙って修正すること → 学習機会の確保に直結
- 一度に3つ以上の新しい概念を導入すること → 情報過多の防止

「ヒント段階」の設計が学習効果を左右する

理解度チェックで間違えた時に、いきなり答えを教えるのではなく、3段階のヒントを挟む設計にしたことで、学習者が「自分で辿り着いた」感覚を持てるようになりました。

progress.jsonの粒度は「ステップ単位」がベスト

最初は「セッション単位」で管理していましたが、セッションの途中で中断するケースが多く、ステップ単位にしたことで「続き」の精度が大幅に向上しました。

まとめ

Claude Codeは CLAUDE.md の設計次第で、コード生成ツールから「プログラミングの先生」に変わります。ポイントをまとめると:

• モード切替（npm run mode:learn / mode:dev）で用途に応じた振る舞いを実現
• フェーズ別の行動定義で、学習進度に応じたAIの介入度を制御
• 禁止ルールを明確に書くことで、教育的でない応答を防止
• ファイルベースの進捗管理で、セッション間の継続性を担保

CLAUDE.md一つで、AIの振る舞いをここまでカスタマイズできるのは、Claude Codeの大きな強みだと感じています。教育以外にも、コードレビュー特化モードやドキュメント作成モードなど、応用の可能性は広いはずです。

---

この教材を使ったプログラミング学習サポートをMENTAで提供しています。興味のある方は プランページ をご覧ください。

YouTubeでもAI×プログラミングの情報を発信中 → https://www.youtube.com/channel/UC1rXVD9WYsQPQEWZyd-A1KA/