🤝

Github Copilotとお友達になりたい

2023/06/09に公開

GitHub Copilot

tech

Github Copilotを試しに導入してみたら、触りの段階で信じられないくらい有能だったので、様々な機能をあれこれ使ってみて、良さそうな活用方法なんかをまとめてみようと思います。

環境

Laravel Jetstream+Inertiaでフロントとバックを両方検証出来るようにしています。

Copilotは類推が強い≒改修には向いていない

TestButton.vue

<template>
  <div>
    <button class="bg-blue-400 hover:bg-blue-600 rounded h-8 w-auto px-2 py-1" @click="test">Test</button>
  </div>
</template>

というのを用意しておくと、TestButton2を作る際にこんな感じで提案してくれます。

バックエンドでも類推能力はかなり高いです。

TestController.php

class TestController extends Controller
{
    public function index()
    {
        return 'test';
    }
//以下👆から類推して、関数名及び引数をreturnすると解釈しています
    public function show($id)
    {
        return 'test'.$id;
    }

    public function create()
    {
        return 'create';
    }

    public function store(Request $request)
    {
        return 'store';
    }

    public function edit($id)
    {
        return 'edit'.$id;
    }

    public function update(Request $request, $id)
    {
        return 'update'.$id;
    }
    
}

類推力が高いということは、転じていえば類推元が💩だと出力も💩になる可能性が上がることになります。

KusoRepository.php

<?php

namespace App\Http\Repositories;

use App\Models\Kuso;

//classの文字を入力したところで👇が全て提案されました。有能
class KusoRepository{
  public function getAll(){
    return Kuso::all();
  }
  public function getById($id){
    return Kuso::find($id);
  }
  public function create($data){
    return Kuso::create($data);
  }
  public function update($id,$data){
    return Kuso::find($id)->update($data);
  }
  public function delete($id){
    return Kuso::find($id)->delete();
  }
}

KusoService.php

<?php

namespace App\Http\Services;

use App\Http\Repositories\KusoRepository;

class KusoService{
  private $kusoRepository; //これもprivateと書いたところで提案してくれました。
//コンストラクタも提案してくれる天才
  public function __construct(KusoRepository $kusoRepository){
    $this->kusoRepository = $kusoRepository;
  }

  public function getAll(){
    return $this->kusoRepository->getAll();
  }
}

というService/Repositoryパターンを作って、以下のようなクソデブになりそうなControllerを何とかしようと思っても、

KusoController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Kuso;
use App\Http\Services\KusoService;

class KusoController extends Controller
{
  public function get(){
    return Kuso::all();
  }
  public function getById($id){
    return Kuso::find($id);
  }
  public function create(Request $request){
    return Kuso::create($request->all());
  }
  public function update(Request $request,$id){
    $kuso = Kuso::findOrFail($id);
    $kuso->update($request->all());
    return $kuso;
  }
  public function delete($id){
    $kuso = Kuso::findOrFail($id);
    $kuso->delete();
    return 204;
  }

  public function getAll(){
    return Kuso::all(); //Serviceクラスの関数名に揃えたにも関わらず、
			//クラス内の類推が優先された
  }
}

となってしまう。ちなみに一度出力してから消してもう一回生成してもらうと、

  public function getAll(){
    $kusoService = new KusoService();
    return $kusoService->getAll();
  }

と提案が変化する。

💩－ドだけでなく、古いバージョンの書き方にも引っ張られてしまう（ajaxでdone/fail/alwaysで書こうと思っても、既存のsuccessパターンでAIが提案してくる）ので、総じて改修作業には不向きであると言えます。

古い技術の学習コストの削減

一方で、改修ではなく機能を追加するような作業だった場合、jQueryの書き方など、古い技術を学ぶコストを削減できる利点があります。

//idがget_allのボタンがクリックされたら、ajaxを用いてgetAllをGETする
//👆のようにどういう挙動が必要なのかをしっかり書けば、jQueryを使ったことがなくても
//それっぽいのを作れる
        $('#get_all').on('click',function(){
          $.ajax({
            url:"getAll",
            type:'GET',
            dataType:'json',
          })
          .done(function(data){
            console.log(data);
            $('#ajax_message').text('成功');
          })
          .fail(function(data){
            console.log(data);
            $('#ajax_message').text('失敗');
          })
          .always(function(data){
            console.log('completed');
          });
        });

モダンな技術が好きで古い技術を学ぶモチベーションが生まれない、学びたくないという人には非常に助かる一面だと思います。~~自分だけかもしれませんが~~

Copilotを使うならLabsも使うべき、使おう、使え、had better to use Labs

Github Copilot Labsを使うと、単にコードを生成するだけでなく、見やすくする、デバッグコードを挿入/取り除く、違う言語に変換する、堅牢化などの目的を指定することでそれに合わせたコードを出してくれるようになります。
使い方も簡単で、Copilotに登録した後VSCodeの拡張機能を入れて、登録するだけ

