VSCode Github Copilot拡張機能チートシート[ChatGPT 4o 以外にも ChatGPT o1-preview(o1-mini)・Claude 3.5 Sonnetとチャットできるようになりました!]

![Wondershare Uniconverter 15_000005.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/b1723f24-8eba-1759-3e98-5a8e897a2918.gif)
みなさんコーディングの際，お供としてGithub Copilotを使用していますか？？
実はGithub Copilotを使うといろんなことができます！コード補完だけできるものだと思っていませんか？？

![スクリーンショット 2024-11-22 14.22.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/d5fa1366-d927-f3d9-f13d-27e58fb05aef.png)

:::note info
**そもそも...**
GitHub Copilotは，IDE上でAIを活用したコーディング支援を実現する強力な拡張機能である．
:::
本記事では，Visual Studio CodeにおけるGithub Copilot拡張機能の主要な機能と活用方法について解説する．

# 他のチートシート
git/gh コマンド(gitコマンド以外にもgitの概念も書いてあります)

https://qiita.com/JavaLangRuntimeException/items/6b46551f56e0def76eba

lazygit

https://qiita.com/JavaLangRuntimeException/items/42087d09728d5739d73d

Docker コマンド(dockerコマンド以外にもdockerの概念の記事へのリンクもあります)

https://qiita.com/JavaLangRuntimeException/items/21f7c7bf3d143f821697

ステータスコード

https://qiita.com/JavaLangRuntimeException/items/ab1bc7b976ed2dfad91c

TypeScript

https://qiita.com/JavaLangRuntimeException/items/5894391c08e0d8e28389

Go・Gorm

https://qiita.com/JavaLangRuntimeException/items/d388717fc1436bc3ec9d

C#/.NET/Unity

https://qiita.com/JavaLangRuntimeException/items/7849b32bc223d4aa0247

Ruby・Ruby on Rails

https://qiita.com/JavaLangRuntimeException/items/42d935cf92c212f1c7ec

SQL

https://qiita.com/JavaLangRuntimeException/items/f038fbaccdd92fb0308a

Vim

https://qiita.com/JavaLangRuntimeException/items/0c68ab96ea198e0a7294

プルリクエスト・マークダウン記法チートシート

https://qiita.com/JavaLangRuntimeException/items/329eb92a47a07ff4dde8

ファイル操作コマンドチートシート

https://qiita.com/JavaLangRuntimeException/items/16f244606a73f7d106e4

OpenAI Assistants API

https://qiita.com/JavaLangRuntimeException/items/1a1abc01e8d7d05dce93

Github API

https://qiita.com/JavaLangRuntimeException/items/4f3551c31679233219ac

変数・関数(メソッド)・クラス命名規則

https://qiita.com/JavaLangRuntimeException/items/b93865c448f69bcfca4a

# 他のシリーズ記事
**TypeScriptで学ぶプログラミングの世界**
プログラミング言語を根本的に理解するシリーズです．

https://qiita.com/JavaLangRuntimeException/items/cadf49bb419076819963

**情報処理技術者試験合格への道[IP・SG・FE・AP]**
情報処理技術者試験に出題されるコンピュータサイエンス用語の紹介や単語集

https://qiita.com/JavaLangRuntimeException/items/991be402099542ccb936

**IAM AWS User クラウドサービスをフル活用しよう！**
AWSのサービスを例にしてバックエンドとインフラ開発の手法を説明するシリーズです．

https://qiita.com/JavaLangRuntimeException/items/371a334f5a6e07035db5

**AWS UserのGCP浮気日記**
GCPの様子をAWSと比較して考えてみるシリーズ

https://qiita.com/JavaLangRuntimeException/items/527d99e774165a763180

**Project Gopher: Unlocking Go’s Secrets**
Go言語や標準ライブラリの深掘り調査レポートです．

https://qiita.com/JavaLangRuntimeException/items/dc45b412d3fbd2ccb9e8

**Gopher’s Journey: Exploring TCP Protocol**
Goを用いてTCPプロトコルを探求 & 作成するシリーズです．

https://qiita.com/JavaLangRuntimeException/items/38091220106d86651d2b

# 主要機能
VSCodeの拡張機能としてGithub Copilotを使用した場合
## 1. コード補完
エディタ上で左クリック(Macなら右クリック)とは違うが，コーディング中にコードを自動で補完してくれる．

![Wondershare Uniconverter 15_000005.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/62b2e80b-d973-892f-7388-d2fc839c6492.gif)


**動作の仕組みとできること**
- 入力中のコードを文脈から理解し，次の行以降のコードを予測して提案する
- 関数やクラスの実装全体を自動生成することができる
- 変数名やメソッド名の命名を適切に提案することができる

