AIプログラミングアシスタントツール「GitHub Copilot Chat」を使って、JavaScriptによるWebアプリケーションの開発の仕方を学ぶ本連載。これまではGitHub Copilot Chatを使ってJavaScriptのアプリを作る体験を重ねてきたが、実際の開発では「動かない」「エラーが出る」という場面に遭遇し、修正する時間のほうが長くなることも多い。

そこで今回は、Copilot Chatをデバッグ（バグの原因調査）に活用する方法を解説する。Copilot Chatはコード生成だけでなく、プログラムのどこが間違っているのかや、なぜ動かないのかなどを自然言語で説明してくれるため、初心者にとって強力な学習支援ツールにもなる。→連載「GitHub Copilot ChatではじめるJavaScript開発」のこれまでの回はこちら

なぜデバッグにCopilot Chatが役立つのか

デバッグには、エラーメッセージを読んだり、コードの動作を追ったりする必要があり、初心者にとってはつまずきやすいポイントとなる。従来は、エラーメッセージをコピーして検索エンジンで調べたり、技術フォーラムで質問したりして、自分で解決策を探し出す必要があった。

その点、Copilot Chatを使えば、その場で即座にエラーの意味を説明してもらうことができる。Copilot Chatがデバッグに役立つ主な理由としては、次のような点が挙げられる。

  • 技術的な専門用語が並ぶエラーメッセージを、かみくだいてわかりやすい言葉で解説してくれる
  • コードの文脈を理解した上でアドバイスしてくれる：エラーの一般的な説明ではなく、実際のコードに基づいて具体的に解説し、修正案をアドバイスしてくれる
  • 対話的に問題を絞り込める：最初の質問で解決しなくても、追加の質問を重ねることで、対話的に問題を絞り込んでいくことができる

エラーでデバッグを体験してみる

それでは、これまで作った天気予報アプリで発生しうる典型的なエラーを例に、Copilot Chatを使ったデバッグを体験してみよう。

エラー例1：DOM要素が取得できない

まず、天気予報アプリのJavaScriptファイルに、次のようなよくあるタイプミスを仕込んでみる。[検索]ボタンに対してクリックリスナーを設定しているコードだが、本来は「search-btn」と書くべきところを、「serch-btn」と書いている。

// 初期イベント設定
document.getElementById('serch-btn').addEventListener('click', () => {  // "search"のスペルミス
    const city = document.getElementById('city-input').value.trim();
    if (!city) return;
    fetchWeather(city);
})

この状態でWebブラウザでindex.htmlを表示すると、[検索]ボタンを押しても何も反応しない。開発ツールのコンソールを確認すると、下図のように「TypeError: null is not an object (evaluating 'document.getElementById('serch-btn').addEventListener')」というエラーが発生していることがわかる。

  • 「TypeError: null is not an object」というエラーが発生している

    「TypeError: null is not an object」というエラーが発生している

このエラーメッセージを見ても、初心者には何が問題なのかわかりにくい。そこでCopilot Chatに次のように相談してみよう。

次のエラーが発生しました。原因を教えてください。

