エンジニアのはしがき

プログラミングの日々の知見を書き連ねているブログです

GitHub Copilotで遊んだ

f:id:tansantktk:20211031185333p:plain

以前に申請してから存在を忘れかけていたGitHub Copilotですが、申請が通ったとメールが来たので軽く試してみた感想などをまとめてみました!

Copilotとは?

GitHubが提供するサービスで、開発者の書いたソースコードの一部を元に必要な記述を推測して候補を提示してくれます。 VSCodeの他にNeovim, JetBrainsでも利用できるとのこと。

執筆時点の2021/10/29ではまだtechnical previewで、今のところPython, JavaScript, TypeScript, Ruby, Java, Goを得意としているようです。

Copilotのはじめかた

申請する

Copilotはtechnical previewの段階ですので利用するのに申請が必要です。 まずは下記ページから申請をしましょう。

copilot.github.com

申請が通ると下記のようなメールが来ます。私の場合申請してから2か月くらいかかったと思います。ここは気長に待ちましょう。

f:id:tansantktk:20211029194451p:plain

VSCode拡張機能を追加する

VSCodeを開いて拡張機能GitHub Copilotを追加しましょう。これでこの拡張機能を有効化している間は、ソースコード中にAIが推測したソースの候補が自動的に提示されるようになります。

f:id:tansantktk:20211029194558p:plain

試しにAngularのサンプルコードを書いてみる

ここからはほぼ感想になります。

まずは手始めにgetUserData()というよくありそうな名前のメソッドを定義してみます。 すると候補としてjsonをreturnするコードが出てきました!このままtabキーを押すと候補のコードが適用されます。

f:id:tansantktk:20211029193451p:plain

また何気なく操作をしているとconstructor()がないじゃねぇのか?とご丁寧に提示してくれました。AngularでDependency Injectionする際に必ず書くので有難いですね。

f:id:tansantktk:20211029193500p:plain

さらにngOnInit()もいるんじゃねぇのか?と提示までしてくれました。そうです、大概のComponentでは使うのでとても助かります。Copilot先生、ご指摘ありがとうございます。

f:id:tansantktk:20211029193506p:plain

postUserData()といういかにも新規ユーザーを作成しそうなHTTPリクエストをするメソッドも定義してみました。候補に出てきたpost()は恐らくHttpClientのものだと思われます。この記述もよく書きます。ただ引数のエンドポイントはこんな風にベタ書きはしないのでそこまではいらなかったですが、postUserDataというメソッド名から推測してパスにusersまで埋め込んでしまうのは凄いですね。

f:id:tansantktk:20211029193513p:plain

コードの途中でCtrl+Enterを押すと別タブで複数候補を表示してくれる機能もあります。 ここではdeleteOldRecord()というAPIへDBレコードをDELETEするリクエストをするようなメソッドを書いてみましたが、APIからのレスポンスをComponentのプロパティにうまく代入してくれそうな候補を挙げてくれました。

3つ目の候補のthis.records = data.json()はFetch APIのレスポンスを処理するコード辺りから学習したものっぽい感じがしますね。

f:id:tansantktk:20211029200815p:plain

あとがき

想像していたよりも実用的な候補を出してくれるので、出来の良さに驚きました。 よく記述するような単純なコードであれば、Copilotは時短のための良いツールになりそうです。 しばらくはCopilotを使い続けて様子を見てみようと思います。