今日から使えるGitHub Copilotのスターターガイド

## これは何?

[GitHub Copilot](https://docs.github.com/ja/copilot/using-github-copilot/getting-code-suggestions-in-your-ide-with-github-copilot)の良い使い方を調べてまとめたものになります。

良い使い方を探しているのでコメント等で教えていただけると嬉しいです。

### 想定読者

- GitHub Copilotの導入を迷っており，どんな機能があるのか知りたい人
- とりあえず導入したがなんとなく使っている人

### 前提条件

- GitHub Copilotへの登録が済んでいること [公式のクイックスタート](https://www.google.com/search?client=ubuntu&channel=fs&q=github+copilot+%E7%94%B3%E8%BE%BC%E3%81%BF)を参照

- 会社等で使う場合にはソースコードを学習させない設定が必要になると思うので参考までに↓


https://qiita.com/sigma_devsecops/items/20a8ce3d53b27262199f

---

## GitHub copilotの主な使い方

大まかにCopilotは以下の3つの方法で使用できます。

1. Copilotによるコード補完機能
2. [Copilot Chat](https://docs.github.com/ja/copilot/using-github-copilot/asking-github-copilot-questions-in-your-ide)によるチャット機能
3. [GitHub Copilot in the command line](https://docs.github.com/ja/copilot/using-github-copilot/using-github-copilot-in-the-command-line)によるコマンドラインの提案，説明機能

それぞれの使い方について以下に書いていきます。

---

## ①Copilotによるコード補完機能

### 環境構築

使用するエディタによって設定方法は違いますが今回はVS Codeでの設定方法を書いておきます。

1. [GitHub Copilot Marketplace](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)からVS CodeのExtensionsをインストール。
2. Copilotが使用できるようになっていることを確認する。VS CodeのステータスバーにCopilotのアイコンが出ていればOK
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/07ae7184-832f-5e62-684e-68928c36ca54.png)

### コード補完の使い方

- 普通にコードを書いてサジェストをもらう
- コメントを書くことでコードのサジェストをもらう

の2通りでコード補完が使えます。
どちらの方法でも特にショートカットキー等を押さなくても勝手にサジェストを出してくれます。

### 覚えるべきショートカットキー

[公式のショートカットキー](https://docs.github.com/ja/copilot/managing-copilot/configure-personal-settings/configuring-github-copilot-in-your-environment#github-copilot-%E3%81%AE%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89-%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%81%AE%E4%BD%BF%E7%94%A8%E3%81%BE%E3%81%9F%E3%81%AF%E5%86%8D%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89)を参照されたし。

個人的にはとりあえず以下を覚えておけば良いと思います。

|ショートカットキー|意味                                |
|------------------|------------------------------------|
|Tab               |サジェストを受け入れる              |
|Esc               |明示的にサジェストを拒否する        |
|Alt ]             |次の候補を表示                      |
|Alt [             |前の候補を表示                      |
|Ctrl Enter        |サジェストの一覧を新規タブで表示する|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/87ba7e45-68f3-721a-2c29-13c0774e17c8.png)
↑サジェストの一覧表示のイメージ

`Alt [`と`Alt ]`が叩きにくいのでショートカットキー変えてもいいかなと思いつつ，良いショートカットが思いついていないのでコメント等で教えていただけるとうれしいです。

### サジェストの抑止

サジェストのオンオフは拡張子単位で指定ができます。
以下はmarkdownでサジェストをオフにする例です。

```settings.json
  "github.copilot.enable": {
    "markdown": false
  }
```

---

## ②Copilot Chatによるチャット機能

### 環境構築

こちらもVS Codeの設定方法を書いておきます。

[Github Copilot Chat Marketplace](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat)をVS CodeのExtensionsに追加します。

Extensionsの一覧から以下のアイコンをクリックすることでCopilot Chatを使用できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/3caef074-fd5e-582e-7fe0-e9279c507b59.png)

### テクニック1: Copilot Chatを大きなWindowでつかう

通常のChat欄↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/51cd26aa-1842-62a8-b8bb-1354236280aa.png)



拡大したい時にはチャット欄の右上から`Open Chat in Editor`や`Open Chat in New Windwos`をつかうと見やすいです。
![Screenshot from 2024-09-16 16-03-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/49838542-3278-d5f5-5700-b2f5d3528e14.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/22024b96-1410-c42c-dfe7-a2c526048214.png)

### テクニック2: Inline Chatを使ったコード生成

Inline Chatを使うことでソースコード上でプロンプトを入力してソースコードを作成することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/6864ec73-f5c7-d8cd-8ab2-a441eca90727.png)