エラーメッセージ:
TypeError: null is not an object (evaluating 'document.getElementById('serch-btn').addEventListener'

すると、Copilot Chatは関連するファイルとコードから、エラーの原因を探してくれる。そしてもしも解決方法が分かる場合には、その方法も提示してくれる。筆者の環境では次のようになった。

原因と対応手順（簡潔に）：

原因：script.js で document.getElementById('serch-btn') とタイプミスしているため、該当要素が見つからず null が返り、null に対して addEventListener を呼んでいる。
対応：script.js の該当箇所を修正して正しい id ('search-btn') を使う。さらに安全のため、要素が取得できたかチェックしてからイベントを登録するガードを追加する。
確認：修正後にブラウザで再読み込みしてエラーが消えることを確認する。

変更ファイル
script.js

スペルミスの修正と要素存在チェックを追加します

タイプミスが原因であることを突き止めた上で、ここでタイプミスをすることで何が問題になるのかを解説してくれている。さらに解決策を見つけて、script.jsを修正している。修正内容はエディター上で差分として確認できるので、問題がなければ「保持」で反映し、問題がある場合には「元に戻す」で修正を取り消せばよい。

  • エラーの修正方法も提示してくれる。変更点は差分で確認できる

    エラーの修正方法も提示してくれる。変更点は差分で確認できる

エラー例2：APIのURLが間違っている

次に、API呼び出しでエラーが発生する例を見てみよう。script.jsの中では、OpenWeather APIの呼び出しURLをurl変数にセットしている。このURLに、次のようにタイプミスを仕込んでみる。

// URLの一部が間違っている（正しくは /weather）
const url = `https://api.openweathermap.org/data/2.5/wether?q=${encodeURIComponent(city)}&appid=${API_KEY}&lang=ja&units=metric`

この状態でWebブラウザでindex.htmlをリロードして天気の検索を実行すると、天気情報が取得できず、開発者ツールのコンソールには下図のように「404 (Not Found)」というエラーが表示されてしまう。

  • 「404 (Not Found)」というエラーが表示されている

    「404 (Not Found)」というエラーが表示されている

このエラーの原因について、Copilot Chatに聞いてみよう。

「検索」ボタンをクリックしても、天気情報の取得に失敗してしまいます。
コンソールには次のようなエラーメッセージが表示されています。

Failed to load resource: the server responded with a status of 404 (Not Found)

原因を教えてください

質問するときには、どのような操作をしたら、どんな結果になったのかを具体的に聞いた方がいい。筆者の環境では、次のような回答が返ってきた。

原因（短く）

・ネットワークタブで確認すると、fetchリクエスト先のURLが間違っており（/wether のようなタイプミス）、OpenWeatherのサーバが該当リソースを返さないため 404 になっています。

確認手順（素早く試せる順）

1. ブラウザ開発者ツール → Network タブを開く。検索ボタンをクリックして発行されたリクエストの URL を確認する。
2. URL に "wether" のような綴りミスがあればそれが原因（正しくは "weather"）。
3. script.js の fetch の URL を修正してページを再読み込み・再試行する。

修正案（script.js の一箇所を変更）

・fetch のエンドポイントを /wether → /weather に直します。念のため API_KEY が未定義かどうかの簡易チェックも入れておくと良いです。

ファイル変更（1件）
script.js

補足

・Network タブでどのリクエストが 404 になっているかをまず特定してください（API の URL か、ローカルファイル（config.js/script.js）かで対処が変わります）。
・今回のコードベースでは過去に /wether のスペルミスが確認できるため、まずは上記修正で解決する可能性が高いです

Copilot Chatは、エラーの原因を「fetchリクエスト先のURLが間違っている可能性が高い」と指摘しており、それを確認するための手順を提示している。断言していないのは、今回のエラーはプログラムの実行時に発生しているものなので、実行している環境によって挙動が異なることがあるからだ。その上で、過去の事例から「wether」は「weather」のタイプミスである可能性が高いと予測し、その修正案を提示してくれている。

Copilot Chatにデバッグを依頼する際のコツ

Copilot Chatに問題の調査や解決を依頼する場合、やみくもに質問するだけでは、要領を得ない回答が返ってきてしまうこともある。そこで、以下の点に注意すると、より的確な回答を得られる可能性が高くなる。

症状を具体的に伝える

Copilot Chat のデバッグ性能を最大限引き出すには、単に「動きません」というだけでなく、次のような項目を交えてできるだけ具体的に症状を伝えるのが大切だ。

  • 何をしたら（例:ボタンを押したら）
  • 何が起こるか（例:画面が更新されない）
  • エラー文はあるか（例:Uncaught TypeErrorが出る）
  • どのファイルのどの部分か（例:script.jsの10行目あたり）

人間の開発者と会話するときと同じで、状況が具体的なほど、回答の推測精度も上がる。

エラーメッセージやログを貼る

Webアプリの場合、ブラウザの開発者ツールのコンソールに表示されるエラーメッセージや警告は問題解決の重要な手掛かりになる。したがって、質問の際には、関連していそうなエラーメッセージをコピーして貼り付けるとよい。

関連するコードを示す

プログラムのどの部分でエラーが発生しているのかが特定できる場合は、その箇所のコードをコピーして貼り付けるか、どのファイルの何行目といった情報を付け加えるとよい。該当のコードだけでなく、関連する部分も含めて示すと、Chatがより正確に問題を把握できるようになる。直前にコードを書き換えたことでエラーが発生したのであれば、書き換える前と後のコードを示して状況を説明するといいだろう。

試したことを伝える

すでに自分で試してみた解決策がある場合は、それも伝えるようにしよう。同じ提案を避けられるだけでなく、問題の範囲を絞り込むのに役立つからだ。たとえば次のような聞き方をするといいだろう。

天気予報アプリで、検索ボタンをクリックしても反応がありません。

試したこと:
- コンソールにエラーは表示されていません。
- ボタンのid属性は正しく設定されています。
- HTMLファイルとJavaScriptファイルのリンクも確認しました。

考えられる原因は何でしょうか

修正案をそのまま信用しない姿勢も大切

Copilot Chatが修正案を提示してくれたとき、その内容をそのまま信用して無条件で適用するのは避けよう。なぜなら、以下のようなリスクがあるからだ。

  • 他の部分で意図しない変更が加わっている可能性がある
  • 自分のコードの文脈に完全には合っていない可能性がある
  • 修正の理由を理解しないままにしておくと、あとでメンテナンスするときに困る。また、同じミスを繰り返すことになる

Chatが提案した修正案に対しては、常に次のような姿勢で臨むことが大切だ。

  • 必ず元のコードと修正案を比較して、どこが変わっているかを確認する
  • なぜその変更が必要なのかを、Chatの説明を読んで正しく理解する
  • 修正内容が理解できなかった場合は、追加で質問して疑問点を明らかにする
  • 修正を適用した後は、必ず自分で実行して、期待通りに動くかを確認する
  • 修正後も問題が解決しない場合は、再度Chatに相談してみる

Chatで会話しながら解決策について考えることで、コードの理解をより深めることができる。

まとめ

今回は、GitHub Copilot Chatを使ってプログラムのデバッグを進める基本的なやり方を紹介した。デバッグで大切なのは、Chatに頼りきりになるのではなく、Chatの説明を理解しながら修正を適用することだ。Copilot Chatとの対話を通じてエラーの原因や修正方法を理解することは、プログラミングスキルの向上にもつながっていく。

次回は、コードの動作を保証するためのテストについて、Copilot Chatに手伝ってもらう方法を紹介する。