バグ?改善するには

問題が起きたときの対処法。Claudeと一緒にデバッグするアプローチ。

パニックにならないで — バグは正常です

すべてのアプリにはバグがあります。何十年もの経験を持つプロのエンジニアでも、毎日バグを作ります。バグは何か間違ったことをしたという意味ではありません — アプリが成長し、本物のものを作っているという意味です。

良いニュース:Claudeがいます。そしてClaudeは正しい情報を与えれば、バグ修正が得意です。

デバッグのマインドセット

バグを修正するためにコードを理解する必要はありません。必要なのは:

  1. 観察する — 正確に何が起きていますか?代わりに何を期待していましたか?
  2. 情報を集める — エラーメッセージはありますか?どこに表示されていますか?
  3. Claudeに説明する — 具体的であるほど、修正が早くなります。

どんな種類のバグですか?

このテーブルでバグの種類を特定し、適切なページに移動してください:

見えるものバグの種類移動先
アプリは動くが結果が間違っているロジックバグロジックバグ
ブラウザにエラーメッセージが表示されるフロントエンドエラーフロントエンドエラー
Railwayデプロイログや500レスポンスにエラーサーバーエラーサーバーサイドエラー
表示の不具合、ちらつき、レイアウト崩れ表示の不具合表示の不具合
通常は動くが異常な入力で壊れるエッジケースエッジケース
ビルド失敗、TypeScriptエラー、デプロイ失敗ビルドエラービルド&デプロイエラー
ページは読み込まれるがデータがないデータ欠落データが表示されない

黄金ルール:エラーメッセージをコピーする

エラーメッセージは最も価値のあるデバッグツールです。ブラウザコンソールの赤いテキスト、ビルド出力の失敗、Railwayログのエラーを見たら — エラーメッセージ全体をコピーしてClaudeに渡してください。

エラーを自分で解釈しようとしないでください。言い換えないでください。表示されたままの全文をコピーしてください。

Claudeにヘルプを求める方法

一般的なデバッグプロンプト
Claudeプロンプト
my-app-name: アプリに問題があります。 期待される動作: [何が起こるべきか] 実際の動作: [実際に何が起きているか] エラーメッセージ(ある場合): [エラーメッセージ全文を貼り付け] 何が問題なのか理解して修正してください。
エラーメッセージがない場合
Claudeプロンプト
my-app-name: アプリが正しく動作していませんが、エラーメッセージはありません。 - 期待される動作: [何が起こるべきか] - 実際の動作: [実際に何が起きているか] - 再現手順: [問題を引き起こすためにクリック/操作すること] 調査して修正を提案してください。

クイズ

Quiz

デバッグの助けを求める際に、Claudeに最も役立つものは何ですか?