Copilot Chatを立ち上げ
1. ショートカットコマンドで立ち上げたい
クイックに立ち上げたい時はcontrol + command + i or control + Alt + iでVScodeの上側に入力欄が表示されます。
ReactNativeのアプリを開発していて、起動コマンドを忘れたので聞いてみることに。
こんな感じでコマンドを教えてくれます。
わざわざブラウザに遷移して調べるより早いですね
2. アイコンクリックで立ち上げたい
VScodeの左側のアイコンボタンからも起動ができます
最近Copilot Chatを追加された人は埋もれているかもしれないので、サイドバーのアイコンの表示順位を変えた方がいいかもです
Copilot Chatへの質問スコープ
1. 対象のコードに焦点を当てて聞きたい
通常のCopilot Chatだとソースコードの詳細な質問をしても返してくれない可能性があります。
そう言った場合は対象のソースコードを囲って右クリックすると、そこをプロンプトの一部として含ませることができます。
index.jsの13行目を選択して、右クリック、Copilotの中の「選択内容をチャットに追加」を選択
すると先ほどのソースコードを参照した状態で回答を生成してくれました。
分からない関数とか処理があった時にとても便利です。
2. 対象のファイルに焦点を当てて聞きたい
ソースコードじゃなくファイル全体にフォーカスして質問することも可能です。
App.tsxを開いて右クリック、Copilotの中の「ファイルをチャットに追加」を選択
するとファイル全体のソースコードを見て回答を生成してくれました。
3. プロジェクト全体を俯瞰して聞きたい
次はプロジェクト全体のソースコードを見て回答を生成してもらいます。
質問の前に「@workspace」を入れることで実現できます。
「@workspace」の特徴として、質問内容に合わせて最適なファイルをプロジェクトの中からピックアップして回答を作ってくれます。
「このプロジェクトでどんなアプリを作っているのか」を聞いてみたところ、以下のように回答してくれました。
プロジェクトが大きくなって複数ファイルが絡んだバグが発生した時や、ディレクトリ構成を知りたいときに効果的です。
質問入力時の参照機能
1. @workspace
つい先ほども出てきた「@workspace」です。
ワークスペース内のソースコード全てを参照して、関連性の高いファイルをピックアップして回答を生成してくれます。
ちなみにどうやって関連性の高いファイルを見つけてるのか気になったのですが、公式サイトには以下のように記載されていました。
まず、@workspace会話履歴、ワークスペース構造、現在選択されているコードなど、質問に答えるために必要な情報を決定します。
次に、ローカルで検索したり、 GitHub のコード検索を使用して関連するコード スニペットを見つけたり、VS Code の言語 IntelliSense を使用して関数シグネチャやパラメーターなどの詳細を追加したりするなど、さまざまなアプローチを使用してコンテキストを収集します
質問例
- プロジェクトのディレクトリ構成を教えて
- 〇〇APIとの接続を定義しているファイルと関数はどこ？
- このエラーはどこのファイルが原因？###<エラーメッセージ>###
2. @vscode
vscode内の機能にフォーカスした回答をしてくれます。
遷移先に飛べるボタンなども一緒に用意してくれるので便利です。
質問例
- 言語を日本語に設定したい
- フォントのサイズを変更する方法
- Flutterアプリをデバッグするには？
3. @terminal
ターミナル・コマンドラインにフォーカスした回答をしてくれます。
回答結果としては、要望に沿ったコマンドを生成されます。
質問例
- npmを使ったNext.jsアプリのローカル起動方法
- ディレクトリ名を変更したい時はどうしたらいい
- Djangoプロジェクトを作成するコマンド
質問入力時の補完機能
「結局何をして欲しいのか」をスラッシュコマンドで入力することで、複雑な質問や要望をしなくて良くなります。
スラッシュコマンドは基本的に「@workspace」と組み合わせて利用します。
1. /tests
「@workspace」と併用
選択した範囲の「テストコードを生成」して欲しい時に使用します。
例
2. /fix
「@workspace」と併用
選択した範囲のコードの「修正」をして欲しい時に使用します。
例
3. /explain
「@workspace」と併用
選択した範囲のコードを「説明」して欲しい時に使用します。
例
4. /clear
今まの会話をクリアして、新しいチャットを始めたい時に使用します。
「/clear」と入力すると新しいチャットが開始されます。
5. /help
GitHub Copilot Chatで利用できるコマンド集をみたい時に使用します。
例
質問入力時のチャット変数
生成に使用する参照エリアの範囲を決める時に使用します。
「Copilot Chatへの質問スコープ」と内容は同じです。
1. #file
質問に含ませたい対象のファイルを選択することができます。
「#file」と入力すると画面上にファイル選択モーダルが表示されます。
例
2. #editor
アクティブになっているファイル内のソースコード全体をターゲットを絞ることができます。
例
3. #selection
アクティブになっているファイル内で選択した範囲にターゲットを絞ることができます。
例
最後に
使いこなせると開発がめちゃくちゃスムーズです。
最初は慣れが必要かもしれませんが、今となっては爆速で高品質な開発を実現するために必要不可欠です。
ChatGPT同様にユーザーからの質問の仕方によって精度は大きく変動します。
より良い結果を生成してもらうためにも以下のことを注意してやってみてください
- 質問は具体的かつ詳細に記入、「これ」とか「あの」みたいな指示詞は使わない
- 予めコードの影響範囲が分かるのであれば参照スコープを特定してから質問する
- チャット変数・補完機能を活用して質問の意図をわかりやすくする
- 応答で使用されているファイルを確認してちゃんと正しい結果かを確認する
- コード生成以外の質問をしない、おそらく期待した結果が返ってこない
Discussion