GitHub Copilotの導入メモ

# 背景・目的
[GitHub Copilot](https://docs.github.com/ja/copilot/about-github-copilot)を導入してみます。

# まとめ
下記に特徴をまとめます

|特徴 |説明|
|:--|:--|
|概要|下記のようなことにより、生産性を上げてくれる<BR>・AIコーディングアシスタントにより、コードを補完してくれる<BR>・チャット機能により、問題の解決を助けてくれる|
|サポートされている環境|・IDE<BR>・GitHub CLIを使用したコマンドライン上<BR>・Copilot Enterproseのサブスクリプションがある場合、GitHub.com|
|3つの有料プラン|・Copilot Individual<BR>・Copilot Business<BR>・Copilot Enterpise|
|Individualの料金|10 USD / 月 <BR> 100 USD / 年 |


# 概要
## GitHub Copilotについて
[GitHub Copilot](https://docs.github.com/ja/copilot/about-github-copilot)を基に簡単に整理します。

> GitHub Copilot は AI コーディング アシスタントであり、コードをより速く楽に記述できるため、問題解決とコラボレーションにより多くのエネルギーを集中できます。 Copilot では、入力時にコーディングの提案が提供されます。現在の行の補完である場合もあれば、まったく新しいコードのブロックである場合もあります。 提案のすべてまたは一部を受け入れることも、提案を無視して入力を続けることもできます。

> チャット機能を使用して、Copilot に問題を解決する最善の方法を尋ねることができます。 また、Copilot に他人が書いたコードについて説明するように依頼することもできます。 コードにバグがある場合は、その修正方法を Copilot に尋ねることができます。

> GitHub Copilot は、開発者の生産性を向上させ、ソフトウェア開発のペースを加速することが実証されています。 詳細については、GitHub ブログの「リサーチ: 開発者の生産性と満足度に GitHub Copilot が与える影響を定量化する」を参照してください。

- AIコーディングアシスタントにより、コードを補完してくれる
- チャット機能により、問題の解決を助けてくれる
- 生産性が向上する

### 必要な場合のサポート
下記で利用可能
- IDE
- GitHub CLIを使用したコマンドライン上
- Copilot Enterproseのサブスクリプションがある場合、GitHub.com

### GitHub Copilotの機能
> Copilot には、次のような一連の機能が含まれています。
> - コード補完 - 入力中に Copilot からコードが提案されます。 詳しくは、「GitHub Copilot の概要」を参照してください。
> - チャット - コードに関するヘルプを Copilot に尋ねます。 詳細については、「IDE での GitHub Copilot チャットの使用」を参照してください。
> - pull request の概要 (Copilot Enterprise のみ) - Copilot に pull request の変更について説明させます。 詳しくは、"Copilot pull request の概要について." を参照してください。
> - ナレッジ ベース (Copilot Enterprise のみ) - Copilot とのチャットのコンテキストとして使用するドキュメントのコレクションを作成および管理します。 詳しくは、"Copilot ナレッジ ベースの管理." を参照してください。

- コード補完
- チャット
- PRの変更について説明させる
- ナレッジベース

### GitHub Copilot へのアクセス権を取得する
下記の有料プランにより、GitHub Copilotにアクセスが可能
> - Copilot Individual - 個人の用途または独立した用途のために、IDE またはコマンド ラインで GitHub Copilot にアクセスできます。 詳しくは、「GitHub Copilot Individuals について」を参照してください。
> Copilot Business - GitHub Copilot に Organization のメンバーとしてアクセスします。 Organization のオーナーは、個々のメンバーまたはチームのアクセスを管理できます。 詳しくは、「GitHub Copilot Business について」を参照してください。
> Copilot Enterprise - IDE またはコマンド ラインで Copilot にアクセスするだけでなく、GitHub.com で Copilot を使用します。 メソッドによって実行できるタスクを次に示します。
Copilot とチャットして、コードに関するヘルプを入手したり、技術関連の一般的な質問をしたりします。
チャットのコンテキストとして使用するカスタマイズされたナレッジ ベースを作成します。
pull request の概要を自動的に生成します。

- Copilot Individual
    - 個人の用途
    - IDE、CLIでアクセス
- Copilot Business
    - Organizationのメンバーとしてアクセス
- Copilot Enterpise
    - GitHub.comでCopilotを使用
    - Copilotとチャットにより、コードに関するヘルプを入手

## GitHub Copilot Individuals について
### GitHub Copilot について
:::note info
2024/5/18 時点の情報です。最新は[こちら](https://docs.github.com/ja/copilot/copilot-individual/about-github-copilot-individual#copilot-individualcopilot-businesscopilot-enterprise-%E3%81%AE%E9%81%95%E3%81%84%E3%82%92%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B)をご確認ください。
:::
違いは下記の通り

| |Individual|Business|Enterpise|
|:--|:--|:--|:--|
|価格|10 USD / 月 <BR> 100 USD / 年 | 19 USD / 月 / ユーザ| 39 USD / 月 / ユーザ |
|アカウントの種類 | 個人用アカウント| Organization<BR>Enterprise|GitHub Enterprise CloudのEnterpriseアカウント|
|Copilot Chat|◯|◯|◯|
|GitHub Copilit in the CLI|◯|◯|◯|
|コードスニペット コレクション|◯<BR>	 (無効になっている場合を除く)|✗|✗|
|パブリックコードに一致する候補をブロックする|◯|◯|◯|
|エディターに直接接続する|◯|◯|◯|
|複数行の関数を候補を提案する|◯|◯|◯|
|Organization全体に渡るポリシー管理|✗|◯|◯|
|指定したファイルを除外する|✗|◯|◯|
|監査ログ|✗|◯|◯|
|Copilot Chat in GitHub.com | ✗ |✗ |◯|
|Copilot pull request summaries|✗ |✗ |◯|

# 実践
## 個人アカウントのGitHub Copilotのサインアップ
1. GitHubにサインインします
1. 右上のプロフィールから、「Your Copilot」をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/cac2b1e2-f2a4-b3a6-166a-b798552557a6.png)

1. Pay frequency after trialでどちらか選択し、「Get access to GitHub Copilot」をクリックします
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/962b4bb7-64af-2425-3655-d021f03f1c7a.png" width=500 />
1. 必要事項を入力し、「Save」をクリックします
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/aae0ca68-5e6f-325c-282d-9b26b3521b1b.png" width=500 />

1. 支払い情報（Paypal or Credit card）を入力し「Save payment information」をクリックします
1. Contact Informationを入力し、「Submit」をクリックします

## Visual Studio Code用のGitHub Copilot拡張機能をインストールする
1. [GitHub Copilot 拡張機能](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)をクリックします
1. 「Install」をクリックします
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/941e6c65-7df1-a089-5220-c3cc7d9cf61a.png" width=500 />

1. ポップアップが開きますので「Continue」をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/3d22056f-5c24-9de4-4d98-8a94c6f50714.png)

1. 「Visual Studio Code」を開きます
1. 「インストール」をクリックします
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/e6a431df-0b85-b56f-3f85-34d44ed6f700.png" width=400 />

1. 「Sign in to GitHub」をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/3657c484-9b7b-d075-3786-c42356f60e73.png)

