GitHub Copilot chatの始め方と使い方をまとめた

# はじめに
コードの補完や提案によって、コーディングをより迅速にしてくれる`GitHub Copilot`は1年前からあり、実際にご利用された方も多いと思います。ですが、今から約3か月前に発表された`GitHub Copilot chat`は、まだ使ったことがないという方も多いのではないでしょうか。そこで、本記事では`Copilot chat`が含まれる`GitHub Copilot X`の説明や、`Copilot chat`の始め方と使い方をなるべく体系的にまとめました。これから`Copilot chat`を始める方の参考になれば幸いです。

## 環境
- Windows11
    - バージョン：10.0.22621
- Python
    - バージョン：3.11.3
- Visual Studio Code
    - バージョン：1.79.0

:::note warn
VSCodeの開発版である[Visual Studio Code Insiders](https://code.visualstudio.com/insiders/)でないと`Copilot chat`が利用できないという情報がありましたが、通常のVSCodeでも使用できることを確認したため、本記事ではInsiders版は使用していません。
:::

## 準備事項
前提として、GitHubアカウントを持ち、Copilotにも登録済みであるとします。まだ登録できていない方は、以下の記事を参考にしてCopilotの登録を済ませてください。

https://qiita.com/kagami_t/items/ba8c19bb34fd6a5a9642

# GitHub Copilot Xとは
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/2ccbd9ea-d81f-b354-320c-5c679e4a859c.png)

https://github.com/features/preview

2023/3/22に投稿された以下のGitHubの公式ブログには、`GitHub Copilot X`について以下のような記述が書かれていました。

https://github.blog/2023-03-22-github-copilot-x-the-ai-powered-developer-experience/

>Our R&D team at GitHub Next has been working to move past the editor and evolve GitHub Copilot into a readily accessible AI assistant throughout the entire development lifecycle. This is GitHub Copilot X—our vision for the future of AI-powered software development. We are not only adopting OpenAI’s new GPT-4 model, but are introducing chat and voice for Copilot, and bringing Copilot to pull requests, the command line, and docs to answer questions on your projects.

>(日本語訳)
GitHub Nextの研究開発チームは、エディターを超えて、GitHub Copilotを開発ライフサイクル全体を通してすぐに利用できるAIアシスタントに進化させるために取り組んできました。これがGitHub Copilot Xであり、AIを活用したソフトウェア開発の未来に対する我々のビジョンです。OpenAIの新しいGPT-4モデルを採用するだけでなく、Copilotにチャットと音声を導入し、プルリクエスト、コマンドライン、ドキュメントにCopilotを導入して、あなたのプロジェクトに関する質問に答えていきます。

つまり`GitHub Copilot X`とは、`Copilot Voice`、`Copilot for pull requests`、`Copilot for CLI`、`Copilot docs`などの製品を含んだ、GPT-4によるGitHubのAIアシスタント製品群のことであると言えます。

:::note info
**GitHub Copilot XとGitHub Nextの関係性**
`GitHub Copilot X`と近い製品群として、`GitHub Next`というものがあります。`GitHub Next`は、`GitHub Copilot`を含んだ、GitHubによる次世代の開発体験を実現するためのプロジェクト群の総称であり、Copilotの他にも`Flat Data`や`Visualizing a Codebase`となどの数多くのツールが含まれています。
https://githubnext.com/
:::

# GitHub Copilot chatとは
`GitHub Copilot chat`とは、`GitHub Copilot X`の一部であり、AI技術を活用したコード補完ツールです。`Copilot chat`の機能、使い方、制限事項、上手な使用法について、[GitHub Docs](https://docs.github.com/en/early-access/copilot/github-copilot-chat-transparency-note)で載せられていたことを次にまとめます。

## Copilot chatの機能
- 入力処理
- 言語モデル解析
- レスポンス生成
- 出力フォーマット

## Copilot chatの使い方
- ユニットテストケースの作成
- コードの説明
- コード修正の提案
- コーディングの質問に対する回答

## Copilot chatの制限事項
- 範囲の限定性
- バイアスの可能性
- セキュリティリスク
- 公開されているコードとの一致
- 不正確なコード
- 非コード化トピックに対する不正確な回答

## Copilot chatの上手な使用法
- トピックに沿ったプロンプトを使用
- 安全なコーディングとコードレビューを慣行
- フィードバックを提供
- 最新情報を入手

# GitHub Copilot chatの申し込み
まずは`Copilot chat`の申し込みを始めていきます。2023年6月現在、`Copilot chat`を使用するためには申請が必要となっています。申請はこちらの[waitlist](https://github.com/github-copilot/chat_waitlist_signup/join)に登録することでできます。

:::note warn
`GitHub Copilot`の有効なサブスクリプションがないと、以下の画面のようにCopilotのライセンスを取得する必要があるよ、と言われます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/510bd5f4-fcf1-3f77-e5b1-eac2f1ba5518.png)
:::

`GitHub Copilot`のサブスクリプションが有効化されていると、「Join the waitlist」のボタンがある画面が表示されます。`Copilot chat`をどこで使う予定かを尋ねられたため、ここでは`Visual Studio Code`をチェックしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/e2577f29-a19e-119d-1b71-68b48035abb0.png)

