Claude でデバッグする
問題が起きたとき、Claude はあなたのデバッグパートナー
⏱ 想定 ~7 分
01 · 読む
物は壊れます。それは失敗ではなく —— ソフトウェアを作る上で正常な状態です。初心者と経験豊富なエンジニアの違いは、経験者がミスをしないことではありません。問題を明確に説明し、修正を効率よく見つける方法を知っていることです。
Claude Code は素晴らしいデバッグパートナーです。でも、どこが壊れているかをあなたが伝えてはじめて手助けできます。「動かない」のような曖昧な説明では、Claude にはほとんど手がかりがありません。「フォームを送信したが成功メッセージが出ない」のような具体的な説明は、Claude を問題に直接導きます。
バグ報告の鍵となるパターン：期待は X、得たのは Y、これを試した。
02 · プロンプトテンプレート
ターミナルでエラーを見たら、正確なエラーメッセージをコピーして Claude に貼り付けてください。言い換えないこと —— 正確な文字列にはファイル名、行番号、エラーコードなどの重要な手がかりがあります。
サーバーを動かしたらこのエラーが出ました：{{error_message}}03 · プロンプトテンプレート
すべてのバグにエラーメッセージがあるわけではありません。ブラウザで見た目がおかしいだけのときもあります。視覚的なバグは、見えているものと期待しているものを説明してください。
{{element}} が今は {{problem}} ですが、本来は {{expected}} であるべきです04 · クイズ
Claude にバグを報告するとき、必ず含めるべきものは？
05 · 空欄補充
バグを説明するときのパターン：「期待は _____、得たのは Y」。
06 · 読む
問題を明確に説明することは本物のスキルです —— そしてこれは AI とも人間のチームメイトとも、より良いコラボレーションを生みます。
ポイントまとめ
- 明確な問題説明は最も重要なデバッグスキル
- 魔法のパターン：「期待は X、得たのは Y、これを試した」
- エラーメッセージは正確にコピー —— 言い換えない
- 視覚バグは見えているもの vs 期待を説明する
- コンテキストを含める：何をしていて壊れた？
07 · クイズ
Web ページに、クリックすると成功メッセージを表示するはずのボタンがありますが、何も起きません。Claude が最速で修正できるバグ報告は？
- ボタンが動かない
- ページに問題があります、直せますか？
- JavaScript を修正してください
- index.html の送信ボタンをクリックしても反応がない —— フォームの下に成功メッセージが出る想定ですが、メッセージが出ません。コンソールにエラーはありません。
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。