📝

GitHub Copilot Labsが最強すぎる

2022/11/12に公開

はじめに

修正や追加等はコメントまたはGitHubで編集リクエストをお待ちしております。

クソ便利すぎる機能を発見したので紹介します。

下記のプラグインをインストールしてください。

https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-labs

本題

インストールが完了すると、サイドバーにGitHub Copilotのアイコンが表示されます。
下のBRUSHESをクリックすると、GitHub Copilot Labsの機能が使えるようになります。

コードを要約してくれる

個人的最強ポイントその1。

コードの説明をしてほしい

このコードが何をしているのかGitHub Copilotに説明してもらいます。

以下は、上記のコードの説明です。
1.random() 関数はnumという1つのパラメータで呼び出される.
2.numが指定されない場合1が設定される。
3.Math.random()関数が呼び出され、その結果にnumがかけられる。
4.結果が切り捨てられ最も近い整数に切り捨てられる。
5.結果が返される。

しっかり説明出来ています。

コードの処理の流れを説明してほしい

次はコードの処理の流れを重視して説明してもらいます。

上記のコードでは、以下のことを行っています。
1.randomという関数を作成する。
2.引数として数値を受け取る。
3.数値が渡されない場合、デフォルト値として1が与えられる。
4.0から渡された数値の間の乱数を返す。

天才!

コードを別言語に変換してくれる

個人的最強ポイントその2。

先ほどのコードを突然RubyとPythonに移植したくなったので翻訳してもらいます。

Python

Ruby

しっかり翻訳できています。
デフォルト値を理解できているのが凄いです。

早速使ってみる

色々できそうだなと思ったので、早速使ってみます。
ここに何の変哲もないクソコードがあります。

TypeScript
export const valueSwap = (x, y) => {
    let tmp;
    if (y < x) {
        tmp = y;
        y = x;
        x = tmp;
    }
    return [x, y];
};

このコードをGitHub Copilot Labsで修正してみます。

使い方は超簡単で、修正したい箇所を選択するだけです。

型を追加

ADD TYPES をクリックすると、型を追加してくれます。

TypeScript
export const valueSwap = (x: number, y: number): [number, number] => {
    if (y < x) {
        const tmp = y;
        y = x;
        x = tmp;
    }
    return [x, y];
};

デバック用のコードを追加

DEBUG をクリックすると、デバック用のコードを追加してくれます。

TypeScript
export const valueSwap = (x: number, y: number): [number, number] => {
    console.log('x: ', x);
    console.log('y: ', y);
    if (y < x) {
        console.log('Swapping values');
        const tmp = y;
        y = x;
        x = tmp;
    }
    console.log('x: ', x);
    console.log('y: ', y);
    return [x, y];
};

コメントを追加

LIST STEPS をクリックすると、コメントを追加してくれます。

TypeScript
/**
 * Swaps the values of two numbers if the second number is less than the first.
 * @param x The first number.
 * @param y The second number.
 * @returns A tuple containing the two numbers in ascending order.
 */
export const valueSwap = (x: number, y: number): [number, number] => {
    // Display the values of the parameters
    console.log('x: ', x);
    console.log('y: ', y);

    // If the second number is less than the first, swap the values
    if (y < x) {
        console.log('Swapping values');
        const tmp = y;
        y = x;
        x = tmp;
    }

    // Display the values of the parameters after the swap
    console.log('x: ', x);
    console.log('y: ', y);

    // Return the two values in ascending order
    return [x, y];
};

どうでしょうか?
あの型もないクソコードが、GitHub Copilot Labsによって生まれ変わりました。
あっ、でもデバックコードは消したいですね。

デバック用のコードを削除

CLEAN をクリックすると、デバック用のコードを削除してくれます。

TypeScript
/**
 * Swaps the values of two numbers if the second number is less than the first.
 * @param x The first number.
 * @param y The second number.
 * @returns A tuple containing the two numbers in ascending order.
 */
export const valueSwap = (x: number, y: number): [number, number] => {
    // If the second number is less than the first, swap the values
    if (y < x) {
        const tmp = y;
        y = x;
        x = tmp;
    }

    // Return the two values in ascending order
    return [x, y];
};

