Zenn
🦦

Copilotに120%働いてもらいたい。ChatGPTと作るプロンプト3段比較。

に公開
JavaScript
Copilot
ChatGPT
tech

はじめに

AIがコードを書く時代になりました。
GitHub Copilotは、その象徴的なツールのひとつです。

最近はEditモード（Copilot Chat）も登場し、自然言語で「この部分だけ直して」と伝えれば、AIがスマートに修正してくれます。

…のはずなんですが、実際に使ってみると──

「あれ？なんでそうなる？」
「いや、そこじゃなくて…」
「うーん惜しい…！」

Copilotが“反応はしてくれる”けれど、“思い通りに動いてくれない”という壁にぶつかります。

そんなとき、「もしかして、Copilotの性能じゃなくて、自分のプロンプトに問題があるのでは…？」と思ったんです。

この記事では、Copilotに渡すプロンプトについて、自分なりに試行錯誤する中で得た気づきを共有したいと思います。

  • 曖昧なプロンプト
  • 中途半端なプロンプト
  • 明確に設計されたプロンプト

この3パターンを比較しながら、出力結果がどう変わるのかを実演形式でまとめてみました。

背景：Copilotとプロンプト設計の関係

Copilotは、入力されたコードやコメントをもとに、次の行を予測してくれるツールです。
すごく便利なのですが、万能ではありません。

たとえば、人間が「ReactでAPIからデータを取得して表示して」とコメントを書いたとします。
Copilotはそれっぽくコードを書いてくれますが、具体的な表示形式や取得方法、UX要件などが指定されていないと、予想と違ったコードになることがよくあります。

Copilotは、文脈に忠実です。だからこそ、文脈をうまく設計する力（＝プロンプト設計力）が求められます。

では、どうやってそのプロンプトを設計するのか？
そこでChatGPTの出番です。

ChatGPTに「Copilot用のプロンプトを作って」とお願いすれば、構文も目的も揃った、精度の高いプロンプトが手に入ります。

実演①：React編 - APIデータ表示コンポーネント

🎯 目的

/api/users から取得したユーザー情報（id, name, email）を、テーブル形式で表示するUIコンポーネントを作る。

🟥 曖昧プロンプト

// プロンプト  
ReactでAPIからデータを取って表示するコンポーネントを書いて

// 出力結果  
- fetchは書いてくれるけど、何のデータか分からない  
- テーブルでもない、リストになってる  
- ローディングやエラーハンドリングがない

🟧 中途半端プロンプト

// プロンプト  
Reactで `/api/users` からデータを取得して表示するUIを作ってください

// 出力結果  
- APIエンドポイントは反映されている  
- でも、どのフィールドを表示すべきか不明  
- リスト形式 or 表形式？UIがブレる

🟩 明確プロンプト（ChatGPT生成）

// プロンプト  
Reactの関数コンポーネントで、以下の仕様に沿ってUIを実装してください。

【仕様】  
- エンドポイント `/api/users` から、`id`, `name`, `email` を含むユーザー一覧を取得する  
- useEffect と fetch を用いてデータ取得する  
- データ取得中は「Loading...」と表示  
- 取得結果はテーブル形式で表示  
- エラーが発生した場合は「Error loading data」と表示  

// 出力結果  
- テーブル形式で `name`, `email` が表示される  
- ローディングとエラー表示も正しく実装  
- 期待どおりの構成！

実演②：Jest編 - バリデーション関数の単体テスト

🎯 目的

validateEmail(email: string): boolean 関数に対するテストコードをJestで書く

🟥 曖昧プロンプト

// プロンプト  
Jestでメールアドレスのバリデーション関数のテストを書いて

// 出力結果  
- 関数の仕様が不明なので、@が必要なのか .com が必要なのか判断されない  
- テストケースが1つだけ

🟧 中途半端プロンプト

// プロンプト  
Jestで、`validateEmail` 関数のテストコードを書いてください。この関数はメールアドレスの形式かどうかを判定します。

// 出力結果  
- テストケースが2つ程度出るが、どこまでが正解か曖昧  
- 正規表現を勝手に想定してくる

🟩 明確プロンプト（ChatGPT生成）

// プロンプト  
以下の仕様の `validateEmail(email: string): boolean` 関数に対して、Jestで単体テストを作成してください。

【仕様】  
- `@` が含まれていれば true を返す、それ以外は false を返す  
- 以下のパターンをテスト対象としてください：  
  - 正常系: "user@example.com", "a@b"  
  - 異常系: "userexample.com", "", "abc"  

// 出力結果  
- 上記のすべてのテストケースが網羅されたコード  
- 意図通り、過不足ない内容に！

まとめ：Copilotを使いこなすには、良い問いが必要

  • 曖昧なプロンプト → 曖昧な出力
  • ChatGPTに「問い」を整理してもらうことで、Copilotの性能を引き出せる
  • プログラミングもAIも、「どう聞くか」がすべて

今日から試せる習慣

  1. 何を作りたいのか、ざっくり言語化してみる
  2. ChatGPTに「Copilot用のプロンプトに整えて」と依頼する
  3. ChatGPTが足りない情報を聞き返してくれたら、それに答えるだけ

使える聞き方のテンプレート

Copilotに渡すプロンプトを作りたいです。  
以下の目的と前提をもとに、プロンプトを設計してください。  
もし情報が足りない場合は、質問してください。

【目的】
ユーザー一覧をAPIから取得して表示するReactコンポーネントを作りたい

【前提】
useEffectとfetchは使いたい

このように、「まずざっくり伝える → ChatGPTが補足を求めてくれる → 一緒に詰めていく」流れをつくることで、
無理なく“良いプロンプト”にたどり着ける習慣になります。

※補足：この記事では複数要素を1つのプロンプトに含めるケースも扱いましたが、場合によっては 「1プロンプト = 1目的」 にした方がCopilotの出力精度が高まることもあります。目的ごとに分けて試すのもおすすめです。

正直毎回GPTに聞かないといけないのは手間ですが笑、ぜひ試してみてください！

Discussion