「時代はGithub Copilotっしょ！」という空気感

がエンジニア界隈であまりにも蔓延しすぎている気がする。

Copilotを触ったことが無いというのは、さすがに私の頭の中の「危機感持った方が良いよ」ニキが継承を鳴らし散らかしている気がしたので、

「いつやるの？ (Freeプランが提供開始されれた)今でしょ！！」 と林先生も言っているので爆速で触れていく。

Github Copilotを使えるようにセットアップ

下記は前提として、本記事では触れません。

Githubアカウントを持っていること
Visual Studio Codeがインストール済であること

それでは、セットアップをしていきます！

Vscodeを開き、Extensionsをオープン、 github と検索して出てきた Github Copilot とついでに Github Copilot ChatをInstallする。

(筆者の環境では既にInstallが完了してしまっているのでボタンが現れないが、Disabled / Uninstallの並びがInstallになっているはずなのでボタンを押下すればOK)

ExtensionのInstallが完了したら、画面左下のアカウントをクリック、 Sign in with Github to use Github Copilot をクリック

ブラウザにて、Githubの認証確認画面が表示されるはずなので、そこで自身のGithubアカウントにてログインする。

特に問題ないはずなので、 Authorize Visual-studio-Code をクリック。

VsCode開くよ？のダイアログで Visual Studio Codeを開くボタンを押下。

これで、Github Copilotが使用可能になっているはず。

いざ！Github Copilotを使う！

Vanillaなプロジェクトを作ってCopilotを動かしてみる

今回は一番メジャーであろうHTML+JavascriptにてCopilotを体験してみたい。ReactやVueなどのプロジェクトを作ろうかと思ったが、もしかしたらnode/npmが入ってない方が居るかもと思い、Vanilla過ぎるhtmlファイル1つと、jsファイル1つを作ってCopilotを体験することにした。

まずは、プロジェクトルートに空の index.html ファイルを作る。

ここで、とりあえず <html> + Enter と打つと、

Copilotが早速補完してくれている!?

この状態でTabキーを押すと、提案コードが確定されるようだ。

bodyタグも打ってみると、こんな感じでもう少し補完が走る。

なんとなく進めていくと、それっぽい提案をリアルタイムにしてきてくれる。補完の待ち時間は環境にもよると思うが、私の手元だと0.5~1秒程度の待ちだった。

このレベルであれば、十二分に使えそうな体感。

js側のソースに移る。こちらでは、function名を定義すると、いい感じに処理内容を類推してさらに実装補完をしてくれるらしいのだが。

js/main.js として空のjsファイルを作り、意味ありげなfunction名をつけて補完提案を狙う。
日付関連の処理なら学習サンプルも多いだろうということで、とりあえずfunction addDay と入力してみると、

それっぽい何かを提案してくれている！

一旦Tabで確定して、処理の妥当性を確認する。提案ソースは下記。

function addDays(date, days) {
    var result = new Date(date);
    result.setDate(result.getDate() + days);
    return result;
}

一見すると、それっぽい処理内容のように見える。

次に、さらに別のfunctionを作っていこうと function と入力してみると、なんと先ほどまでの文脈を汲んで、 addMonthsとかってメソッドを定義したいんじゃないですか？とコード補完提案をしてくれた。

素晴らしい。

もう少し進めると、下記のように日付系のメソッドを提案し続けてくれた。

せっかくなので、先ほどのindex.htmlからmain.jsのメソッドを使っていく。

index.htmlのソースを下記のようにして挙動を確認する。

<html>
<head>
    <title>Home</title>

    <script src="js/main.js"></script>
</head>
<body>
    <h1>Home</h1>
    <p>Welcome to the home page.</p>

    <button onclick="calc3DaysAfter()">Calc 3days after</button>

    <script>
        function calc3DaysAfter() {
            var today = new Date();
            
            const res = addDays(today, 3)
            
            console.log(res)
            window.alert(res)
        }

    </script>
</body>
</html>

結果は下記のようになった。

Copilot Chat凄いぞ！(2024/01/15 追記)

Github Copilotを活用しつつで、Next.jsに入門している最中、サンプルアプリ開発としてブログ投稿&閲覧Webアプリを作ろう！ということになった。

その際、テキトーに作ったブログ記事サンプルデータの各要素に、id属性を一斉に振りたいというシーンがあったので、Copilot Chatを使ってみることにした。

Beforeのデータが下記のような感じ。

ここで、Ctrl + I(Windowsの場合)を押下してCopilot Chatを開き、

ここに add id attribute と打ってみたところ、とある1要素にid属性を付与してくれた。
これだけだと旨味があまりなく、全要素にid属性を付与してほしかったので to whole elements としてみると...

id属性を全要素に振ってくれている！ナイスだ！

悔しいが、copilotを使いこなすことは、生産性向上に大きく寄与しそうだ。今まで正規表現置換でなんとか解決していた自分を恥じた。

Copilotの感想

思っていたよりも、だいぶ使用感が良い！

Copilotを動かし始めるまでの準備はとても簡単なうえ、コード補完の使い勝手も良い。
自分がコードを書いている最中に邪魔な挙動をされたら嫌だなと思っていたが、今のところは特に気になる挙動は無い。

ただ、Tabキーは通常のコーディングでも割と押している気がするので、もしかすると何かのプラグインと干渉してしまう等はあり得るかもしれない。

また、今回は最もメジャーな言語(のはず)であるJavascriptベースで軽く書いてみたが、コードサンプルが少ない非メジャーな言語ではコード提案の精度があまり高くない可能性があるため、そのあたりは自身が開発したい言語との相談が必要になりそう。

趣味プログラミングとして、React Nativeを直近触りたいなと思っているのと、C#でも開発してみたいモノがあるので、そのあたりでの使用感も今後残しておきたい。

Github Copilotが良かったので、Proに移行しようと思った

残念ながら、業務ではGithub Copilotを使用できないのでアレですが... 使用感が良かったので、趣味プログラミングでは積極的に使っていきたいと思いました。

というわけで、最後はPro版以降の方法をさっくりと。

Githubにログインし、右上のプロフィールボタンを押下、その中の Your Copilotを押下すれば、現在のCopilotの状態が確認できます。(私はfreeプランなので、You are using Copilot for freeが表示されている)

Pro版に移行する場合は、ここの Start a free trialボタンを押下すればよさそうだ。