1. 「Authorize Visual-Studio-Code」をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/51eddf3e-955e-2272-2c82-18f8a4e6604b.png)

1. 完了しました

### 最初の候補を得る
1. JavaScriptのファイル「test.js」を作成します
1. 下記のコードを入力します
    ```
    function calculateDaysBetweenDates(begin, end) {
    ```
1. 候補が表示されましたので、Tabで受け入れます
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/67065aee-d06a-1e8e-e856-38af36d53694.png)

1. できました
    ```
    function calculateDaysBetweenDates(begin, end) {
      return Math.round((end - begin) / (1000 * 60 * 60 * 24));
    }
    ```

### Copilot Chatを使う
1. 画面左のチャットマークをクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/73dadf47-2fd2-1ae3-53f4-d7439f68c9df.png)

1. 「/」を入力すると候補が表示されます
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/a80a658c-daee-f69d-696a-32366a9a1531.png)

1. `/fix`を打ってみます。コードに問題があると NaNの可能性があるため、事前にチェックすることが必要と言われています。また提案されました。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/4caa6f6c-f230-d489-68eb-67538579875c.png)

1. カーソルに挿入をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/70f2567c-0337-728c-486b-1bbe0d2798e3.png)

1. 下記のようなコードになりました
    ```
    function calculateDaysBetweenDates(begin, end) {
      return Math.round((end - begin) / (1000 * 60 * 60 * 24));
    }
    
    function calculateDaysBetweenDates(begin, end) {
      begin = begin instanceof Date ? begin : new Date(begin);
      end = end instanceof Date ? end : new Date(end);
    
      if (isNaN(begin.getTime()) || isNaN(end.getTime())) {
        throw new Error('Invalid date');
      }
    
      return Math.round((end - begin) / (1000 * 60 * 60 * 24));
    }
    ```

1. 日本語でも書けるようです
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/da2ad906-b8d0-9c54-50e2-3342ea26b2e6.png)


# 考察
今回は、GitHub Copilot（個人プラン）を導入しました。これからもっと使い倒していこうと思います。

# 参考
https://docs.github.com/ja/copilot/about-github-copilot