VSCode ではじめる GitHub Copilot 活用術

## はじめに

:::note info
2024/11/22

以下の記事で、最上位プランの GotHub Copilot Enterprise まで色々試してみました

https://qiita.com/RyoWakabayashi/items/1a88130bfc2554d25f1d
:::

GitHub Copilot は AI がペアプログラミングしてくれるサービスです

Copilot = 副操縦士なので、私たちがコードを書くとき、隣からそっと助けてくれるイメージです

ChatGPT のようなチャット形式とは異なり、特別指示を出さずとも、コードを書いていると自然に提案してくれます

例えば、以下の GIF では Python で `def generate_random_` まで書いた時点で、残りのコードを GitHub Copilot が提案してくれています

![random.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/7deda57a-8ac5-6d9a-a505-8b68b35bdb9d.gif)

そのままタブキーを押せば提案されたコードを採用できます

最初から 100 点のコードにはなかなかなりませんが、 70 点のコードでも叩き台ができるのは非常にありがたいです

本記事では VSCode で GitHub Copilot を使う方法と、その活用術について紹介します

## GitHub Copilot が使えるようになるまで

### GitHub アカウントの作成

前提として、 GitHub アカウントが必要です

GitHub にアクセスし、 Sign up からアカウントを作成してください

https://github.com/

![スクリーンショット 2023-07-20 142026.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/befa68d9-172b-3a0c-d264-0af5a5d4925b.png)

やたらかっこいい画面でサインアップが進みます

英語ばかりですが頑張りましょう

![スクリーンショット 2023-07-20 142042.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/5eda1da1-adc5-6b44-a6a6-31bae5621a8b.png)

また、セキュリティのため、基本的に2要素認証を使いましょう

https://docs.github.com/ja/authentication/securing-your-account-with-two-factor-authentication-2fa/configuring-two-factor-authentication

### 個人契約

個人で使う場合、GitHub Copilot for Individuals を契約します

月払いなら月額 10 ドル 、年払いなら年額 100 ドルで使用できます

支払いにはクレジットカードを使います

https://docs.github.com/ja/copilot/overview-of-github-copilot/about-github-copilot-for-individuals

### 企業契約

企業で使う場合、 Organization で Copilot for Business を契約します

1ユーザー1ヶ月あたり 19 ドルで使用できます

支払いにはクレジットカードを使うので、法人用のクレジットカードを登録してください

https://docs.github.com/ja/copilot/overview-of-github-copilot/about-github-copilot-for-business

こちらの場合、Organization に所属するユーザーに対して共通のポリシーを強制できるため、利用を一部制御することが可能です

現状、パブリックコードとマッチする提案をブロックするかどうか、が選択できます

これを Blocked にしておくと、誰かの公開コードを無意識に流用してライセンス違反になってしまうリスクが抑制できます

![スクリーンショット 2023-07-20 114501.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/2df15791-0e50-18d2-6e94-633f1d0c52ae.png)

Organization の管理者は利用ユーザーを以下のように選択できます

- 誰にも使わせない（解約）
- 所属する全員
- 選択したユーザー

使用するユーザーの分だけ課金されるので、管理者は利用希望者を社内から募ったり、申請のワークフローを整えたりしましょう

管理者から利用者として登録されたユーザーには、以下のようなメールが届きます

![スクリーンショット 2023-07-20 115044.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/ad1e999a-e153-4f45-57d0-5b04a38c8a30.png)

ユーザー側は特に何もせずとも利用可能な状態になります

自分の Copilot 設定画面にいくと、Copilotへのアクセス許可が得られたこと、ただし自分では設定変更できない旨が表示されます

https://github.com/settings/copilot

![スクリーンショット 2023-07-20 115257.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/52fd6650-4238-c6c3-5b3c-7328efbef5a1.png)

## VSCode への GitHub Copilot 導入

GitHub Copilot は様々なIDEに対応しています

- JetBrains IDEs (Beta)
- Vim/Neovim
- Visual Studio
- Visual Studio Code

https://docs.github.com/en/copilot/getting-started-with-github-copilot

本記事では VSCode での利用を前提に進めていきます

### VSCode のインストール

まず、VSCode をまだインストールしていない場合、 VSCode をインストールしてください

https://code.visualstudio.com/download

基本的に各OSの大きいボタン（下画像の赤枠）をクリックして最新のインストーラーをダウンロードし、実行すればインストールできます

