AI生成コードのデバッグの仕方（非エンジニア視点）
📌 記事の取り扱いについて（公開当時の内容を含みます — タップで詳細）
本記事は公開当時の体験・気づきをまとめたものです。現在のツール数・プラン数・対象年齢・記事数・仕様とは異なる場合があります。最新の内容は各ツールページをご確認ください。ツールや外部サービスの仕様・料金は変更されることがあるため、利用前には各公式情報も併せてご確認ください。記載に誤りを見つけられた場合はお問い合わせフォームよりご連絡いただけると助かります。
私はプログラミング言語をほとんど読めません。HTML や CSS すら、見ても何が書いてあるのか分かりません。JavaScript・Python に至っては「動いているらしい」という認識しかありません。
それでも、AIが書いたコードのバグを直せます。この記事では、非エンジニアでもできるデバッグの手順 を書きます。
「分からないけど直せる」という状態
私のスキル感を率直に書くと：
- HTML：タグが何のためにあるのか分からない
- CSS：色やフォントの指定が書いてあるらしい、くらい
- JavaScript：呪文に見える
- Python：もはや何も分からない
このレベルでも、ホテル検索・子連れスポット・楽天最安値検索・お金診断・スマホ料金比較と、いくつものツールを公開できています。バグにぶつかるたび、Claude に相談しながら一つずつ直してきたからだと思います。
まず、普段の頼み方がそのまま効く
デバッグといっても、特別な呪文があるわけではありません。エラーメッセージをそのまま貼る、直してほしいファイルの名前をはっきり伝える、違う方向に進んだら ESC キーで止める——この3つは、バグ取りに限らず、普段ツールを作るときの「毎日の頼み方」とまったく同じです。その基本そのものは プログラミングが分からない私が、Claude Codeに毎日していること に書いたので、ここでは繰り返しません。
この記事は、その基本を踏まえたうえで、バグを直すときに特に効く聞き方と、実際にあった例に絞ります。
症状を具体的に伝える
私には特に効いたのが、これです。エラーメッセージが出ない（けど何かおかしい）ケースでは、症状を具体的に 伝えます。
避けたい伝え方：
- 「動かない」
- 「変です」
- 「うまくいきません」
伝わる伝え方：
- 「ボタンを押しても何も起きない。コンソールには何も表示されない」
- 「データは表示されるけど、ソート順がおかしい。最新順にしたいのに、古い順になっている」
- 「PCでは正しく表示されるけど、スマホで見ると右側がはみ出している」
具体的な症状を伝えると、Claude が「こういう原因かもしれない」と推測して直してくれます。エラーが画面に出てこないバグほど、この「症状の言語化」が効きます。
うまくいかないときは「他の方法は？」と聞く
一度提案された方法でうまくいかないとき、すぐに諦めずに 別の方法を聞く のが有効です。
私のよく使う言い回し：
- 「これでもダメでした。他の方法はありますか？」
- 「Plan B を出してください」
- 「もっと簡単な方法はありますか？」
Claude は最初の方法に固執せず、別のアプローチを提案してくれます。私の場合も、一つ目でうまくいかず、別の方法を出してもらって直った、ということがありました。
どうしても戻したいときは git も使える
ESC で止めても変更が進みすぎていたときは、まず Claude Code 自体の巻き戻し機能で戻せる範囲を確認します。そこに含まれない変更は、git diff（どこが変わったかを見る）や git status（変更の状態を確かめる）で中身を出してもらい、どれを戻すかを決めてから 戻してもらいます（これも Claude にやってもらえます）。ここを飛ばして「全部戻して」とお願いすると、残しておきたかった変更まで消えることがあるので、私は必ず一度中身を見るようにしています。それでも「ある程度は戻せる」と分かっていると、思い切って試せます。
実例1：スマホだけ地図が出てこない
子連れスポット検索で、パソコンでは地図が出るのに、スマホだと地図の場所が真っ白になる、ということがありました。
症状を伝えた：
「スマホで開くと地図が表示されません。パソコンでは出ています」
調べてもらった結果：
「地図の下に置いている説明文が縦に長く、画面の高さを全部使ってしまっています。残りをもらう設定になっている地図の高さが、ほぼ0になっています」
→ スマホのときだけ地図の側に「画面1枚分の高さは確保する」という指定を足して解決。原因が「地図の設定」ではなく「隣にある文章の高さ」だった、というのが自分には思いつかない発想でした。
実例2：料金順に並べても比べられない
スマホ料金比較で、月額料金の安い順に並べても、どうも比較になっていない、ということがありました。
症状を伝えた：
「料金の安い順にしているのに、明らかに高いプランが上のほうに来ています」
調べてもらった結果：
「1か月分の料金が入っている欄に、90日分・180日分をまとめて払う総額が混ざっています。並べ替えの仕組みではなく、元のデータの意味がそろっていません」
→ 長期のプランを1か月あたりの金額に直して、欄の意味をそろえて解決。「表示のバグだと思っていたら、データの持ち方の問題だった」という、これも自分では気づけないタイプでした。
実例3：直したのに、直っていないように見える
スマホ料金比較の表が、縦にも横にも斜めに動いてしまって読みにくい、という問題がありました。
症状を伝えた：
「スマホで表を触ると、縦にも横にも斜めに動いてしまって読みづらいです」
→ 表の中は横だけ動くように設定を分けてもらい、サイトに反映。……のはずが、スマホで見てもまったく変わっていません。
ここでもう一度症状を伝えたら、
「端末に古い表示が保存されたままになっている可能性があります。保存の目印になっている番号を上げると、新しいほうを読みに行きます」
→ その番号を上げて、ようやく反映されました。「直したのに変わらない」ときは、直し方ではなく“古いものが残っている”ほうを疑う、というのはこのとき覚えました。
「分からないことを分からないと言う」勇気
非エンジニアがAIで開発するときに、一番大事なのは 「分からないことを分からないと言う」 勇気だと思います。
「JavaScriptの promise が分からない」「非同期処理って何？」と素直に聞けば、Claude は分かりやすく説明してくれます。「分かったふり」をして進めると、後でもっとややこしいバグが出ます。
私は「正直、よく分かっていません」と前置きしてから質問することが多いです。それで困ったことはほぼありません。
デバッグでの「Claude vs 自分」の役割分担
私が担当するのは：
- 症状を観察する（何が起きているか）
- 何をしたいかを伝える（期待する挙動）
- Claude の提案を試す（実行して結果を確認）
- 動作確認の判断（ブラウザで実際に触ってみる）
Claudeが担当するのは：
- コードを読む（どこが問題か）
- 修正案を出す（どう直すか）
- 修正の実行（コードを書き換える）
- 代替案の提案（うまくいかないときの別アプローチ）
非エンジニアの強みは「ユーザー目線で症状を観察できること」、AIの強みは「コードを高速に読み書きできること」。役割分担すると、お互いの強みが活きます。
私の感想
AIが書いたコードのデバッグは、最初は怖かったです。「自分で直せないコードを公開していいのか？」という不安がありました。
でも実際にやってみると、私がぶつかったバグは、Claude に相談しながら一つずつ直せてきた ことが分かってきました。プログラミング言語が読めなくても、症状を伝えて、エラーを貼って、結果を確認できれば、開発は回っていきます。
「全部わかってから始める」を待っていたら、何も公開できていませんでした。動かしながら、必要なことを少しずつ理解していく のが、非エンジニア × AI 開発のリズムだと思います。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