「Join the waitlist」を押すと、ベータ版の`Copilot chat`が使えるようになったよという画面が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/d418e8d7-f71f-12ef-f2ce-1481c348791c.png)

# VSCodeでの拡張機能のインストール
`Copilot chat`の登録が終わったら、次は開発環境に拡張機能のインストールをしていきましょう。`GitHub Copilot`は`Android Studio`や`JetBarins`のような様々なIDEと互換性がありますが、本記事では`Visual Studio Code`の拡張機能を使って`GitHub Copilot`を使っていきます。

https://docs.github.com/ja/copilot/getting-started-with-github-copilot#prerequisites

公式ドキュメントのクイックスタートを参考にしたい方は、以下のリンクをご覧ください。

https://docs.github.com/ja/copilot/quickstart#visual-studio-code-%E7%94%A8%E3%81%AE-github-copilot-%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B


## 必要な拡張機能のインストール
今回は、以下のExtensionsをインストールします。
- `GitHub Copilot`
    - AI駆動のコード補完ツール
    - OpenAIのGPT-3.5 Turboを利用
- `(GitHub Copilot Nightly)`
    - `GitHub Copilot`の最新バージョン
- `GitHub Copilot Chat`
    - AIがコードに関する質問を回答
    - OpenAIのGPT-4を利用

### `GitHub Copilot`のインストール
まずは、`Visual Studio Code`のExtensionsで"GitHub Copilot"と入力して`GitHub Copilot`をインストールしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/44d741da-0831-024e-ef95-a38e6801cfbb.png)
`GitHub Copilot`は安定版なので、最新版を使いたい人は、`GitHub Copilot Nightly`を代わりにインストールしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/1579bbac-7e09-48cc-dfff-b6aa2bfaa1c5.png)

:::note warn
`GitHub Copilot`と`GitHub Copilot chat`の両方をインストールしてしまった場合、一方をアンインストールする必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/4cdf23cd-0b55-eca1-5dfe-777396b0bae7.png)
:::

インストール後、「Sign in to GitHub」ダイアログが表示されるので、GitHubにサインインしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/ee42d52e-8518-a8ff-1634-e6e8d9c49a1f.png)

### `GitHub Copilot chat`のインストール
`GitHub Copilot chat`の拡張機能もインストールしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/493bab12-ca87-7a76-73fc-cc7b846d090c.png)

# Copiot chatの使い方
VSCodeに拡張機能をインストールしたら、ここからは実際に`Copilot chat`を使っていきましょう。`Copilot chat`の使用方法は以下の2種類があります。
- コード内での使用
- チャット内での使用

## コード内での使用方法
1つ目に、コード内で使用する方法が挙げられます。Copilotに質問したい該当箇所のソースコードを選択して右クリックを押した後、`Copilot`>`Start Code Chat`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/ab60c356-5e36-a8f9-483c-aaa659688a71.png)
選択するとコード内で質問ダイアログが表示されるので、Copilotに質問を問いかけることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/c0ff1a45-05c6-df53-2bb4-fa4c1e4c17b6.png)

## チャット内での使用方法
2つ目に、チャット内で使用する方法が挙げられます。`GitHub Copilot chat`の拡張機能をインストールした後は、VSCodeのアクティビティバーに追加されているチャットのアイコン(次のスクリーンショットの赤い四角)、をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/e49f437d-3c5d-5d07-5283-c2ead4b4a73e.png)
クリックすると、サイドバーに`GitHub Copilot`のチャット画面が表示されます。サイドバーの下部にダイアログが表示されるので、コード内の場合と同様にCopilotに質問を問いかけることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/e6809406-51cc-d981-92d3-0562d594dafb.png)


