npm run mode:learn で Claude Code の振る舞いを切り替える — CLAUDE.md モード設計の実装

はじめに

Claude Code を開発ツールとしてだけでなく、「プログラミングの先生」としても使いたい。しかし、同じプロジェクトで開発者が教材を整備する時と、学習者がカリキュラムを進める時では、AI に求める振る舞いが全く異なる。

この問題を CLAUDE.md のモード切替で解決した。npm run mode:learn と npm run mode:dev の2コマンドで、Claude Code の応答パターンを丸ごと切り替える仕組みだ。

ディレクトリ構成

project-root/
├── CLAUDE.md              # エントリポイント（モード切替で上書きされる）
├── claude-modes/
│   ├── developer.md       # 開発者モード
│   └── learner.md         # 学習者モード
├── scripts/
│   └── switch-mode.js     # モード切替スクリプト
└── package.json           # npm scripts 定義

CLAUDE.md を直接編集するのではなく、claude-modes/ 配下のファイルを CLAUDE.md にコピーすることでモードを切り替える。

package.json の定義

{
  "scripts": {
    "mode:learn": "node scripts/switch-mode.js learn",
    "mode:dev": "node scripts/switch-mode.js dev"
  }
}

実行するとこうなる：

$ npm run mode:learn
# → claude-modes/learner.md の内容が CLAUDE.md に書き込まれる
# → 「🎓 学習者モードに切り替えました」と表示

$ npm run mode:dev
# → claude-modes/developer.md の内容が CLAUDE.md に書き込まれる
# → 「⚡ 開発者モードに切り替えました」と表示

developer.md — 通常の開発モード

開発者モードでは、Claude Code は通常通り動作する。コード生成、リファクタリング、テスト作成など、効率重視。

# 開発者モード

## プロジェクト概要
非エンジニア向け Next.js 学習プロジェクト「AIブートキャンプ」。

## コマンド
- npm run dev — 開発サーバー起動
- npm run build — ビルド
- npm run lint — ESLint 実行

## コーディング規約
- TypeScript 必須（any 禁止）
- Tailwind CSS でスタイリング
- App Router 前提

ポイントは制約が少ないこと。開発者は何をすべきか自分で判断できるので、AI には効率よくコードを書いてもらう。

learner.md — 学習者モード

学習者モードは全く異なる設計思想で作られている。

# 学習者モード

## あなたの役割
プログラミング初心者のための やさしいチューター です。
学習者が「理解すること」を最優先にしてください。

## やってはいけないこと
- 聞かれていないのにコードを先に書くこと
- 説明なしでコードだけ出力すること
- 初心者が知らない用語を説明なしで使うこと

「やってはいけないこと」が最も重要。 Claude Code はデフォルトで親切すぎるため、明示的に禁止しないと学習者のコードを先に書いてしまう。

フェーズ別の振る舞い定義

学習者モード内でも、進捗に応じて AI の関与度を変える：

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

### フェーズ 0（Session 0〜2）: ナビゲーター
- 手順を1ステップずつ提示し、完了確認してから次へ
- コピペOK（ツールに慣れることが目的）

### フェーズ A（Session 3〜8）: チューター
- 学習者が自分でコードを書くよう促す
- 書いたコードをレビューして改善点をやさしく伝える
- 正解を教える前に最低1回は自分で考えてもらう

### フェーズ B（Session 9〜14）: コード補助
- ボイラープレートは Claude Code が書いてOK
- ロジック部分は学習者に書いてもらい、レビューする

### フェーズ C（Session 15〜20）: 実装パートナー
- 複雑な部分は Claude Code が主導してOK
- 学習者には「何が起きているか」の解説を都度行う

「続き」問題の解決

モード切替とは別に、セッション間の継続性も learner.md で制御している：

## 「続き」と言われたとき

1. knowledge/sessions/ のファイル一覧を確認
2. 最新のセッションファイルを読む
3. docs/roadmap.md で次のセッションを特定
4. 「前回は Session N まで完了。今日は Session N+1 から」と案内

メモリではなくファイルを読みに行くルール。これにより、会話がリセットされても学習の継続性が保たれる。

運用上の注意点

push 前に必ず mode:dev に戻す

## 運用上の注意
- push 前に npm run mode:dev で開発者モードに戻すこと
  （learner.md の内容で push すると混乱する）

CLAUDE.md はモード切替で上書きされるため、直接編集しない。変更したい場合は claude-modes/ 内のファイルを編集する。

禁止ルールの効果

実際に運用してみて、以下の禁止ルールが特に効果的だった：

1. 「聞かれていないコードを書くこと」 — これがないと AI は質問に対して即座にコードを出す
2. 「説明なしでコードだけ出力すること」 — 必ず「なぜそう書くのか」が添えられるようになる
3. 「初心者が知らない用語を説明なしで使うこと」 — 「コンポーネント」「Props」等に必ず補足が入る

まとめ

CLAUDE.md のモード切替は、たった2つの npm scripts で実現できる。ポイントは：

• 開発者モード: 制約を最小限に、効率重視
• 学習者モード: 禁止ルールで AI の親切さを制御、フェーズ別に関与度を変化
• ファイルベースの切替: claude-modes/ のファイルを CLAUDE.md にコピーするだけ

同じ AI が「高速コードジェネレーター」にも「やさしい家庭教師」にもなれる。CLAUDE.md の設計次第で。

---

この教材を使ったプログラミング学習サポートをMENTAで提供しています。→ プランページ
YouTubeでもAI×プログラミングの情報を発信中 → チャンネルはこちら