GitHub Copilot導入をまだ悩んでいるそこのあなたへ

# はじめに
初めまして、K.S.ロジャースの妹尾と申します🙋‍♂️
K.S.ロジャースでは日常的にGitHub Copilot (以降 「Copilot」 と表記) を使っての開発を行っていますが、ものすごく便利で現代の開発者には必須のツールだと思いますので、今更感はありますが記事にしてみました！

> お金かかるし、あんまり気が進まないな〜

と思っている ***そこのあなた！！！*** に向けて記事を書きましたので是非読んでみてください😁

ChatGPTが世間的には流行っているのですが、個人的には開発者であればChatGPTよりCopilotへの課金を優先することを***オススメ***します。

開発者がCopilotを最大限に活用し、効率的なコーディング体験を享受するための手助けとなれば幸いです。

:::note warn
こちらの記事はVisual Studio CodeにてCopilotを利用する場合を想定しています。
:::

:::note warn
2024/6/1時点での情報ですので最新情報は[公式ドキュメント](https://docs.github.com/ja/copilot)をご覧ください。
:::


## GitHub Copilotとは
開発者であれば言わずも知れた存在になりつつありますが、一応おさらいしておきましょう。

Copilotは、GitHubとOpenAIが共同開発した革新的なツールです。これは、開発者がコーディング作業をよりスムーズに、効率的に行うことを支援するために設計されています。Copilotは、コードの補完、提案、そして生成を行うAIアシスタントです。コーディング中に、Copilotはコンテキストに基づいて適切なコードを提案し、開発者が手動でコードを書く必要性を減らします。

https://docs.github.com/ja/copilot/about-github-copilot

## なぜGitHub Copilotを利用するのか
### プログラミングの生産性を向上
開発者は手動でコードを書く時間を減らし、代わりにCopilotが生成したコードを利用することで、より迅速にプロジェクトを進めることができます。
また、Copilotは学習能力を持っており、コーディングスタイルやプロジェクトのニーズに合わせて提案を改善します。

### 未経験技術や言語のキャッチアップを効率化
新しい言語やフレームワークを学ぶ際には、初めての書き方や構文に戸惑うことがありますが、Copilotはそのような場面で手助けをしてくれます。
これにより、新しい技術への取り組みがスムーズになり、学習の過程が加速されます。

# 基本情報
## 機能一覧
Copilotには様々な機能がありますが、その中でも代表的な機能を紹介します。
### Copilot
Copilotのコアとなる機能で、コーディング中にCopilotからコードが提案され、開発者が判断して提案されたコードを採用したり、別の案を提示してもらったりすることでコーディングを効率化します。

編集中ファイルや関連ファイルなどを参照して文脈を理解した上で提案してくれるため、より多くのコードが書かれている状態の方が提案の精度が高くなる傾向にあります。

### Copilot Chat
Chat GPTのコード特化版みたいなものでコードに関することを質問したり依頼することができます。
つい最近、GitHub Copilot EnterpriseがGAされたことで、GitHub.com上でCopilot Chatを利用できるようになりました。
それによって、GitHub上のドキュメントやファイルなどをコンテキストとして読み込ませることが可能となり、よりアプリケーションのことを理解した上で精度の高い提案を行えるようになりました。

### Copilot pull request summaries
CopilotがPull requestの変更内容について説明してくれます。それを元に開発者がブラッシュアップするだけで良いのでPull requestの作成効率向上や品質向上が見込めます。 

:::note warn
Copilot pull request summariesはCopilot Enterpriseプランのみで利用できる機能なので詳細については割愛します
:::

## GitHub Copilotプラン
公式ドキュメントから最新情報をご覧ください。

1. [プラン一覧](https://docs.github.com/ja/copilot/about-github-copilot#github-copilot-%E3%81%B8%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E6%A8%A9%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B)
1. [プランごとの価格](https://docs.github.com/ja/billing/managing-billing-for-github-copilot/about-billing-for-github-copilot#pricing-for-github-copilot-enterprise)
1. [各プランの機能比較](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)

## インストール方法
公式ドキュメントに丁寧に記載がありますのでこちらを参照しましょう。 

https://docs.github.com/ja/copilot/using-github-copilot/getting-started-with-github-copilot#visual-studio-code-%E3%81%A7-github-copilot-%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B

## 対応している統合開発環境（IDE）

1. Visual Studio Code
1. Visual Studio
1. Vim/Neovim
1. JetBrains IDEs
1. Azure Data Studio

:::note warn
Vim/NeovimとAzure Data Studioについて、Copilot Chatは利用できません。
:::

## Copilotが得意な言語
一応Copilotにも得意・不得意があるようで以下の言語に関する候補の精度が高いようです。

1. Python
1. JavaScript
1. TypeScript
1. Ruby
1. Go
1. C#
1. C++

ここに記載がない言語についても補完してくれますので、どんな言語を利用されている方も是非一度使ってみていただければと思います。

# Copilot(コード補完機能)について

## 基本操作一覧
操作一覧は次の通りです。

| コマンド操作 | macOS | Windows |
| -- | -- | -- |
| 提案を受け入れる| `Tab` | `Tab` |
| 提案を拒否する| `Esc` | `Esc` |
| 次の提案を表示| `Option(⌥) + ]` | `Alt + ]` |
| 前の提案を表示| `Option(⌥) + [` | `Alt + [` |
| 次の単語を受け入れる| `Command(⌘) + →` | `Ctrl + →` |
| コード補完の提案を複数提示してもらう | `Ctrl + Enter` | `Ctrl + Enter` |

### 他の提案を提示してもらう
提示された案が微妙な場合は、別の提案を提示してもらうことが可能です。

* `Option(⌥) + ]` (Windows: `Alt + ]`): 次の提案を表示
* `Option(⌥) + [` (Windows: `Alt + [`): 前の提案を表示

![qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318277/03ccf682-1362-b47f-fb32-fb46d074b3ad.gif)

### コード補完の提案を複数提示してもらう
通常、コード補完の提案は同時に１つのみ表示されますが、複数候補を表示することが可能です。

* `Ctrl + Enter` (Windows: `Ctrl + Enter`)
 
![qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318277/d3bc41f1-7549-f240-dab8-1863a0ebf6e6.gif)

### 次の単語を受け入れる
提案を受け入れる際に部分的な受け入れをしたい場合もあると思います。
その場合には単語単位で提案を受け入れを行うことが可能です。

* `Command(⌘) + →` (Windows: `Ctrl + →`)

![qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318277/0517f603-0f15-c4d2-909b-522cc7451371.gif)

## コード補完のトリガー
基本的には入力や `Enter` をトリガーにコード補完の候補が提示されます。
コード補完の候補を提示させるためのトリガーで、よく使うパターンをご紹介します。

### コメントの入力
よく解説されているのはこのパターンかと思います。
書きたいコードについてのコメントを入力することでコメントに沿ったコードを提案してくれます。

![qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318277/95d50aca-833f-acd6-1648-7b26a4ad44a6.gif)

### 関数名や構造体名（クラス名）などの入力
こちらも簡単なものであれば名前を入力しただけで名前に応じたコードを提案してくれます。

![qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318277/555cce6a-bbe6-1a94-3291-e219f54a4b77.gif)

### 改行
使っていて個人的に一番便利かつ気持ち悪い（良い意味で）と思うのはこちらです(笑)
考えていることを全て見透かされている気になることもあるぐらい書きたいと思っているコードが提案されます。
サンプルは簡単な例なので、そんなに驚かないと思いますが、実際に業務で利用していると ***こわっ!!!*** って思うことがあると思います。

![qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318277/d10a2131-cc80-cef6-690b-457402afca91.gif)

# Copilot Chat(チャット機能)について

## Copilot Chatアクセス方法
Copilot Chatは以下の3箇所で利用することができます。

1. サイドメニュー
1. コマンドパレット
1. インラインチャット

サイドメニューとコマンドパレットではほぼ同じ操作が可能で、インラインチャットについては制限される操作もありますが、インラインチャット限定の操作もあります。

### サイドメニュー
以下２パターンの方法で利用することができます。
1. サイドメニューから以下のマークを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318277/76f196ba-3da1-a6de-d1ef-a92d74825f02.png)
1. `Ctrl + Command(⌘) + i`

以下の画像のように画面左下部に入力欄が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318277/c5f96a10-7837-6cd9-844c-0cf4c5adb8b2.png)

### コマンドパレット
以下２パターンの方法で利用することができます。
1. コマンドパレット（`Command(⌘) + Shift + p`）を開く => `Chat: Open Quick Chat` と入力
1. `Shift + Command(⌘) + i`

以下の画像のように画面上部に入力欄が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318277/eff2c28f-c60c-d8da-8af3-b9f621a2c8d7.png)

