はじめに
プログラミング初心者がTypeScriptを学ぶとき、最大の壁は型エラーです。
Type 'string' is not assignable to type 'number'.
この1行を見て「何が起きているか」を理解できる初心者はほとんどいません。しかし、Claude CodeのCLAUDE.mdを適切に設計すれば、AIが型エラーの意味をその場で噛み砕いて説明してくれる「エラー解説モード」を実現できます。
この記事では、実際にプログラミング教材で使用している設計パターンを紹介します。
型エラー解説の設計方針
やってはいけないこと:エラーを直してしまう
Claude Codeのデフォルトの振る舞いでは、型エラーを見つけると勝手に修正してしまいます。学習目的ではこれが最大の問題です。
# CLAUDE.md(アンチパターン)
TypeScriptのエラーがあったら修正してください。
これでは学習者は何も学べません。
正しい設計:エラーを「教材」にする
# CLAUDE.md(学習モード)
## TypeScript型エラーの対応ルール
型エラーが発生した場合、以下の手順で対応すること:
1. **エラーを修正しない**
2. エラーメッセージを日本語で説明する
3. 「なぜこのエラーが出るか」を3行以内で説明する
4. 修正のヒントを出す(ただし正解のコードは書かない)
5. 学習者が自分で修正するのを待つ
実装例:エラー解説テンプレート
CLAUDE.mdに以下のようなテンプレートを定義しておくと、AIの応答が安定します。
## エラー解説のフォーマット
### 型エラーが出たとき
以下のフォーマットで説明すること:
🔴 エラー: [エラーメッセージの日本語訳]
📝 意味: [何が起きているかの説明]
💡 ヒント: [修正の方向性(コードは書かない)]
実際の動作例
学習者が以下のコードを書いたとする:
function add(a: number, b: number): number {
return a + b;
}
const result = add("5", 3);
Claude Codeの応答:
🔴 エラー: 「string型」は「number型」に代入できません
📝 意味: add関数の第1引数aはnumber型を期待していますが、
"5"は文字列(string型)です。見た目は数字でも、
ダブルクォートで囲むと文字列になります。
💡 ヒント: "5"を数値の5にするにはどうすればいいでしょうか?
クォートを外すか、変換関数を使う方法があります。
フェーズ別の段階制御
学習の進度によって、エラー解説の詳しさを変えることもできます。
## フェーズ別エラー対応
### フェーズ1(セッション1-5): 手厚い解説
- エラーメッセージを完全に日本語化
- 型の概念そのものから説明
- 類似の正しいコード例を1つ提示
### フェーズ2(セッション6-12): ヒントのみ
- エラーメッセージは原文のまま
- 日本語での意味説明は1行
- ヒントのみ、コード例なし
### フェーズ3(セッション13-20): 自力解決
- エラーメッセージを指摘するのみ
- 「このエラーを調べてみてください」と促す
- 5分経っても解決しない場合のみヒント
よくある型エラーパターンの事前定義
初心者が遭遇しやすい型エラーをCLAUDE.mdに事前定義しておくと、より的確な説明ができます。
## 頻出型エラーと解説方針
| エラーパターン | 初心者向け説明 |
|---|---|
| string → number | 「クォートの有無で型が変わる」ことを説明 |
| undefined is not assignable | 「値がまだ入っていない可能性」を説明 |
| Property does not exist | 「オブジェクトの設計図(型)に定義されていない」と説明 |
| Argument of type X is not assignable to parameter of type Y | 「関数が期待する型と実際に渡した型が違う」と説明 |
まとめ
TypeScriptの型エラーは、初心者にとっては壁ですが、適切に設計されたCLAUDE.mdがあれば最高の教材になります。
ポイントは3つ:
- エラーを直さない(学習機会を奪わない)
- 日本語で噛み砕く(英語のエラーメッセージの壁を下げる)
- 段階的に手を離す(自力解決力を育てる)
AIは「間違いを指摘してくれる優しい先生」として、プログラミング学習を根本から変える可能性を持っています。
この仕組みを使ったプログラミング学習サポートをMENTAで提供しています。→ https://menta.work/plan/20251
YouTubeでもAI×プログラミングの情報を発信中 → https://www.youtube.com/channel/UC1rXVD9WYsQPQEWZyd-A1KA/