エンジニアのはしがき

GitHub Copilotで遊んだ

目次
  1. Copilotとは？
  2. Copilotのはじめかた
  3. 申請する
  4. VSCodeに拡張機能を追加する
  5. 試しにAngularのサンプルコードを書いてみる
  6. あとがき

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

Copilotとは？

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

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

Copilotのはじめかた

申請する

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

https://copilot.github.com/

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

VSCodeに拡張機能を追加する

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

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

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

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

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

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

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

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

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

あとがき

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