学生がGitHubEducationを使ってGitHubCopilotを導入した話

# 始まり
GitHubCopilot(Chat)を使いたくてたまらなくなったので勝手に申請した話です。
導入するエディタはVS2022とVScodeです。
学生なら、タダ！
注意：導入後に執筆し始めて、友人のスクショを借りているのでアカウントがたまに変わります

# 必要な物
- 学生証
- 所属学校の英語名
- 二段階認証済みのGitHubアカウント(おススメはGitHubモバイルでの認証)
- Webカメラ
- 英語に負けないやる気（翻訳機能で代用可能）

# GitHubEducationの申請編
## 申請ページを見つける

[このページ](https://education.github.com/discount_requests/application)です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/5f692301-f756-18f4-86e6-eb5f85cb16f0.png)

[参考公式リファレンス](https://docs.github.com/ja/education/explore-the-benefits-of-teaching-and-learning-with-github-education/github-global-campus-for-students/apply-to-github-global-campus-as-a-student)


## 学校情報を入力する
1. 上の画像の[学生です]ボタンを押す。
すると下画像のページになり、デフォルトでStudentが選択されてるので下にスクロール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/bed4ec51-0856-d45c-bf6c-818df8590b53.png)

2. 学校名の入力
公認の略称でも良さそうです
例) **NKC**(**N**agoya **K**ogakuin **C**ollege of Technology)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/53d9e919-5d32-923c-d2e4-1cdfa52bada4.png)

:::note warn
二段階認証しないと進めません
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/79cb6b27-13f0-3921-c432-6d138f807abd.png)
:::

3. 学校から貰ったメールアドレスをGitHubアカウントに登録する
+ [x] 登録済みならスキップ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/15b42ef0-1382-118b-db83-19985a764351.png)

3.  学生証を登録する
筆者が最もつまづいたところです。
ファイル選択で写真をあげても申請が始まりませんでした。
PCについてるカメラやWebカメラで文字が読めるくらいのいい感じさで撮りましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/94f2d114-99c6-54b9-c2a5-0ca1177d6a1b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/9b6528a2-30a3-747c-cd41-3dee18eb626d.png)
[写真を撮る]ボタンがある領域に写真が表示されたら[申請を開始する]ボタンを押しましょう。


4. 申請完了
この画面になったらゲームクリアです。申請受理は3,4日くらいかかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/c5cb6398-97f5-2455-6d2d-b66d796c228d.png)

最初の[このページ](https://education.github.com/discount_requests/application)から申請状況が確認できます。
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/aebdbd7a-3435-5781-4ab8-5490efe64105.png)

# GitHubCopilot(Chat)の導入編
## 申請が受理されたことを確認する
[いつものページ](https://education.github.com/discount_requests/application)とか、[プロフィール](https://education.github.com/discount_requests/application)から確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/e65481ff-f1e2-3ed9-23ef-73472705589d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/c7e73453-7095-1e35-1d71-7cac2302bbfc.png)
GithubのPROって名乗れます！

## VisualStudio編
VisualStudio2022(以下VS)以降じゃないとダメらしいです。
参考：[MS公式リファレンス](https://learn.microsoft.com/ja-jp/visualstudio/ide/visual-studio-github-copilot-extension?view=vs-2022)
1. エディタ内ヘッダーの拡張機能＞拡張機能の管理(Manage Extensions...)を開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/172d82e4-e43a-47f8-5e3a-a14a779f3e50.png)

2. 検索窓に`Github`か`copilot`を入れて画像の上２つをダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/ba9a06e5-f811-fdfb-608d-2127b2bcb620.png)

3. VSのアカウント設定からGitHubアカウントを追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/1920ddfe-6d1a-9069-4a30-f8ca1e87eb54.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/858dacf4-2f2a-8f29-368d-0e583e5b925e.png)

4. 再起動してインストールプロセスの完了を待つ
出力ウィンドウでいい感じに処理入るのが見れます。
Successfully authorized GitHub Copilot.が見れたら起動完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/04249ed0-7f92-a3c1-71c5-4407884c488a.png)

## VScode編
左のツールバー?の拡張機能欄から検索窓に`Github Copilot`を入力して画像上２つをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/f4debb9c-4247-bf91-2d95-044d8d719b5d.png)

# 使い方
## VS2022編
**Copilotの使い方**
コメントを書くといい感じに生成してくれたりします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/c4cbb583-d6d0-7d77-7592-4fb79f22f7f8.png)

**CopilotChatの使い方**
1. 表示＞GitHubCopilotチャットでウィンドウを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/6a3ffd95-6443-21ce-4f85-6559a66eaf79.png)
2. 質問内容を書き込みます(`/`でコマンドを選択、`#`でコードを選択)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/08954c48-59b4-f563-938b-44ef7327b91d.png)
[プレビュー]ボタンを押すとスクリプトの方で比較を見ることもできます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/53d0b2c4-80b3-5110-df7d-ab33963aa25b.png)
## VScode編
**CopilotChatの使い方**
左のチャット欄から質問内容を書き込みます
コードは開いてるワークスペースから自動で読み込まれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/9620972c-ca4d-fed5-db7c-c6a4e90e3faa.png)

カーソルに挿入から比較して見ることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587830/04239366-005a-5f87-0acc-79fbbe19ff0c.png)

# 終わり
**いかがでしたか！お役に立てれば幸いです！**