他のコードでもやってみましょう!

バグを修正

このコードにはバグがあります。

TypeScript
export const dayOfWeek = (
    props?: {
        yer?: number;
        mon?: number;
        day?: number;
    },
    timeDifference = 9,
) => {
    const nowTime = now(timeDifference);
    if (props) {
        return new Date(
            props.yer || nowTime.getFullYear(),
            props.mon ? props.mon : nowTime.getMonth(),
            props.day || nowTime.getDate(),
        ).getDay();
    } else {
        return nowTime.getDay();
    }
};

わかりますでしょうか?
うっかりやらかしガチなバグですが、GitHub Copilot Labsによって修正してみましょう。

TypeScript
export const dayOfWeek = (
    props?: {
        yer?: number;
        mon?: number;
        day?: number;
    },
    timeDifference = 9,
) => {
    const nowTime = now(timeDifference);
    if (props) {
        return new Date(
            props.yer || nowTime.getFullYear(),
            props.mon ? props.mon - 1 : nowTime.getMonth(),
            props.day || nowTime.getDate(),
        ).getDay();
    } else {
        return nowTime.getDay();
    }
};

バグが修正されました!
しっかりと月の値から1引いていることがわかります。

任意のコードに変換

CUSTOM をクリックすると、任意のコードに変換してくれます。
以下のコードだと、質素なボタンがレンダリングされるので、Copilotで見た目を変えてみましょう。

TSX
export const CansellButton = () => {
 return (
  <button>
   キャンセル
  </button>
 );
};

範囲を選択して、とりあえず material-ui を使うようにしてみましょう。

TSX
// muiを使って書いて
import Button from "@material-ui/core/Button";

export const CansellButton = () => {
 return (
  <Button>
   キャンセル
  </Button>
 );
};

キャンセル感が無いので、tailwindcss を使ってみましょう。

TSX
//tailwindを使ってスタイルを追加して
import Button from "@material-ui/core/Button";

export const CansellButton = () => {
 return (
  <Button
   variant="contained"
   color="primary"
   className="bg-red-600 hover:bg-red-800 text-white font-bold py-2 px-4 border border-red-700 rounded"
  >
   キャンセル
  </Button>
 );
};

キャンセル感が出ましたね!
ホバーの際に色が深くなるのもいいですね。
Copilotの一番面白い機能だと思います。

その他の機能

コードの切り分け

TypeScript
export const getDay = (props?: {
    yer: number;
    mon: number;
    day: number;
}) => {
    if (props) {
        return new Date(
            props.yer,
            props.mon ? props.mon - 1 : nowTime.getMonth(),
            props.day || nowTime.getDate(),
        ).getDay();
    } else {
        return nowTime.getDay();
    }
};
export const getNowTime = (timeDifference = 9) => {
    return now(timeDifference);
};
export const dayOfWeek = (props?: {
    yer?: number;
    mon?: number;
    day?: number;
}) => {
    const nowTime = getNowTime();
    return getDay(props ? props : nowTime);
};

コードの安全化

TypeScript
export const dayOfWeek = (
    props?: {
        yer?: number;
        mon?: number;
        day?: number;
    },
    timeDifference = 9,
) => {
    const nowTime = now(timeDifference);
    if (props) {
        const time = new Date(
            props.yer || nowTime.getFullYear(),
            props.mon ? props.mon - 1 : nowTime.getMonth(),
            props.day || nowTime.getDate(),
        );
        if (isNaN(time.getTime())) {
            throw new Error('Invalid Date');
        }
        return time.getDay();
    } else {
        return nowTime.getDay();
    }
};

不明な機能

READBLE は何をする機能なのかわかりませんでした。

まとめ

かなり賢いので、コードを書くのが楽になります。
あえてバグを入れて修正できるか試したりすると、けっこう楽しいです。
私はコードにコメントを入れるのが苦手なのですが、GitHub Copilot Labsのおかげで、解決しそうです。

GitHubで編集を提案

Discussion

ログインするとコメントできます