# Copilot chatのコマンド一覧と実行例
`Copilot chat`には、いくつかのコマンドが用意されています。ここからはコマンドの説明と実行例を紹介していきます。

## `/vscode`
VS Codeに関する質問ができます。
### 実行例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/1d801a87-4cfe-28d6-8af6-1cbaf92184c8.png)
質問通りの回答を得ることができました。

## `/tests`
選択されたコードのユニットテストを生成してくれます。
```python:Pythonのサンプルコード
x = "Hello, world!"
print(x)
```
### 実行例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/98b1b2b8-9c82-a6e4-6f43-8ad4d89f168a.png)
以下の3つのユニットテストを生成してくれました。
- `test_x_is_string`: 変数`x`が文字列であることをテスト
- `test_x_is_hello_world`: 変数`x`が "Hello, world!"という文字列と等しいかどうかをテスト
- `test_print_output`: 関数`print_x`が文字列"Hello, world!"を標準出力に出力することをテスト

## `/fix`
選択されたコードの問題点の修正を提案してくれます。
```python:Pythonのサンプルコード
x = "Hello, world!"
print(y)
```

:::note warn
上のサンプルコードは、print(**x**)とすべきところをprint(**y**)としているため、間違いを含んだコードになります。
:::

### 実行例①
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/39f961cf-8499-3a22-0f47-0c11527388d4.png)
「yが定義されていません。修正するためにyとxで置き換えてください」とコードの問題点と解決策を正確に指摘してくれました。また、正しいコードも出力してくれました。

### 実行例②
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/039fef76-9f7f-8b55-6743-13095c0afead.png)
`/fix`の後に引数として渡しても、同様の回答を得ることができました。

## `/explain`
選択されたコードがどのように動作するかを説明してくれます。
```python:Pythonのサンプルコード
x = "Hello, world!"
print(x)
```
### 実行例①
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/8ccbf70b-13e3-888a-bb67-96d9b285a19d.png)
コマンド通り、コードの解説をしてくれました。

### 実行例②
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/0d0b9b76-d870-7e99-e2ee-34499a0b4063.png)
`/explain`コマンドの後に引数としてコードを渡した場合でもコードの解説をしてくれました。可読性を高めるために、コメントを追加したコードも出力してくれました。

## `/ext`
VS Code拡張開発について説明してくれます。
### 実行例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/38b63b26-5552-0601-ebb0-d74c0c2a5172.png)
`GitHub Copilot Nightly`の概要とインストール方法を説明してくれました。

## `/help`
GitHub Copilotに関する一般的なヘルプを表示してくれます。
### 実行例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/cb329b54-1d13-23d6-0c6a-084c32310c10.png)
`Copilot chat`の概要や、使用可能なコマンドなどを出力してくれました。

# Copilot chatの日本語による実行例
ここまでは、`Copilot chat`は英語で回答してくれましたが、英語が苦手な方にとっては読むのが大変です。質問の言語と同じ言語で回答してくれる特性を利用して、日本語での質問をしてみることにしましょう。

## コマンドの代用
コマンドを使用せず、日本語で質問しても同様の回答が得られるかを実験しました。以下の実験より、`Copilot chat`で用意されているコマンドを敢えて使用する必要はないと感じました。
### `/explain`の代わり
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/34438b6e-a9c6-976c-3862-fcefef3a6837.png)
コードの説明を日本語してもらうことができました。
### `/fix`の代わり
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/6241df47-eb6e-b52e-3bbc-79cb7ae17126.png)
日本語でバグの内容を教えてくれました。

# GitHub Copilot chatを使った所感
- コマンドを使う必要はなさそう
- 日本語の精度は高い
- 質問の自由度は高く、回答も正確

# おわりに
本記事では、`GitHub Copilot X`に含まれる`GitHub Copilot chat`の始め方を使い方をまとめました。実際に`Copilot chat`を使ってみた感想として、VSCodeの一画面でリサーチから、コーディング、テストまで完結する`Copilot chat`は慣れると生産性を大幅に高めてくれる可能性があると感じました。可能な限り公式ドキュメントの内容からの情報をまとめていますが、間違い等があれば教えていただけると幸いです。