GitHub Copilot Labsが最強すぎる
はじめに
修正や追加等はコメントまたはGitHubで編集リクエストをお待ちしております。
クソ便利すぎる機能を発見したので紹介します。
下記のプラグインをインストールしてください。
本題
インストールが完了すると、サイドバーに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
しっかり翻訳できています。
デフォルト値を理解できているのが凄いです。
早速使ってみる
色々できそうだなと思ったので、早速使ってみます。
ここに何の変哲もないクソコードがあります。
export const valueSwap = (x, y) => {
let tmp;
if (y < x) {
tmp = y;
y = x;
x = tmp;
}
return [x, y];
};
このコードをGitHub Copilot Labsで修正してみます。
使い方は超簡単で、修正したい箇所を選択するだけです。
型を追加
ADD TYPES をクリックすると、型を追加してくれます。
export const valueSwap = (x: number, y: number): [number, number] => {
if (y < x) {
const tmp = y;
y = x;
x = tmp;
}
return [x, y];
};
デバック用のコードを追加
DEBUG をクリックすると、デバック用のコードを追加してくれます。
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 をクリックすると、コメントを追加してくれます。
/**
* 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 をクリックすると、デバック用のコードを削除してくれます。
/**
* 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];
};
他のコードでもやってみましょう!
バグを修正
このコードにはバグがあります。
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によって修正してみましょう。
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で見た目を変えてみましょう。
export const CansellButton = () => {
return (
<button>
キャンセル
</button>
);
};
範囲を選択して、とりあえず material-ui を使うようにしてみましょう。
// muiを使って書いて
import Button from "@material-ui/core/Button";
export const CansellButton = () => {
return (
<Button>
キャンセル
</Button>
);
};
キャンセル感が無いので、tailwindcss を使ってみましょう。
//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の一番面白い機能だと思います。
その他の機能
コードの切り分け
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);
};
コードの安全化
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のおかげで、解決しそうです。
Discussion