自分はCursorと同じ`Ctrl k`に割り当て変更していますが，Cussorを使う方は別のショートカットキーに割り当てたほうが良いかもしれません。

```keybidings.json
    {
        "key": "ctrl+k",
        "command": "inlineChat.start",
        "when": "inlineChatHasProvider && !editorReadonly"
    }
```

### テクニック3: Copilot Chatを音声入力で使用する

[VS Code Speach](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-speech)を追加でインストールが必要です。

VS Code Speachの設定で音声入力を有効にすると`Hey Code!`のというとCopilot chatを起動できるようになります。

デフォルトはoffですが，指定できるのは以下
- off→音声認識を使用しない。
- ChatInView→サイドバーを開いていCopilot chatに音声入力
- quickChat→開いているエディタの上部に音声入力
- inlineChat→inline chatに音声入力
- chatInContext→ほぼinlineChatだが場所がちょっと違う

自分は一旦inline chatを使っています。

```settings.json
  "accessibility.voice.keywordActivation": "inlineChat",
```
音声入力に使える言語には日本語もサポートされています。

```settings.json
  "accessibility.voice.speechLanguage": "ja-JP",
```

### テクニック4: プロンプトキーワードを使用する

詳しくは公式の[プロンプトキーワドを使用する](https://docs.github.com/ja/copilot/using-github-copilot/asking-github-copilot-questions-in-your-ide#using-keywords-in-your-prompt)を参照してください。

以下に概略だけ記載しておきます。

#### 問い合わせ先を@で切り替える
[Chat Participants](https://code.visualstudio.com/docs/copilot/copilot-chat#_chat-participants)

- `@workspace`: ワークスペース内のコードに関する質問ができる。デフォルトだと開いているファイルに対する質問に対する解答になるが@workspaceを使うとワークスペース全体に対する解答が得られる。e.g. `このリポジトリはなにをするためのものですか?`
- `@vscode`: VS Codeに対する質問
- `@terminal`: terminalで使用するコマンドを生成できる e.g. `@terminal このpythonプログラムを実行するためのコマンドをつくって`

#### /コマンド
[slash commands一覧](https://code.visualstudio.com/docs/copilot/copilot-chat#_slash-commands)

`/help`: get help about using GitHub Copilot
`/clear`: 新しいチャットにする
`@workspace /tests or /tests`: 指定したファイルの単体テストの作成。@
`/explane`: 指定したファイルの説明。@workspaceと@terminalが指定可能
`vscode /search` (or /search): Searchビューのクエリパラメータを生成する。

`@workspace /fix (or /fix)`: ソースコードの修正を提案
`@workspace /new (or /new)`: 新しいワークスペースまたはファイルの雛形を生成する
`@workspace /newNotebook (or /newNotebook)`: 新しいjupyter notebook
の作成
`@vscode /runCommand (or /runCommand)`: VS Codeコマンドを検索または実行する

#### Chat contextを使う

[Chat context一覧](https://code.visualstudio.com/docs/copilot/copilot-chat#_chat-context)

- `#editor`: エディタでアクティブになっているファイルの内容をプロンプトに含めることができる。プロンプトに含まれる範囲は以下のようにして決まる。
    - エディタで選択している範囲がある際にはその範囲(これはvimのExtensionsを入れている場合にはvisual modeで選択している範囲も同じように扱われる)
    - 選択されている範囲が無い時は画面に表示されている範囲

    :::note info
    `#editor`を使わなくても同じ動作になりそう。明示的に指定したい時以外は使う意味はないかも。

    [2024年1月のリリース](https://code.visualstudio.com/updates/v1_86#_default-context-in-chat)で一時的にデフォルトでの開いているエディタのプロンプトへの投入のデフォルト値は一時的にオフになったがこれは戻されたらしい。[Default context in chat references #editor ](https://github.com/microsoft/vscode-copilot-release/issues/1120)

- `#selection`: `#editor`と同じ動作と思われるため，#editorと#selectionは統合されていて，どっちを使っても良さそう。TODO: 裏取りする。
- `#file`: 特定のファイルの情報をプロンプトに含めることができる。e.g. `@workspace #file:pyproject.toml このプロジェクトのversionを教えて`

    :::note info
    `@workspace`との併用が必要
- `#terminalLastCommand`: 最後にVS Codeのterminalで実行したコマンドについてコマンドの実行結果を含めてプロンプトに入れられる。
- `#terminalSelection`: VS Codeのterminalで選択している範囲をプロンプトに含めることができる。
- `#vscodeAPI`: VS Code拡張機能の開発に関連した質問をする際に使う。若干時間はかかる。

---

## ③[GitHub Copilot in the command line](https://docs.github.com/ja/copilot/using-github-copilot/using-github-copilot-in-the-command-line)によるコマンドラインの提案，説明機能

主にterminalから以下の2つの機能が使用できます。
- コマンドの説明
- コマンドのsuggest

### 環境構築

[公式インストール方法](https://docs.github.com/ja/copilot/managing-copilot/configure-personal-settings/installing-github-copilot-in-the-cli)

### コマンドの説明

試しにlsの使い方を聞いてみます。

```shell
gh copilot explain "ls"

Welcome to GitHub Copilot in the CLI!
version 1.0.4 (2024-06-13)

I'm powered by AI, so surprises and mistakes are possible. Make sure to verify any generated code or suggestions, and share feedback so that we can learn and improve. For more information, see https://gh.io/gh-copilot-transparency

Explanation:                                                            
                                                                        
  • ls is used to list files in the current directory.                  
    • When used without any flags or arguments, it simply lists the     
    names of the files and directories in the current directory.        
    • The output is typically displayed in a single column.             
    • It does not show hidden files or directories by default.   
```
lsについての説明がでてきます。

### コマンドのサジェスト

試しに`cmatrix`というネタコマンドをインストールする方法を聞いてみます。

```shell
 gh copilot suggest "install cmatrix"

Welcome to GitHub Copilot in the CLI!
version 1.0.5 (2024-09-12)

I'm powered by AI, so surprises and mistakes are possible. Make sure to verify any generated code or suggestions, and share feedback so that we can learn and improve. For more information, see https://gh.io/gh-copilot-transparency

? What kind of command can I help you with?
> generic shell command

Suggestion:                                                             
                                                                        
  sudo apt-get install cmatrix                                          

? Select an option
> Execute command

Without using the `ghcs` alias or `-s,--shell-out` flag, the suggested command will be copied to your clipboard for you to paste and execute.

Command copied to clipboard!
```
このようにしてサジェストされたコマンドはクリップボードに保存されています。

```shell
# 提案されたコマンド
sudo apt-get install cmatrix
```
自分の過去ログを漁ったり，ネット検索するよりすばやく実行したいコマンドが見つけられるかもしれません。

---

## その他の便利機能

### GitHubのコミットメッセージを作成してもらう

1. VS Code のターミナルを開いて`git add`する。
2. キラキラマークがでてくるのでクリックして**Generate commit message**を選択
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/5f76e803-373a-22ef-cd20-12860d8b5049.png) 
3. 自動でててきたコミットコマンドを実行

    ```shell
    git commit -m "chore: Add dnsutils package to dev container installation script and update VS Code settings"
    ```

---

## まとめ

GitHub Copilotには大きく分けて以下の3種類の使用方法がある。
    1. Copilotによるコード補完機能
    2. [Copilot Chat](https://docs.github.com/ja/copilot/using-github-copilot/asking-github-copilot-questions-in-your-ide)によるチャット機能
    3. [GitHub Copilot in the command line](https://docs.github.com/ja/copilot/using-github-copilot/using-github-copilot-in-the-command-line)によるコマンドラインの提案，説明機能

特にCopilot Chatには
    - 音声入力
    - プロンプトキーワード
    - inline chat
を活用することができる。

---

## 参考文献
引用しなかったが参考にさせていただいた記事です。

https://dev.classmethod.jp/articles/github-copilot-chat-context-variables/

https://zenn.dev/umi_mori/books/ai-native-programming 

---

他に良い使い方などありましたらコメントでお教えください！
最後までお読みいただきありがとうございました！