ChatGPTにコード仕様を説明させる技術|デバッグ時間を90%削減する方法
こんにちは!
今日は「ChatGPTにコード仕様を説明させる技術」について解説します。
これ、ほんまに使える技なんですよ。
現場で起こる「謎バグ」との付き合い方
皆さん、経験ありませんか?
「このバグ、なんで起こってるのか分からん…」って状況。
僕も最初のころ、めっちゃ苦しみました。
実は大半のバグって、コードの「意図」が理解できてないことが原因なんですよ。
例えば、JavaScriptの複雑な処理だったり、レガシーコードだったり。
「誰が書いたんやこれ?」ってコード、ありますやん。
ここで活躍するのが「ChatGPTにコードを説明させる」という方法です。
自分で一生懸命読み込むより、AIに「このコードは何をしてるんですか?」と聞く方が、めっちゃ早いんです。
そしてその説明を理解することで、バグの原因が見えてくる。
ChatGPTに「このコード何してるん?」と聞く方法
大事なのは「聞き方」です。
適当にコード貼り付けるだけだと、AI側も「何が知りたいんやろ?」って戸惑うんですよ。
効果的なプロンプトのポイントは、以下の通りです。
- コードの背景を説明する(「フォーム送信時の処理です」など)
- 何に困ってるのか明確にする(「このバグの原因が分かりません」など)
- 期待する説明のレベルを指定する(「初心者向けに簡潔に」など)
- 具体的な部分だけ抽出する(ファイル全体より、該当の関数だけ)
僕がよく使うのは、このようなプロンプトです。
以下のJavaScript関数について、初心者向けに説明してください。特に、なぜこのような書き方をしているのかと、各ステップの意図を教えてください。
こう聞くと、ChatGPTは超丁寧に答えてくれるんです。
「この行は〜をしていて、その理由は…」みたいに。
実践例:複雑なJavaScriptを理解する
実際のケースで説明しますね。
僕の後輩が、前任者が書いた非同期処理のコードで困ってました。
そのコードってのが、Promiseチェーン、async/await、エラーハンドリングが全部混在してて。
後輩は「何が起こってるのか分かりません」って言ってたんです。
そこで僕が教えたのが、このアプローチです。
コード全体をChatGPTに貼り付けて、「このコードが実行される順番を、ステップバイステップで説明してください。そして、なぜ.then()とasync/awaitが混在してるんですか?」と聞いたんですよ。
そしたらもう、めっちゃ分かりやすい説明が返ってきたんです。
「ステップ1は…、ステップ2は…」という流れで。
後輩も「あ、こういう意図で書かれてたんだ」って納得してました。
ここが大事なんです。
ChatGPTに「説明」させることで、自分たちが「理解」できるんですよ。
そしたらバグの原因も、自分たちで見つけられるようになるんです。
初心者向けのプロンプト設計
初心者の皆さんが、このテクニックを活用する時のコツをいくつか紹介します。
1. 「なぜ」を一緒に聞く
このコードが動く理由を、初心者向けに教えてくださいって聞くより、なぜこの書き方にしてるんですか?他の方法では駄目ですか?
2. 図解をお願いする
このコードの流れを図で説明してくださいとかこの処理の関係図を作ってくださいって聞くと、テキストより格段に分かりやすいですよ。
3. 似た例で比較してもらう
正しい書き方と間違った書き方の違いを比較してくださいって聞くことで、「あ、こっちの方がいいんだ」って実感できるんです。
4. 実装時の注意点も聞く
このパターンを使う時に、初心者がやりがちなミスは何ですか?って聞くと、未来のバグを防ぐことができるんですよ。
ほんま、これは大事です。
僕の経験上、この4つを組み合わせると、複雑なコードでも初心者が理解できるようになります。
デバッグ時間も、めっちゃ削減できますよ。
まとめ
ChatGPTにコード仕様を説明させるってのは、単なる「時間短縮」じゃなくて、「理解の深さ」を上げる方法なんです。
バグが起きた時、複雑なコードに遭遇した時、これまでだったら1時間かかってた理解が、ChatGPTの説明なら15分で終わります。
そしてその説明を元に、自分たちでさらに深掘りできるようになるんですよ。
大事なのは「正しい聞き方」です。
コード丸投げじゃなくて、「何に困ってるのか」「どのレベルの説明がいるのか」を明確にして聞くことで、AIの回答の質も全然変わります。
皆さんも、次にバグで困った時、「ChatGPTにこのコード説明してもらおう」って考えてみてください。
デバッグ時間、めっちゃ変わりますよ。
Web制作で困ったことがあったら、またこのブログを覗いてくださいね!
― クリオ