AIプログラミングアシスタントツール「GitHub Copilot Chat」を使って、JavaScriptによるWebアプリケーションの開発の仕方を学ぶ本連載。第1回～第4回では、Copilot Chatと会話しながら、以下のサンプルを作ってきた。

  • 「Hello, Copilot!」を表示する簡単なページ
  • 四則演算ができる計算機
  • OpenWeather APIを使った天気予報アプリ

ここまでの例で見てきたように、Copilot Chatの力を借りれば「とりあえず動くもの」は簡単に作ることができるわけだが、ここから先はどれだけ効率よく、安全に使えるかがポイントになる。そこで今回は、Copilot Chatをより効率的に活用するためのテクニックを紹介する。

効率的な指示の仕方を身につける

Copilot Chatに指示を出す際、どのように伝えるかによって得られる回答の質が大きく変わる。ここでは、目的に応じた効果的な指示パターンを4つ紹介する。

基本形：状況＋目的＋条件

どのパターンでも共通して役立つのが、次の3要素を入れることだ。

  • 状況：どのファイル/どんなアプリか
  • 目的：何をしたいのか
  • 条件：制約や希望(初心者向けに、コメント多めで……など)

例えば、天気アプリで気温表示を調整したいときには、次のように指示するといいだろう。

今、OpenWeather API を使った天気予報アプリを作っています。
index.js の気温表示のコードを、初心者にもわかりやすい書き方に直してほしいです。
摂氏で表示することと、コード内にコメントを多めに入れてください。

Copilotは、エディター内のコードを読むことができるが、その上で「どの部分をどう変更したいか」を明確に伝えると、無駄な修正を減らすことができる。

修正依頼型

すでにあるコードを少しだけ変えたいときは、修正してほしい範囲をできるだけ具体的に示したほうがいい。「このアプリをもっと良くして」のような曖昧な指示では、意図しない大規模な書き換えが起こることもあるからだ。計算機アプリの「=」の挙動を調整したい場合は、次のように main.js の該当箇所だけを修正するように明確に指示するといいだろう。

計算機アプリの main.js があります。
このファイルの「=」ボタンをクリックしたときの処理だけを書き換えてください。
現在のコードを読み取って、
- エラーが出ないようにする
- 0で割ったときは「エラー」と表示する
ように修正案を出してください。

改善依頼型

既存のコードは正しく動作しているものの、より良くしたいような場合は、どのように良くしたいのかを具体的に提示してあげる必要がある。例えば、script.js にfetchで天気情報を取得するコードがあるとする。この部分をリファクタリングしたいのであれば、単に「リファクタリングしてください」と指示するよりも、次のように、より具体的に改善の方針を指定すれば、方向性を見失わずに適切なコードを生成してくれるようになる。

script.js に fetch を使って天気情報を取得するコードがあります。
このコードは動いていますが、可読性を上げたいです。
- 関数を分割する
- 変数名をわかりやすくする
- エラー処理を整理する
といった観点でリファクタリングしてください。
変更内容の理由もコメントで説明してください。

質問・解説依頼型

AIが生成したコードの処理内容や動作原理などが分からない場合は、そのこともチャットで聞いて説明してもらおう。「動けばいい」ではなく、AI生成のコードでも内容を正しく理解し、自分で責任を持って取り扱うことが重要だ。このとき、漠然と「説明してください」と聞くのではなく、知りたいポイントや説明の仕方を具体的に伝えることで、必要な情報を効率よく得ることができる。例えば、次のような具合だ。

script.js の fetchWeather関数の処理内容がよくわかりません。
この関数の中で行っている処理を、初心者向けに
- まず日本語で概要を説明
- そのあと1行ずつ説明
の順番で解説してください。
専門用語は、かんたんな日本語に言い換えてほしいです。

説明してほしい対象の関数を明確にした上で、初心者向けの説明であることを明記し、さらに「日本語で概要を説明」「1行ずつ説明」のように説明の仕方まで具体的に指定している。

大きなタスクを分割して進める

複雑な機能を一度に作ろうとすると、Copilot Chatの回答が長くなりすぎたり、意図と異なる実装になったりすることがある。大きなタスクは小さなステップに分割して、一つずつ確実に進めるのがコツである。

天気予報アプリで5日間分の予報を表示する機能を追加したい場合、いきなり「このアプリに5日間の天気予報機能を追加してください」のように指示を出すと、膨大な量のコードが追加・修正されてしまい、理解するのが難しくなる。このようなときは、先にタスクを分解した上で、順番に実装を進めるように指示を出すのが良い。

そこで、まずはCopilot Chatにタスクを分割してもらおう。

筆者の環境では、次のようなタスクのリストが返ってきた。

  • OpenWeatherの「5日間/3時間ごと予報」API(/forecastエンドポイント)の仕様を確認する
  • 5日間予報を取得するためのfetch処理をscript.jsに追加する
  • 5日間予報のデータ構造(リスト形式)から、日ごとに代表的なデータ(例：毎日正午、または最高気温/最低気温など)を抽出するロジックを作成する
  • 5日間予報を表示するためのHTMLエリア(例：#forecast-info)をindex.htmlに追加する
  • 5日間予報のカードやリストを表示するためのCSSをstyle.cssに追加する
  • 取得した5日間予報データを画面に描画する関数をscript.jsに実装する
  • 検索時に現在の天気と5日間予報の両方を取得・表示するようにscript.jsを修正する
  • エラー時やデータ取得中の表示、単位切り替え(摂氏/華氏)対応など、既存機能との連携を確認・調整する

あとは、このタスクの処理を、順番に1つずつ依頼していけばよい。2番目のfetch処理の実装から始めたい場合は、次のような指示になる。

2番目のステップから始めたいです。
「5日間予報用の fetch 関数を追加する」コードを書いてください。
現状の fetchWeather 関数を再利用して構いませんが、既存の動作が壊れないように注意してください。
  • 5日間予報用の関数をJavaScriptに追加してもらった例

    5日間予報用の関数をJavaScriptに追加してもらった例

このようにタスクを分割しておけば、どこかでAIが意図しないコードを生成してしまった場合でも、そのタスクだけをやり直せばよい。また、途中で仕様を変更したくなった場合でも軌道修正がしやすいというメリットもある。先ほど説明したように、各タスクでは、実装方法についてもできる限り具体的に指示を出すことで、あとで修正する回数を減らすことができる。

Copilot Chat自身をタスクを整理してくれるパートナーとして使えば、開発がかなり楽に進められるようになるだろう。