概要
Visual Studio Code (VSCode) と GitHub Copilot を組み合わせて使うと、開発作業が大幅に効率化されます。
ChatGPT と何が違うのか？
Copilot は、ワークスペースに存在するコードの構造を解析した上で提案する仕組みが入っている。生成結果をインラインでエディタに出力できる、新しいファイルを作成できるなど開発に特化しています。
導入するとチームの生産性が上がるルール
- 書いたコードGithub Copilotでコメントを生成し、コードに必ず説明をつける癖をつける
- コードの構造を把握するのに @workspace を利用する
- #files を使ってファイルの説明させたり、よく似たコードを生成させる
- 生成したコードは testを生成して確認
準備
- Copliot を契約してください。（学生であれば無料です）
- https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat
書いたコードGithub Copilotでコメントを生成し、コードに必ず説明をつける癖をつける
以下は、コメントを通じて GitHub Copilot に関数を作成するよう指示する方法です:
// Function: 平均値を計算
// Function arguments: numbers (array)
// Return type of the function: number`
これらのコメントに基づいて、Copilot は次のようなコードを提案します:
function calculateAverage(numbers: number[]): number {
// calculate the average of the array
const sum = numbers.reduce((a, b) => a + b);
return sum / numbers.length;
}
他のメンバーが真似できるように上記のコメントは残すようにしましょう。
書いたコードGithub Copilotでコメントを生成し、コードに必ず説明をつける癖をつける
右クリックから Generate Doc を選択するとコメントを生成できます。
生成したコードに仕様などを追記するとコードの保守性が上がります。
コードの構造を把握するのに @workspace を利用する
@workspace にメッセージを飛ばすことで
@workspace コードの構造を説明してください。
#fileを使ってファイルの概要を把握する
ファイルを直接指定し概要を把握することができます。
#file:calendar-form.tsx の処理を詳しく説明してください。
#file を使って似たコードを生成する。
#file:auth-guard.tsx を参照してロールが管理者だった場合のみ表示するガードを作って欲しい
生成したコードはメニューからファイルを出力することができます。
生成したコードは testを生成して確認
右クリックでテストコマンドを呼び出すことができます。
テストが生成されます。
Createを押して書き出しましょう。
テストはそのまま動作しない可能性があります。
その時はコメントからコードを生成するなどして動作するように修正していきます。
余談
Github Copilot で使っているモデルのバージョンを知る方法
can you tell your model gpt version?
2024年4月12日時点は、GPT-4でした。
Purpom Media Lab は生産性追求した開発を日々行なっております。LLM や新しい技術を使って新しいスピード感を体験したい方を歓迎します！
Discussion