Github Copilotが無料で使えるようになったのでさわってみた

エンジニアの風速です。
日本時間の2024年12月19日にGithubからGithub Copilotに無料枠が利用できるようになったとのメールがきていました。せっかくなので今回はこちらをさわってみようと思います。

# Github Copilotは何ができる？
無料版では制限がありますが、以下の機能が利用できます。

- 月/2,000件のコード補完
    GitHub プロジェクトと VS Code ワークスペースからコンテキストを取得し、コンテキストを考慮したコード候補を表示できる
- 月/50件のCopilotチャットメッセージ
    コードの理解、リファクタリング、問題のデバッグについて、Copilot にヘルプを求めることができる
- AIモデルの選択
    Claude 3.5 Sonnet、OpenAI GPT-4o から選択できる
- Copilot Editsで複数のファイルに変更を加える
    Copilot Editsを使用して、複数のファイルにまたがる変更ができる
- Copilot Extensionsエコシステムのサポート
    Perplexity を使用して、Stack Overflowへのクエリや、Web検索などのタスク用に設計されたサードパーティ製エージェントにアクセスできる

# さわってみた
今回はVSCodeで利用してみたいと思います。以下のようなExtensionがあるので、インストールします。

![スクリーンショット 2024-12-25 23.10.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/fbd395f5-64cd-3c24-fc41-c315576d541c.png)

VSCodeのヘッダー部分にアイコンが出るようになりました。

![スクリーンショット 2024-12-25 23.30.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/4481554a-9eed-7aa4-198d-b6b460ee99ee.png)


# Copilot Chat
まずはCopilot Chatからさわってみたいと思います。UIはChatGPTみたいなAI対話ツール的な感じです。

![スクリーンショット 2024-12-25 23.15.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/e239442f-f3ea-537f-75c1-2d2ebe5d9ea1.png)

とはいえ無の状態でなにを聞いていいのかわからないので、`/help`というコマンドがあったので入力してみます。

![スクリーンショット 2024-12-25 23.19.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/44f390ac-a9ac-168a-ab05-7ff75c4b9b10.png)

とりあえずなにも思いつかなかったので、ReactのToDoアプリを作ってとお願いしてみたら、作成くれました。
今回は勝手に解釈してくれましたが、`/new ReactのToDoアプリを作って`とした方が確実に作成してくれそうです。

![スクリーンショット 2024-12-25 23.42.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/0914aa2f-6df6-61a7-0a2c-1cdf554041f7.png)

ワークスペースを作成と押すとMacOSだとFinderが表示され、ディレクトリを選択するとそこにワークスペースを作成してくれました。

![スクリーンショット 2024-12-25 23.45.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/d48dacb6-8a43-9bcf-bc3a-d4d1cc1d0912.png)

ただちょっとバージョンの不整合があり、一旦雛形は`create-react-app`してそこにtodoアプリのコンポーネントを追加してとお願いすると、実際にどこに何のファイルを追加するかなどを提示してくれました。

![スクリーンショット 2024-12-26 4.07.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/044e8adc-afe6-7e9e-272c-ebbb7d39569b.png)

右上のボタンからいろんなアクションを選択できます。

![スクリーンショット 2024-12-26 4.05.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/85e31719-098b-4e20-c588-8e985fe0d384.png)

1つ目のボタンは、実際のワークスペースに対象のファイルを生成してくれます。もともとある場合はそのファイルが修正された状態になります。コードブロックを使用みたいなシークバーがでてくるので、もしかすると、無料版の場合はコード補完のトークンを消費してしまうかも。

![スクリーンショット 2024-12-26 4.16.05のコピー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/08bde5e6-a63d-9433-e5e5-d73bcbdc5cba.jpeg)

![スクリーンショット 2024-12-26 4.14.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/b31f8afe-2684-1647-e1fc-b78ef25d821e.png)

2つ目のボタンはフォーカスがあるファイルに対象のファイルの内容を転写します。

![スクリーンショット 2024-12-26 4.16.05のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/85b8d3a1-7ff1-2203-f849-e264ed2390da.png)

3つ目のボタンはクリップボードに内容をコピーします。

![ssssss.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/57227237-be4d-db87-cc56-0b29c9291c9e.jpeg)

4つ目は以下のようなアクションが選択できます。

![スクリーンショット 2024-12-26 4.34.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/b0270a94-5413-c25b-7c71-67f7184398d5.png)

いろいろしてToDoアプリが起動できました。

![スクリーンショット 2024-12-27 2.11.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/8e87b9f2-2376-0b2b-b865-f07e53854734.png)

# コード補完
作ってもらったToDoアプリには追加はできるが、削除の機能はなかったので、以下のようにコメントを入力するとコード補完ができます。

![スクリーンショット 2024-12-27 2.52.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/2b524bc2-a140-b3a2-dd43-f867e199432c.png)

Tabを押すと実際にファイルに関数を作ってくれました。

![スクリーンショット 2024-12-27 2.52.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/bb7e0324-0b77-632c-5f6a-562f591c9621.png)

コンポーネントの部分で改行をすると、先ほど追加した関数を補完してくれました。

![スクリーンショット 2024-12-27 2.54.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/76cd7c00-2b3f-534a-823a-ca0365a0c352.png)

先ほど追加した関数を渡している部分も実装しないと動かないので子コンポーネント側に移動して、`//` と入力するだけで削除ボタン追加とコメントまでサジェストされました。そのままTabを押して

![スクリーンショット 2024-12-27 2.58.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/9caba4f8-422d-0422-5d17-0f7ebbfd296a.png)

このままだと動かないので、すこし調整をして、無事削除ボタンが追加されました。

![スクリーンショット 2024-12-27 3.01.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/f2f0bc89-959e-09a4-61bf-cdd964ce1b51.png)

# まとめ
実際にさわってみた感想として、特ににコード補完は生産性爆上がりすると思いました。ただ自分いる？という気持ちになるくらいで、正直驚きました。Chatの方もエディター内で完結するし、今回は検証できませんでしたが、Stack Overflowなどのエージェントなど追加すると、トラブルシューティングも捗るのではないでしょうか。ただ無料版だとすぐに利用可能分を使い切ってしまうとおもうので、有料版を使用するほうが良いのかなと思います。

# 参考
https://github.com/features/copilot