![スクリーンショット 2023-07-20 115955.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/f845dfc7-61cb-3024-d187-9cc9289a3891.png)

### VSCode のプロキシ設定

ネットワークがプロキシサーバー経由でないとインターネットに接続できない場合、プロキシの設定をする必要があります

上部メニューから File |> Preference |> Settings をクリックしてください

![スクリーンショット 2023-07-20 134604.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/9af5e7ed-2c94-71eb-b8a8-d986002acbc3.png)

開いた Settings 画面で左メニュー Application |> Proxy を開きます

表示される Proxy (Applies to all profiles) にプロキシサーバーの URL を入力します

![スクリーンショット 2023-07-20 134758.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/490e83ba-af8c-1de1-aafa-ecc5fcc04f7d.png)

### Extension 追加

GitHub Copilot 用の Extension （拡張機能）を VSCode に追加します

VSCode を開き、左メニューの四角形が4つあるアイコン（下画像の赤枠）をクリックし、上部に出てくる検索用テキスト入力に「copilot」と入力します

![スクリーンショット 2023-07-20 133827.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/dd72b4a0-670e-5806-a793-c85ebed6df69.png)

一番上に出てくる GitHub Copilot の右端 "Install" ボタンをクリックしてください

### アカウント設定

VSCode の右下に GitHub Copilot のアイコン（下画像赤枠）が表示されていれば GitHub Copilot が使えるようになっています

![スクリーンショット 2023-07-20 14.13.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/3e1caa27-96dd-07e6-0470-257479206926.png)

GitHub Copilot のアイコンの代わりにクルクル回っているアイコンが出ていれば、 GitHub へのサインイン待ち状態です

もしメッセージが閉じてしまったら、右下のベルをクリックするとメッセージが開きます

![スクリーンショット 2023-07-20 14.10.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/57ec8e48-dc5d-ffa1-862e-2bad3b83f98b.png)

"Sign in to GitHub" をクリックし、ブラウザ経由で GitHub にサインインします

何度か確認メッセージが出ますが、許可して進んでください

もし GitHub Copilot のアイコン に斜線が入っている場合、何らかの要因で認証に失敗しています

![スクリーンショット 2023-07-20 141344.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/f797ec96-f8b3-7966-1fbd-d0be6cad1fe6.png)

VSCode の左下、人物アイコン |> 自分の GitHub アカウント名 (GitHub) |> Sign Out をクリックし、一旦サインアウトして VSCode を再起動してください

![スクリーンショット 2023-07-20 144241.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/fe647e6e-f0f4-31d0-121b-00c62917e321.png)

その後、改めて GitHub にサインインし直してみましょう

## GitHub Copilot 活用術

Python を例に GitHub Copilot の使い方を紹介します

Python がインストールされていない場合、インストールしてください

また、 OpenCV を使うので以下のコマンドでインストールしておきます

```bash
pip install opencv-python
```

### コーディング

#### コメントからのコード生成

適当なフォルダを作成し、 VSCode で開きます

![スクリーンショット 2023-07-20 145855.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/753259dc-c853-cd95-54ec-b2a47391c260.png)

VSCode の左メニューでファイルアイコン（下画像赤枠）を開き、上メニューから File |> New File で新しいファイルを作成します

![スクリーンショット 2023-07-20 150316.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/dab7485a-d6c2-170b-3769-690eaf85a196.png)

"blur.py" というファイル名にして、当該ファイルをクリックして開きます

開いたファイルに以下のコメントを貼り付けます

```python
# OpenCV でカメラ映像を取得し、ぼかして表示する
# 起動時の引数　--radius でぼかしの強さを調整可能
# Qキーを入力すると終了する
```

あとは Enter キーで改行しつつ、 GitHub Copilot がコードを提案してきたらタブキーで採用します

![blur.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/d3f1b735-244d-5a58-80bf-bc449995f916.gif)

上 GIF 動画のように、どんどんコードを生成していき、コメント以外は何も入力せず完成してしまいました

完成したコードを実行してみましょう

VSCode の上メニューから Terminal |> New Terminal で新しいターミナルを開きます

![スクリーンショット 2023-07-20 151444.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/3d9adcf3-f3a9-7099-3a85-0ef5e9f00640.png)

ターミナルで以下のコマンドを実行します

```bash
python blur.py --radius 15
```

![blur_window.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/99c75c1c-894e-d2c2-cebc-4ce4a6b45e6b.gif)

確かにカメラ映像がぼかして表示され、 Q キーを押すと終了しました

