3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

TypeScript初心者にClaude Codeが型エラーを「教える」仕組み — CLAUDE.mdで実現するエラー解説モード

3
Posted at

はじめに

プログラミング初心者が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つ:

  1. エラーを直さない(学習機会を奪わない)
  2. 日本語で噛み砕く(英語のエラーメッセージの壁を下げる)
  3. 段階的に手を離す(自力解決力を育てる)

AIは「間違いを指摘してくれる優しい先生」として、プログラミング学習を根本から変える可能性を持っています。


この仕組みを使ったプログラミング学習サポートをMENTAで提供しています。→ https://menta.work/plan/20251
YouTubeでもAI×プログラミングの情報を発信中 → https://www.youtube.com/channel/UC1rXVD9WYsQPQEWZyd-A1KA/

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?