Copilot Chatの活用法
ストーリー
「コード補完は便利だけど、もっと複雑なことをしたい時もあるだろ？」
中島先輩がVS Codeのサイドバーにチャットパネルを開いた。
「Copilot Chatを使えば、エディタの中でChatGPTのように対話できる。 しかもプロジェクトのコードを理解した上で回答してくれるんだ」
「エディタを離れずにAIと対話できるんですか？ それは便利ですね」
「しかも便利なスラッシュコマンドがある。これを覚えると効率が段違いだ」
Copilot Chatの基本
3つの使い方
| 方法 | 開き方 | 用途 |
|---|---|---|
| サイドバーChat | Ctrl+Shift+I | 長い対話、設計相談 |
| インラインChat | Ctrl+I | 選択コードの修正・変換 |
| クイックChat | Ctrl+Shift+Alt+L | 簡単な質問 |
スラッシュコマンド
Copilot Chatの強力な機能です。
主要コマンド一覧
| コマンド | 説明 | 使用例 |
|---|---|---|
/explain | コードの説明 | 選択したコードを解説 |
/fix | バグ修正 | エラーのあるコードを修正 |
/tests | テスト生成 | 選択した関数のテストを生成 |
/doc | ドキュメント | JSDoc/コメントを生成 |
/optimize | 最適化 | パフォーマンス改善の提案 |
@workspace | ワークスペース参照 | プロジェクト全体を考慮した回答 |
使用例: /explain
手順:
1. 理解したいコードを選択
2. Ctrl+I でインラインChatを開く
3. "/explain" と入力
Copilotが選択したコードの動作を詳しく説明してくれる
使用例: /fix
手順:
1. エラーのある行にカーソルを置く
2. Ctrl+I でインラインChatを開く
3. "/fix" と入力
Copilotがエラーの原因を特定し、修正案を提示
修正を適用するか確認できる
使用例: /tests
手順:
1. テストしたい関数を選択
2. Ctrl+I でインラインChatを開く
3. "/tests" と入力
Copilotがテストコードを生成
テストフレームワーク（Jest, Vitest等）を自動判定
@参照を使ったコンテキスト指定
@workspace
プロジェクト全体を参照した回答を得られます。
チャット入力例:
@workspace このプロジェクトで使われているデータベース接続方法を教えて
→ プロジェクト内のファイルを検索して、実際の接続コードを参照した回答
@vscode
VS Codeの操作方法を聞けます。
チャット入力例:
@vscode ファイル内の全てのconsole.logを正規表現で検索するには？
→ VS Codeの操作方法を具体的に回答
#file 参照
特定のファイルを参照させます。
チャット入力例:
#file:src/types/user.ts のUser型に基づいて、
バリデーション関数を作ってください
→ 指定ファイルの型定義を参照した関数を生成
実践的な活用パターン
パターン1: コードの説明を依頼
使い方:
1. 理解できないコードを選択
2. サイドバーChatで質問
プロンプト例:
「選択したコードが何をしているか、初心者にもわかるように
ステップバイステップで説明してください」
パターン2: リファクタリング
使い方:
1. リファクタリングしたいコードを選択
2. インラインChat(Ctrl+I)で依頼
プロンプト例:
「このコードをクリーンアーキテクチャの原則に従って
リファクタリングしてください」
パターン3: エラー解決
使い方:
1. エラーが出ているコードを選択
2. /fix コマンドを使用
または:
「このTypeScriptエラーを修正してください:
Type 'string | undefined' is not assignable to type 'string'」
パターン4: コードの変換
使い方:
1. 変換したいコードを選択
2. インラインChatで指示
プロンプト例:
「このクラスコンポーネントを関数コンポーネント（React Hooks）に変換してください」
「このPromise.thenチェーンをasync/awaitに書き換えてください」
「このJavaScriptコードをTypeScriptに変換してください」
Copilot ChatとChatGPT/Claudeの使い分け
| シーン | Copilot Chat | ChatGPT/Claude |
|---|---|---|
| コードの即修正 | 最適（インライン） | 不向き |
| プロジェクト内の質問 | 最適（@workspace） | コード貼付が必要 |
| 長い設計相談 | 不向き | 最適 |
| 大量のコード分析 | 制限あり | Claude が最適 |
| テスト生成 | 最適（/tests） | 可能だがコピペが必要 |
まとめ
| ポイント | 内容 |
|---|---|
| 3つの使い方 | サイドバー、インライン、クイック |
| スラッシュコマンド | /explain, /fix, /tests, /doc, /optimize |
| @参照 | @workspace, @vscode, #file で参照先を指定 |
| ChatGPTとの使い分け | 即修正はCopilot、設計相談はChatGPT/Claude |
チェックリスト
- Copilot Chatの3つの使い方を実践した
- スラッシュコマンドを使ってコード操作をした
- @workspace を使ってプロジェクト全体を参照した質問をした
- Copilot ChatとChatGPT/Claudeの使い分けを理解した
次のステップへ
Copilot Chatを使いこなせるようになったら、次はテストコード生成とリファクタリングに特化した活用法を学びます。
推定読了時間: 30分