自分で見る場合は鏡になって欲しいので、左右を反転させてみましょう

![flip.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/06251ff2-4ee6-3cd2-eab1-b70b9a545dca.gif)

左右反転のコードを正しく生成できています

何なら「左右」の時点で「左右反転」を提案しています

#### 補完

関数名を途中まで書いた段階で、残りを GitHub Copilot が生成してくれます

![rectangle.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/04f4fd10-f440-b144-6b2f-b391a561e7d1.gif)

しかも、先に生成した関数を次の関数で呼び出しています

今書こうとしているものだけでなく、前後関係をしっかり把握していることがわかります

#### コメント生成

実装からコメントを生成することも得意です

![comment.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6e5687ac-8afe-fdcc-2a36-60b94382d18a.gif)

最初はコードの中に日本語が含まれていなかったため英語のコメントを生成しましたが、一部日本語を入力した時点で日本語に切り替えています

では、あえてコメントの空行を詰めてから次の関数にもコメントを付けさせてみましょう

![comment_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/0abe282b-4b47-b0ea-7c2f-bbd804b7f334.gif)

もう改行した時点で日本語のコメントが生成され、しかも上と同じ形式をしっかり守っています

つまり、同じファイル内の既存コードと調和するように生成できるのです

#### テスト生成

テストのため、例外系の処理を追加しておきます

（この例外処理や例外コメントもほとんど生成したものです）

```python
def get_rectangle_area(width, height):
    """四角形の面積を求める
    Args:
        width (float): 幅
        height (float): 高さ
    Returns:
        float: 面積
    Raises:
        ValueError: width, heightが負の値の場合
    """
    if width < 0 or height < 0:
        raise ValueError('width and height must be positive values.')
    return width * height

def get_bbox_area(bbox):
    """バウンディングボックスの面積を求める
    Args:
        bbox (list): [xmin, ymin, xmax, ymax]
    Returns:
        float: 面積
    Raises:
        ValueError: bboxの長さが4でない場合
    """
    if len(bbox) != 4:
        raise ValueError('bbox must be a list of length 4.')
    return get_rectangle_area(bbox[2] - bbox[0], bbox[3] - bbox[1])
```

この状態で、下に以下のコメントを書き加えます

```python
# 上記関数のテストコード
```

そして Enter とタブを押していくとテストコードが生成されます

![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/8c4d1c12-7187-18c4-b140-3215b8859a8b.gif)

最終的には以下のようになって、正しく単体テストが実行できます

正常系で整数のケース、小数のケース、0のケースなど、異常系で引数のいずれかが負のケースをちゃんと作っています

`get_bbox_area` のテストケースは 0 番目と 1番目が常に 0 なのg微妙ですが、少し手を入れれば更に補完してくれます

```python
# 上記関数のテストコード
import unittest

class TestGetRectangleArea(unittest.TestCase):
    """get_rectangle_area関数のテストクラス
    """
    def test_get_rectangle_area(self):
        """get_rectangle_area関数のテスト関数
        """
        self.assertEqual(get_rectangle_area(2, 3), 6)
        self.assertEqual(get_rectangle_area(3, 2), 6)
        self.assertEqual(get_rectangle_area(0.5, 0.5), 0.25)
        self.assertEqual(get_rectangle_area(0, 0), 0)
        self.assertEqual(get_rectangle_area(100, 100), 10000)
        self.assertEqual(get_rectangle_area(0.123, 0.456), 0.056088)

    def test_get_rectangle_area_error(self):
        """get_rectangle_area関数のエラーテスト関数
        """
        with self.assertRaises(ValueError):
            get_rectangle_area(-1, 3)
        with self.assertRaises(ValueError):
            get_rectangle_area(1, -3)
        with self.assertRaises(ValueError):
            get_rectangle_area(-1, -3)

class TestGetBboxArea(unittest.TestCase):
    """get_bbox_area関数のテストクラス
    """
    def test_get_bbox_area(self):
        """get_bbox_area関数のテスト関数
        """
        self.assertEqual(get_bbox_area([0, 0, 2, 3]), 6)
        self.assertEqual(get_bbox_area([0, 0, 3, 2]), 6)
        self.assertEqual(get_bbox_area([0, 0, 0.5, 0.5]), 0.25)
        self.assertEqual(get_bbox_area([0, 0, 0, 0]), 0)
        self.assertEqual(get_bbox_area([0, 0, 100, 100]), 10000)
        self.assertEqual(get_bbox_area([0, 0, 0.123, 0.456]), 0.056088)

    def test_get_bbox_area_error(self):
        """get_bbox_area関数のエラーテスト関数
        """
        with self.assertRaises(ValueError):
            get_bbox_area([0, 0, 2])
        with self.assertRaises(ValueError):
            get_bbox_area([0, 0, 2, 3, 4])
        with self.assertRaises(ValueError):
            get_bbox_area([0, 0, -2, 3])
        with self.assertRaises(ValueError):
            get_bbox_area([0, 0, 2, -3])
        with self.assertRaises(ValueError):
            get_bbox_area([0, 0, -2, -3])

if __name__ == '__main__':
    unittest.main()
```

