エラーが出たとき、まず Claude Code に渡してみてください。
「エラーメッセージをコピーして @ファイル名 を付けて渡す」という操作だけで、多くのケースで修正案が返ってきます。
この記事で学ぶこと:
- エラーメッセージを Claude Code に渡す基本手順
- TypeScript・ESLint・テスト失敗それぞれの渡し方
- 修正が上手くいかないときの対処パターン
- ワンショットモードでの半自動化
著者の立場: THINK YOU LAB の Next.js + Supabase LMS 開発で Claude Code を実務使用しています。TypeScript 型エラー・ESLint エラーのほとんどを Claude Code で修正しており、この記事のパターンは実際の開発で使っているものです。
基本的なファイル操作がまだの方はこちら → Claude Code でファイルを読み書きさせる基本操作
Claude Code へのエラーの渡し方(基本)
エラーメッセージをそのままコピペして渡す
ターミナルに出たエラーメッセージをコピーして、Claude Code のプロンプトに貼り付けます。
> 以下のエラーを修正してください:
TypeError: Cannot read properties of undefined (reading 'map')
at Component (src/app/page.tsx:24:18)
Claude Code がエラーを読み、原因と修正案を返します。
ファイルとエラーを一緒に渡す
ファイルのコンテキストがある方が、より正確な修正ができます。
> @src/app/page.tsx 以下のエラーを修正してください:
TypeError: Cannot read properties of undefined (reading 'map')
at Component (src/app/page.tsx:24:18)
エラーが発生しているファイルを @ファイル名 で指定することで、コードを読んだ上で修正案を提示します。
「修正してから原因を説明して」という指示パターン
エラーを修正するだけでなく、原因を理解したい場合は説明も求めます。
> @src/app/page.tsx 以下のエラーを修正してから、
> なぜこのエラーが起きたか3行で説明してください:
TypeError: Cannot read properties of undefined (reading 'map')
修正と学習を同時にできるため、同じエラーを繰り返しにくくなります。
エラー種別ごとの対処パターン
TypeScript 型エラー
tsc の出力をそのまま渡します。
npx tsc --noEmit 2>&1 | head -50出力されたエラーをコピーして Claude Code に渡します:
> @src/lib/supabase.ts 以下の TypeScript エラーを修正してください:
src/lib/supabase.ts:12:5 - error TS2339: Property 'user' does not exist on type 'Session | null'.
ポイント: 型エラーは複数まとめて渡すより、関連ファイルごとに渡す方が精度が上がります。
ESLint エラー
npx eslint src/components/Button.tsx> @.eslintrc.json @src/components/Button.tsx 以下の ESLint エラーをすべて修正してください:
5:1 error 'React' must be in scope when using JSX react/react-in-jsx-scope
ESLint 設定ファイルも一緒に読ませると、修正方針がより適切になります。
テスト失敗(jest / vitest)
npm test 2>&1 | grep -A 20 "FAIL"> @src/utils/format.test.ts @src/utils/format.ts 以下のテストが失敗しています。
> テストが通るようにソースコードを修正してください(テストは変更しないでください):
FAIL src/utils/format.test.ts
Expected: "2026-03-15"
Received: "15/03/2026"
重要: 「テストは変更しないでください」を明示することで、テストをパスさせるためにテスト自体を書き換えるという回避を防げます。
ランタイムエラー(スタックトレース)
> @src/app/api/webhooks/stripe/route.ts 以下のエラーが発生しています。
> スタックトレースを元に原因と修正方法を説明して、修正してください:
Error: STRIPE_WEBHOOK_SECRET is not defined
at POST (src/app/api/webhooks/stripe/route.ts:8:9)
ワンショットモードでの半自動化
ワンショットモード(claude -p)を使うと、スクリプトからエラーを自動で渡せます。
# TypeScript エラーを自動で修正させる
npx tsc --noEmit 2>&1 | claude -p "@src/ TypeScript エラーをすべて修正してください"package.json に組み込む例:
{
"scripts": {
"fix:types": "npx tsc --noEmit 2>&1 | claude -p 'TypeScript エラーをすべて修正してください'"
}
}注意: 自動修正を実行する前に、CLAUDE.md で変更範囲を制限しておくことを強く推奨します。意図しないファイルが変更されるリスクがあります。
修正が上手くいかないときの対処
同じエラーが繰り返される
修正より先に原因分析をさせます。
> @src/app/page.tsx このエラーが3回修正しても繰り返されています。
> 修正する前に、なぜ繰り返されるのか原因を分析してください:
TypeError: Cannot read properties of undefined (reading 'map')
根本原因が型定義ファイル・環境変数・依存関係にある場合、修正先を正確に特定できます。
修正が別のエラーを生む
一度にすべてを変更させず、段階的に修正させます。
> @src/lib/api.ts まず型定義だけを修正してください。
> ロジックの変更は次のステップで行います。
「型定義だけ」「エラーハンドリングだけ」のように範囲を絞ることで、副作用を最小化できます。
THINK YOU LAB での実際のフロー
THINK YOU LAB の LMS 開発では以下のフローでエラー修正を行っています:
npx tsc --noEmitでエラー一覧を取得- エラーを関連ファイルごとにグループ化
@ファイル名 + エラーを Claude Code に渡す- 修正後に
git diffで変更内容を確認 - 問題なければコミット
このフローで TypeScript 型エラーの解消時間が大幅に短縮されています。
まとめ
エラーを Claude Code に渡す3ステップ:
@ファイル名でエラーが発生しているファイルを指定- エラーメッセージ(スタックトレース全体)をそのままコピペ
- 「修正してから原因を説明して」と追記
| エラー種別 | 渡し方 |
|---|---|
| TypeScript 型エラー | tsc --noEmit の出力 + @ファイル名 |
| ESLint エラー | eslint の出力 + @ファイル名 + @.eslintrc.json |
| テスト失敗 | テスト出力 + @テストファイル + @ソースファイル(テスト変更禁止を明示) |
| ランタイムエラー | スタックトレース全体 + @該当ファイル名 |
次のステップ:
「エラーを貼っても的外れな回答が来る」ときは、渡し方の問題です。実務で使える Claude Code エラー対処プロンプト集(コピペ即使用可)を LINE で無料配布中です。
→ Claude Code エラー対処プロンプト集を受け取る(LINE登録・無料)
LINE 公式アカウント
Claude Code のエラー自動修正プロンプト集をLINEで無料配布中