READABLE😊が強い

関数やクラスを指定した後、READABLEを押すときれいに整形してくれます。
こうやって{}の位置などがバラバラでも

public function readabletest(Request $request){
    if($request == 1)
    {
　　　return "1";
    }elseif($request == 2){
      return "2";
    }
    else
    {
      
      return "3";
      
    }
  }

揃えて直してくれます。コツとしては、きれいに書いているコードの部分も指定してあげると、類推してやってくれます。

public function readableTest(Request $request) {
    if ($request == 1) {
      return "1";
    }
    elseif ($request == 2) {
      return "2";
    }
    else {
      return "3";
    }
  }

FIX BUG🐞が強い

Syntax三銃士
;
()
{}
とかをうっかり書き忘れてしまい、関数やクラスの中を探す必要はなくなりました。
VSCodeでハイライトなどされた部分にFIX BUGを当てるだけで、きれいにバグを取ってくれます。

とりあえずハイライトされたら当ててみるという感じで気楽に使え、目視で探したり調べたりするといった作業を大幅に減らせるので作業効率も上がる、最高の機能の一つです。
元々AIコード生成はテストコードを書く際に既に重宝しているような部分があったので、「無から有」生み出す作業ではないバグ取りは非常に得意です。（だと思う）

CHUNK🍕が勉強になるし強い

自分はまだまだ🐤なので、機能を考える際にアルゴリズムを考える所までは良いのですが、そこから実装する際に手続き的にやってしまうことがありました。

public function hoge($hoge){
$hogeが0以上ならtrue,それ以外ならException
$hogeを基にAPI取得、出来なかったらException
取得した$responseをjson_decode
}

といった関数にCHUNKを適用すると、

public function hoge($hoge){
$this->private関数で各々処理
}
private function validateHoge($hoge){
$hogeが0以上ならtrue,それ以外ならFalse
}
private function fetchAPI($hoge){
$hogeを基にAPI取得、出来なかったらFalse
}
private function decodeJSON($response){
取得した$responseをjson_decode
}

と単一責務をなるべく満たすように~~爆☆殺~~分解してくれます。
単にコードが保守しやすくなる、バグが分かりやすくなるといった利点もあるのですが、
🐤にとっては責務を細かくするとはどういうことか、~~写経していて今まで意識していなかった~~publicじゃない関数はどのような時に使われるのかといったことなどをGithub Copilotという世界基準のAIが提供してくれるコードから学ぶことができます。
実際に自分の場合は、👆のdecodeJSONを他関数で使えた時に、単一責務の有難さ、クローンコードのバグ修正するときの💩さを良く実感できました。

MAKE ROBUST🛡も勉強になる

コードを堅牢にしてくれます。try-catch文の挿入や、$requestのフォーム未記入チェック、型チェック（idならint型かどうかなど、適当な型を名前から選んでくれる）などを導入してくれます。
これもCHUNK🍕と同様に、異常系の処理とはどういうものか、何をチェックするべきなのかの示唆を🐤に与えてくれます。（多分）異常系は正常系に比べて🐤には網羅できなかったり、そもそも考慮してなかったりするので、とりあえず試してみることで1ランク上のdeveloperを目指せるのかなと思います。
残念ながら堅牢にするやり方が実行毎にまちまちなため、生成コードをそのまま流用という訳には行きませんでしたが、参考には十分なると思います。

Github Copilot Chatは是非登録しよう

VSCodeの拡張機能ページ

VScodeのInsiderビルドが必要：ここからDLし、VScodeの「設定の同期」をオンにすることでStableビルドと拡張機能などの設定を共有/移行できます。
Github CopilotはNightlyバージョンが必要
Waitlistに登録（自分の場合、翌日くらいに使えるようになった）

実際の使用例

なんてすごいんだ・・・（恍惚）
日本語は試していないです。

追加料金なしなので、Copilot使っているなら是非使いましょう！！！！

結論

Github Copilotはすごかった！

単にコードを生成するだけでなく、Labs,Chatなどの各種サービスによって痒い所に手が届くコードを生成してくれる
Copilot Senpaiとして、良い勉強になる
面倒くさいコードを打ち込む作業や、コピペして変数名などを変えるような作業を代用してくれるので、適切な命名や、より適当なものを生成してくれるような仕様やコメントを深く考えることに集中でき、結果として強いdeveloperに必要な能力を鍛えさせてくれる（気がする）
少し心配だった、なんでもAI任せになってしまって、技術が付きにくくなるなんてことはなく、むしろつよつよになればなるほど使い勝手が良くなっていくような奥の深さ

今はまだ知り合いかお友達程度ですが、より勉強して恋人親友になるくらい理解を深めていきたい！

参照　巨人の肩の上に乗る

GitHub Copilot Labsを使ってみた
 GitHub Copilot導入後、初めて使う時。(豊富な使用例付き)
VSCodeでGitHub Copilotを使ってみた

環境