## 2. Copilot Chat
これもエディタ上で左クリック(Macなら右クリック)とは違うが，VSCodeの右下のcopilotのボタンを押すと...
![スクリーンショット 2024-11-24 11.32.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/564c469c-e25b-c357-99f8-a98869425e81.png)
このような画面が出てくるので，「Github Copilot Chat」を押す
![スクリーンショット 2024-11-24 11.33.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/911cc6ea-89dc-c807-57bd-417bf4ccfddb.png)
VSCodeの右側にこのような画面が現れる．
![スクリーンショット 2024-11-24 11.34.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/3a9c423a-1979-0738-735d-2f1db4fe64d1.png)

ここで質問の入力欄の右下に使用するモデルの選択ができる．
> github universe 2024で出るようになった機能です！！

![スクリーンショット 2024-11-24 11.35.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/ee950a4c-2440-61b5-31fe-39aedbe195fe.png)

この中から選択できる．
![スクリーンショット 2024-11-24 11.35.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/fdf4e2ab-7b8b-5add-ae4d-f4cdce7f70fa.png)

このようにChatをすることができる．
![Wondershare Uniconverter 15_000012.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/4d1b391f-7ef8-b693-233d-82c73c8986cd.gif)

**動作の仕組みとできること**
- 自然言語で書かれたコメントから，対応するコードを自動生成する
- 実装したい機能を日本語や英語で記述すると，それに応じたコードを提案する

上記のGIFでもソースコードの説明をCopilotに生成させたががソースコード上で左クリック(Macなら右クリック)をすると「Copilot > 説明」 でもソースコードの説明を生成できる．
![スクリーンショット 2024-11-24 11.56.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/d2912281-6b56-ea98-7799-9347ecb2a9a8.png)

## 3.修正・リファクタリング支援
「Copilot > 修正」でソースコードの修正を生成させることもできる
![スクリーンショット 2024-11-22 10.21.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/ba5e0104-cfad-9d61-0178-c23d6a286479.png)

ソースコードの修正をcopilotに提案させて変更提案を適用したりすることもできる．
![Wondershare Uniconverter 15_000010.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/d63b344f-c0fa-8639-0475-dfd871a7b6d2.gif)

**動作の仕組みとできること**
- 既存コードのパターンを学習し，より良い実装方法を提案する．
- コードの整理や最適化のためのサジェストを提供する．

## 4.コードレビュー
「Copilot > レビューとコメント」でソースコードのレビューを生成させることもできる
![スクリーンショット 2024-11-22 10.21.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/ba5e0104-cfad-9d61-0178-c23d6a286479.png)

このようにある関数に対してコードレビューさせ，2件のレビューを生成させることができた．各レビューに対して変更を適用するかどうかを選択できる．
![Wondershare Uniconverter 15_000013.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/371ef368-a523-76b2-6692-616f3899706c.gif)

## 5.ソースコードからドキュメント生成
「Copilot > レビューとコメント」である関数やメソッド，クラスについてのドキュメントを生成させることができる．
![スクリーンショット 2024-11-22 10.21.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/ba5e0104-cfad-9d61-0178-c23d6a286479.png)

このように関数の説明と引数，返り値の説明を関数の上に生成してくれる．

![Wondershare Uniconverter 15_000011.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/5a0a2a80-34b3-901d-6cd6-92c1b032d1b2.gif)


## 6. テストコードの生成
「Copilot > テストを生成する」である関数やメソッド，クラスについての単体テストを生成させることができる．
![スクリーンショット 2024-11-22 10.21.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/ba5e0104-cfad-9d61-0178-c23d6a286479.png)

このように現在エディタ上にあるファイルの単体テストを生成してくれる．

![Wondershare Uniconverter 15_000014.GIF](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/dbb4caa8-4029-abbd-23d5-e646e218fe2c.gif)

**動作の仕組みとできること**
- 実装済みのコードに対する単体テストを自動生成する．
- テストケースの網羅性を考慮したコードを提案する．

# 活用のベストプラクティス

**1. 効果的な活用方法**

- コメントは**具体的かつ明確**に記述する
- 生成されたコードは**必ずレビュー**し，必要に応じて修正する
- 繰り返し使用することで，より精度の高い提案を得られる

**2. 注意点**

- セキュリティに関わるコードは特に慎重にレビューする
- ライセンスの扱いに注意を払う
- 生成されたコードをそのまま使用せず，ビジネスロジックに合わせて適切に調整する

GitHub Copilotは，開発効率を大幅に向上させる可能性を秘めたツールである．適切に活用することで，開発者は本質的な問題解決により多くの時間を費やすことができるため，開発効率をアップさせよう！...