バグ?改善するには
問題が起きたときの対処法。Claudeと一緒にデバッグするアプローチ。
パニックにならないで — バグは正常です
すべてのアプリにはバグがあります。何十年もの経験を持つプロのエンジニアでも、毎日バグを作ります。バグは何か間違ったことをしたという意味ではありません — アプリが成長し、本物のものを作っているという意味です。
良いニュース:Claudeがいます。そしてClaudeは正しい情報を与えれば、バグ修正が得意です。
デバッグのマインドセット
バグを修正するためにコードを理解する必要はありません。必要なのは:
- 観察する — 正確に何が起きていますか?代わりに何を期待していましたか?
- 情報を集める — エラーメッセージはありますか?どこに表示されていますか?
- Claudeに説明する — 具体的であるほど、修正が早くなります。
どんな種類のバグですか?
このテーブルでバグの種類を特定し、適切なページに移動してください:
| 見えるもの | バグの種類 | 移動先 |
|---|---|---|
| アプリは動くが結果が間違っている | ロジックバグ | ロジックバグ |
| ブラウザにエラーメッセージが表示される | フロントエンドエラー | フロントエンドエラー |
| Railwayデプロイログや500レスポンスにエラー | サーバーエラー | サーバーサイドエラー |
| 表示の不具合、ちらつき、レイアウト崩れ | 表示の不具合 | 表示の不具合 |
| 通常は動くが異常な入力で壊れる | エッジケース | エッジケース |
| ビルド失敗、TypeScriptエラー、デプロイ失敗 | ビルドエラー | ビルド&デプロイエラー |
| ページは読み込まれるがデータがない | データ欠落 | データが表示されない |
黄金ルール:エラーメッセージをコピーする
エラーメッセージは最も価値のあるデバッグツールです。ブラウザコンソールの赤いテキスト、ビルド出力の失敗、Railwayログのエラーを見たら — エラーメッセージ全体をコピーしてClaudeに渡してください。
エラーを自分で解釈しようとしないでください。言い換えないでください。表示されたままの全文をコピーしてください。
Claudeにヘルプを求める方法
一般的なデバッグプロンプト
Claudeプロンプトmy-app-name: アプリに問題があります。
期待される動作: [何が起こるべきか]
実際の動作: [実際に何が起きているか]
エラーメッセージ(ある場合):
[エラーメッセージ全文を貼り付け]
何が問題なのか理解して修正してください。
エラーメッセージがない場合
Claudeプロンプトmy-app-name: アプリが正しく動作していませんが、エラーメッセージはありません。
- 期待される動作: [何が起こるべきか]
- 実際の動作: [実際に何が起きているか]
- 再現手順: [問題を引き起こすためにクリック/操作すること]
調査して修正を提案してください。
クイズ
Quiz
デバッグの助けを求める際に、Claudeに最も役立つものは何ですか?