VSCodeに生えたGitHub Copilotを使ってReact開発するから私は焼き鳥を食べる

なんか生えましたね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/a33a9f10-80e9-0265-b1e4-99cdeaac3d6e.png)

写真撮り忘れましたが、
押してみるとGitHubへのサインインを求められるので、GitHubとの連携まで完了させてください。

上手くいけばこんな感じに表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/f88170d0-a993-f44e-5f2f-52a893dd9763.png)

# 無料枠

https://x.com/github/status/1869447551876788359?s=61

>GitHubは新しい無料プラン「GitHub Copilot Free」を発表しました。
このプランでは、
    月に最大2,000回のコード補完と
    50回のチャットメッセージが利用可能です。
>   
>ユーザーは、
    Claude 3.5 Sonnetや
    GPT-4oなどのAIモデルを選択できます。
>
>この新しいプランはVisual Studio Codeに統合されており、すべてのGitHubユーザーが利用できます。

月に2,000回　ということは１日に66回のコード補完ができるので、
遊ぶ程度には足りるかな？
50回のチャットは他のモデルより多いような気もします。体感ですが。
またClaude 3.5 Sonnetが使えるのはとてもいいですね。

# チュートリアル

親切にチュートリアルがあったので、やってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/a564a1f6-2a37-925f-d28d-77a513c68758.png)

## Copilotとチャット

「Copilotとチャットする」ボタンを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/863bd949-6818-9a3f-6a7f-e991a8de87b7.png)

:::note warn
ショートカットはCtrl + Alt + i
（最初Lかと思って反応しないので、Iも試した次第）
:::

左にチャットエリアが開きます。
さらにチャット入力欄上部によくある質問が表示されるのでそれを押してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/ca8ad10b-61c5-9a07-ed6b-260bfaacde9c.png)

:::note info
この補助リンクはチュートリアルだけではなく、通常使用も表示されるので便利です。
積極的に使用して時短しましょう。
:::

いろいろできるんですね。私はAmazonQを先に触っていたので、
それよりたくさんのコマンドがあって楽しそうだと思いました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/c8072dc5-c633-9409-2f25-097fedc91c9a.png)

## Copilotで編集

「Copilotで編集」ボタンを押下

ファイルが指定できるような見た目に変わりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/fed7cd07-e048-c9ff-9fbf-e42ea6872bd6.png)

「＋ファイルの追加」リンクを押下すると画面上部のファイル検索エリアが開きます。
VSCode上でプロジェクトを開いているとファイルの候補が出るので、任意のファイルを選択してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/27b6aa41-f27f-4b91-1cb1-06a41bd3c10d.png)

ファイルが選択されたようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/01ea587c-e00f-80ba-6470-79080a2827a3.png)

ちょうどよく、
この時の検証ファイルをいじっていたらエラーが出てしまったので、それを解消してみましょう。
モデルはせっかくなので、Claude 3.5 Sonnetで。

https://qiita.com/Jasmine_teeeeee/items/10bb58371daa0113acb4

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/7545f258-890e-0123-53a3-ee859516a7ad.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/7f7bbe12-b390-23ee-91ea-b8753ce2cd77.png)

Claude 3.5 Sonnetの有効設定をしないといけないらしい。
ただ、「Enable」ボタンを押下ですぐ使えました。

https://docs.github.com/ja/copilot/using-github-copilot/using-claude-sonnet-in-github-copilot

１ファイルだけを指定して、エラー解消してという雑な指示だとさすがに解消できないみたいでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/58d02ee8-d8bf-1a24-61ec-282666d44d44.png)

### 存在しないコンポーネントを作ってみた

「Buttonあああ」と雑なエラーを作ってみましたが、
これなら修正できるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/88ce77f3-3bfd-e020-d227-935b0ed02683.png)

右のチャットエリアには「採用」
コードエリアには「承認」
ですが、とりあえず「承認」してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/4526695b-213b-3402-163e-f171644a9476.png)

差分が反映されました。コードはまだ保存されていません。
「完了」を押してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/dc94ffae-4c2d-7bd6-841a-dd34221426e6.png)

完了はチャットを終わらせるだけみたいでした。
ファイルは手動で保存してください。

## AIが提案するコード補完

これが一番一般的なCopilotの使い方だったものですね。

ここにボタンを追加してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/469b90dc-cdea-1484-5fa1-4d2abcb51553.png)

まず、タブの開始「<」を入力するとすぐに候補が出てくるので、
Tabを押下するとその候補が適用されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/231bd126-0a35-6d88-a2ff-bfa704f0a278.png)

タブとエンターを押すといつの間にか実装が完了しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/33c8f117-b1d5-84ae-c55c-6b47b226dba7.png)

## ファイル内で自然言語を使用する

編集したり意味を知りたいコードを選択してフォーカスすると、
通常のVSCodeだとエラーメッセージやコード修正案が出ていたポップアップにCopilotが追加されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/ba8520b7-5f52-28f8-0b05-38cac3fe9bd0.png)

「Copilotを使用して修正する」を押下

モデルによって回答が違いました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/46feca33-417b-3551-1cae-0e2b8a1f64c2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/9d5d19a2-8d27-169c-9649-89b07953056a.png)

エリアが狭いので、「チャットで表示する」を押下

ターミナル開いてくれないかな～と試しに聞いてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/b58db156-5ab7-cb0f-78a5-0981a905fe56.png)

ん。。。ちょっと調べたんですが、できそうなできなそうな。。
これは追って追記します。

## ヒントとテクニック

このサイトにいろいろ書いてあるみたいです。

https://code.visualstudio.com/docs/copilot/copilot-vscode-features

# まとめ

ちょっとまだ不明点あるので、追って修正していきたいと思います。
今回は基本機能ができるところまでできるようになったと思います。

クリスマスなのに焼き鳥食べました。

# おまけ

GitHub のブラウザ上でも会話ができますが、こちらは日本語の対応がされていないので、
英語で返してきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/813e1d96-4f89-85b9-3b72-3c6797381933.png)

モデルはVSCodeと同じものならそのまま使用できます。
他のモデルは課金することで使用可能になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/4fa4a092-3630-4b3d-0561-78fc15e54e0b.png)