### ドキュメント

GitHub Copilot はコーディング以外もこなします

#### 文書生成

簡単な説明文くらいなら生成してくれます

```md
# 説明

## アジャイル開発とは
```

![document.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/29533a1f-d068-f4b8-4e69-2f2937eb5dae.gif)

#### 翻訳

英文を書いておいて和訳します

```md
原文

To be, or not to be: that is the question
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles,
And by opposing end them?

和訳
```

![humlet.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/2b7d0b56-1417-71c5-a6a5-6071baa397e6.gif)

#### 数学

GitHub Copilot は数学もよく知っているし、 Tex も得意です

```md
arctan z のテイラー展開
```

![tex.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/aa03f7ba-bf7d-c731-b707-09cccbad8c54.gif)

生成された Tex はこちら

```md
$$
\begin{aligned}
\arctan z &= \sum_{n=0}^\infty \frac{(-1)^n}{2n+1} z^{2n+1} \\
&= z - \frac{z^3}{3} + \frac{z^5}{5} - \frac{z^7}{7} + \cdots
\end{aligned}
$$
```

Tex の表示結果はこうなります

![スクリーンショット 2023-07-20 17.25.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6311b1a2-64a1-05bb-2eb3-b7d25051212d.png)

確かに正しい数式です

ややこしい数式を Tex で書くのは疲れるので助かります

#### 図

:::note info
@SF-28 さんから、図も作れたとのことでサンプルを貰いました
:::

[Mermaid](https://mermaid.js.org/) を使った図も生成してくれます

書き方を忘れて検索しがちなので、基本構文を出してくれるだけでも助かります

```md
## フローチャート flowchart

```mermaid
```

![mermaid.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/2973c867-0178-0445-bd3a-39752d9d2637.gif)

出来上がったものがこちら

```md
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

![スクリーンショット 2023-07-21 9.18.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/901c1095-7af2-959c-bc58-1a1d572c932d.png)

その他、以下の図は生成できました

- シーケンス図 sequenceDiagram

    ```mermaid
    sequenceDiagram
        participant A
        participant B
        A->>B: こんにちは
        B->>A: こんにちは
    ```

- クラス図 classDiagram
    
    ```mermaid
    classDiagram
        class A
        class B
        A <|-- B
        A : name
        B : age
    ```

- 状態遷移図 stateDiagram-v2
    
    ```mermaid
    stateDiagram-v2
        [*] --> 未処理
        未処理 --> 処理中
        処理中 --> [*]
    ```

- ジャーニーマップ journey
    
    ```mermaid
    journey
        title My working day
        section Go to work
            Make tea: 5: Me
            Go upstairs: 3: Me
            Do work: 1: Me, Cat
        section Go home
            Go downstairs: 5: Me
            Sit down: 3: Me
    ```

- 円グラフ pie
    
    ```mermaid
    pie
        title Pets adopted by volunteers
        "Dogs" : 386
        "Cats" : 85
        "Rats" : 15
    ```

#### アスキーアート

:::note info
こちらも @SF-28 さんからサンプルを貰いました
:::

癒されたいとき、場を和ませたいときにアスキーアートを生成してみるのもいいでしょう

![aa.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/b0d1e75e-9e19-b3db-6b67-9b70fc9872a9.gif)

## 注意点

GitHub Copilot は優秀ですが、あくまでも副操縦士です

コードの責任はプログラマーにあります

生成したコードは必ず検証して必要に応じて修正し、可読性が高くなるように必ずリファクタリングし、品質を上げる義務があります

## まとめ

GitHub Copilot はコードの補完、自動生成だけでなく、ドキュメント作成まで補助してくれます

他にもまだまだ活用法はあります

正しく使って生産性を向上させましょう