VSCodeの拡張機能「GitHub Copilot」の無料使用枠導入手順をものすごく易しく書いてみた

### :hatching_chick: **はじめに**
今回は、AIでソースコードを自動補完やアドバイスしてくれるツール **「GitHub Copilot」** をVSCodeの拡張機能「GitHub Copilot」で入れた際の手順を、**できる限りわかり易く記載してみました。** 今後使ってみたい方への参考となれれば嬉しいです。

※前提として、VSCodeをインストール済みの方を想定しています。
[VSCodeのインストールはこちら](https://code.visualstudio.com/)
⇧こちらうまくいかない場合は「VSCode」で検索！無料でインストールできます。

:::note info
使用するためには**Githubアカウントが必要**なようです。まだアカウントを持っていない方は、**Githubの無料アカウントを作成後**にこちらの手順を実施した方がいいかもです（同時に作成も出来ますが、少し面倒だったので）。
:::

## 目次
- **1.GitHub Copilotとは？**
- **2.GitHub Copilotの主な機能**
- **3.VSCodeでのインストール方法（拡張機能を入れてみよう）**
- ~~**最初は無料トライアルで初めてみる（学生は無料らしい）**~~ **→まさかの無料枠**
- **終わりに:hatched_chick:**

## 1.GitHub Copilotとは？
**「GitHub Copilot」** は、OpenAIのCodexを利用したAIペアプログラマーで、**コード補完や自動生成を行ってくれるツール**です。
VSCodeやJetBrains系のIDE（IntelliJ IDEA、PyCharmなど）、Neovimなどで利用できます。
※今回は自身の仕様エディタがVSCodeのため、VSCodeに入れていきます。

## 2.GitHub Copilotの主な機能
GitHub Copilotの主な機能には、以下のようなものがあります。

- **コード補完**　　　　　　：関数の一部を書くだけで、続きを提案してくれます。
- **コメントからコード生成**：関数の説明を書くと、それに沿ったコードを提案してくれます。
- **コードの改善提案**　　　：リファクタリングやバグ修正のヒントを教えてくれます。
- **テストコードの自動生成**：関数をもとにテストコードも提案してくれるらしいです！
　　　　　　　　　　　　（自動テストのコードを提案してくれるなら最高ですね！）


## 3.VSCodeでのインストール方法（拡張機能を入れてみよう）
ここからは、わかり易いように画像付きで説明していきます。

:::note info
この記事を読んで初めてVSCodeを入れた方は、すべて英語で戸惑うと思います。
その場合は、拡張機能の **「Japanese Language Pack for Visual Studio Code」** を入れてみてください。インストール後にVSCodeを再起動すると、メニューなど日本語にしてくれますよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/4fdd73c2-d7d0-4379-adaa-33ee0fc84ba6.png)
:::

**①VSCodeの拡張機能マーケットプレイスで「GitHub Copilot」を検索**
1. VSCodeを立ち上げて、「拡張機能」のページを開きます。画像の丸印が拡張機能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/daf4558a-129d-4a47-9ca5-bc2e501b00fd.png)

2. 拡張機能の検索窓に「GitHub Copilot」を入れて検索します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/8ddd06b0-6cd1-4621-9a9b-369faaf00457.png)

3. 検索して、できるだけインストール数が多いものを自身は選択しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/4297643c-e4ca-41b8-9225-950b9ae72b00.png)

インストールボタンではなく、検索結果の「GitHub Copilot」をクリックすると説明も表示できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/dca0d3ea-c421-44b6-8ea9-f5e289138725.png)

それでは、インストールボタンをクリックしましょう。

・・・・。

インストールが完了しました。インストール後は、このような画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/8cc1b3cc-15dc-470b-b0cf-c54312f3b235.png)
**心配な方は、きちんと使用条件やプライバシーポリシーを確認してから
→[サインインしてCopilotを無料で使用する]ボタンを押してください。**

#### あれ？無料で使用できるの？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/dc266ff2-d893-4125-9eab-0fe9df91407e.png)

とりあえず、上記のリンクをクリックします。
今後条件が変わる可能性もありますので、[無料で使用する方法（公式）](https://code.visualstudio.com/docs/copilot/setup-simplified) で最新の情報を確認して実施してください。

とりあえず、現時点の無料の方法で引き続き行います。

4.タイトルバーのCopilotメニューまたはコマンドパレット（Ctrl+Shift+P）から「CopilotでAI機能を無料で使用...」を選択します(さっきのページか。)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/8cbeb591-c1ba-4a47-80d2-4364e9183965.png)

**「Copilotを無料で使用するにはサインインを選択し、GitHubアカウントにサインインしてCopilot Freeにサインアップしてください。」** とのこと。

ボタンをクリックすると、このページに遷移しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/e7e2f866-4e3f-4155-8e19-ea7361f677ce.png)

githubのアカウントでログインしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/f3127e4a-5929-4dd2-ba91-eb0046cfef31.png)
自身のアカウントの[continue]ボタンを押しましょう。

vscodeを承認するかのページが出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/263912a9-3fb0-471e-b745-cedac829d60f.png)
承認ボタンをおします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/2e7ee0eb-ed4e-47d5-a80c-08bb58132232.png)

このページは閉じていいようです（日本語に訳しています）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/5e890dc4-e226-4b3d-8690-fb8c6e2ae1c4.png)

VSCodeの表示が以下に変わりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/9bb7f7f2-556b-4397-a58b-cdf9a7c66116.png)

無料版というのが出たのですね。公式の説明はこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/1761fa00-5a80-4a8e-81d1-89f6ee23eae3.png)

てっきりクレジットカード情報を求められると思っていたので、ものすごく安心しました。
**導入完了！やったぜ！**



**5.使ってみよう**
公式のページ曰く、以下にプロンプトを入れるようです。
プロンプトといっても、日本語で「○○って何？」などAIに質問する内容を記載するだけでも大丈夫ですよ:muscle:
とりあえず使ってみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/1e035d17-f362-43ea-bda3-c96057f0de5b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/a568e404-199c-4f38-9849-9f12425228d4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/1e8516ea-d1bc-4b1e-9a21-61808191383f.png)



**初回時には、使用する各AIモデルの機能を有効にするかを回答欄にて聞かれます。「Enable」を押下後に使用可能になります！**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3089043/23b16fa4-4997-4ea1-8ddf-818f32562537.png)

## 終わりに:hatched_chick:
最後までご覧頂きありがとうございました！
正直、英語のページってちょっと怖いのでびくびくしながら導入しましたがうまくいって本当に良かったです:joy:
使ってみたい方の参考になれば嬉しいです。

**以上、梅干しとにらめっこでした！**