### インラインチャット
以下２パターンの方法で利用することができます。
1. コードエディター内で右クリック => Copilot => エディターで開始する
1. `Command(⌘) + i`

以下の画像のようにコードエディター選択部分に入力欄が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318277/9c01640f-8093-4ca1-1dd0-5bef5699a278.png)


## コマンド一覧
Copilot Chatのプロンプトには通常のテキスト以外に以下３種類のコマンドがあります。

1. [Chat participants](https://docs.github.com/ja/copilot/github-copilot-chat/copilot-chat-in-ides/using-github-copilot-chat-in-your-ide#chat-participants) (チャット参加者)
1. [Slash commands](https://docs.github.com/ja/copilot/github-copilot-chat/copilot-chat-in-ides/using-github-copilot-chat-in-your-ide#slash-commands) (スラッシュコマンド)
1. [Chat variables](https://docs.github.com/ja/copilot/github-copilot-chat/copilot-chat-in-ides/using-github-copilot-chat-in-your-ide#slash-commands) (チャット変数)

各コマンドの詳細については公式ドキュメントを参照してください。
ここでは簡単に各コマンドについて紹介します。

https://docs.github.com/ja/copilot/github-copilot-chat/copilot-chat-in-ides/using-github-copilot-chat-in-your-ide

https://code.visualstudio.com/docs/copilot/copilot-chat

### Chat participants (チャット参加者)
こちらは特定のドメインに特化した回答を生成させるためのコマンドになります。
例えば、ターミナルシェルやターミナルコマンドに関する回答が欲しい場合は `@terminal` をプロンプトに入力した上で指示を行うことで、回答の精度を高めることができます。
例えると、学校で何かを質問したい場合に、数学の先生、国語の先生、担任の先生の誰に答えてもらいたいかを選ぶみたいなことです。

### Slash commands (スラッシュコマンド)
こちらは汎用的な操作のショートカットコマンドになります。
例えば、コードの説明をしてほしい場合には `/explain` を使うことで `このコードの説明をしてください` とプロンプトに入力しなくても説明をしてくれるというようなものになります。
他にも `/clear` でチャットをクリアしてくれたりします。
当コマンドは `＠workspace` の `/explain` など、Chat participantsと親子関係があるものもあるため利用時には[公式ドキュメント](https://docs.github.com/ja/copilot/github-copilot-chat/copilot-chat-in-ides/using-github-copilot-chat-in-your-ide#slash-commands)をご覧ください。(Chat participantsを入力すると `/` を入力した時点で候補として利用できるSlash commandsしか表示されないので混乱することはないと思います)

![qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318277/4a523730-496e-98df-ebe8-1a412369e7d9.gif)

### Chat variables (チャット変数)
こちらはプロンプトに特定のコンテキストを埋め込むことができる機能です。
特定のファイル、Gitリポジトリ、エディターの表示領域などをコンテキストとして埋め込むことで、ユーザーが何を求めているのかを正確に捉えることができ、回答の精度を高めることができます。
例えば、特定のファイルのコードを説明してもらいたい時には

```
@workspace /explain #file:main.go 
```

とプロンプトに入力することでファイルを開いていない場合でも特定ファイルをコンテキストに埋め込んで回答してくれるようになります。

![qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318277/8cf6a66e-64e5-6e47-53bb-debd60884957.gif)


# Copilot導入による効果
ZOZOやGitHubで大規模な検証を行なってくれているので、以下を参照するのが良いと思います。

https://techblog.zozo.com/entry/introducing_github_copilot

https://github.blog/jp/2022-09-15-research-quantifying-github-copilots-impact-on-developer-productivity-and-happiness/

開発者の生産性に対する効果測定というのは非常に難しい部分ではあると思いますので、導入する際には生産性にフォーカスするより先進的な技術への導入にフォーカスして、決裁者にアプローチする方が良いのではないかと思います。
もしかすると企業文化などによって合う合わないがあるかもしれないので、そこは導入してから検証してみてください。

# Copilotの活用方法
当記事はあくまで導入を目的としているため、具体的にどう活用していくかについては言及しません。
ただし、次のステップとして必要になってくると思いますので参考になるリンクを掲載しておきます。

https://logmi.jp/tech/articles/329436

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


# おわりに
今回はGitHub Copilotに関する記事を書いてみました！

Copilotを導入する企業が増え、よりクリエイティブなことにリソースを割くことができるようになることで、良いプロダクトがたくさん生まれると良いなと思います。

K.S.ロジャースでは正社員になるとGitHub Copilotを無料で利用できますので、正社員でのご応募どしどしお待ちしております！
もちろん正社員以外でのご応募もお待ちしております🙇

この記事がどなたかの参考になれば幸いです！

K.S.ロジャースではWantedlyでもブログ投稿をしています。
Techブログだけでなく会社ブログなども投稿しているので、気になった方はぜひ覗いてみてください😁

https://www.wantedly.com/companies/ks-rogers

では良いエンジニアライフを👋