GitHub Copilotをチーム開発で使いこなす！システムプロンプト設定方法

お疲れ様です。最近はブログから離れて隠遁生活をしていました。社内で「GitHub Copilot」の普及のためにイベントなどをやっていました。基本的な部分から実践的な使い方までをまとめていました。今回は「GitHub Copilot」でシステムプロンプトを設定して、チーム内で一定のGitHub Copilot出力を担保する方法について紹介していきます。

今回紹介する方法はパブリックプレビュー状態なので、変更される可能性があります。最新情報を追って合わせて更新していきましょう。

1 前提条件
2 システムプロンプト設定方法
- 2.1 VSCodeの設定有効化
- 2.2 .github/copilot-instructions.mdを作成してシステムプロンプトを設定する
3 システムプロンプトの備忘録
- 3.1 不必要なプロンプトは除外しておく
- 3.2 フロントエンドエンジニアならこんなプロンプトもよいかも
4 おわり

前提条件

開発環境としてはVisual Studio Code（VSCode）でGitHub Copilot businessでの開発を前提としています。

システムプロンプト設定方法

システムプロンプトを設定する方法としては、2ステップで設定することができます。

VSCodeの設定で「Code Generation: Use Instruction Files」の設定を有効化する
.github/copilot-instructions.mdを作成してシステムプロンプトを設定する

VSCodeの設定有効化

VSCodeで「Shift＋,」を開いて設定を開きましょう。検索欄にgithub.copilot.chat.codeGeneration.useInstructionFilesと入力するか、こちらをクリックして設定項目に遷移してください。

項目をtrue にすると設定自体は完了です。

`.github/copilot-instructions.md`を作成してシステムプロンプトを設定する

ルートディレクトリに.githubディレクトリを作成し、copilot-instructions.md というファイルを作成します。作成したファイルに自然言語でプロンプトを記述することで機能が有効化されます。以下のようなディレクトリ構成になっていれば設定自体は完了です。

わかりやすいようにエンタメよりのシステムプロンプトを設定してみました。index.htmlの解説をしてもらうと以下のような出力が返答されており、適切に設定が完了しています。

GitHub Copilotの出力サンプル

入力

class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-6

上記のソースを解説して

出力

以下のコードは、HTMLの<header>要素に適用されているクラス属性の一部です。このクラス属性は、Tailwind CSSを使用してスタイルを設定しています。

class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-6

bg-gradient-to-r:
- 背景にグラデーションを適用します。
- to-rは「右方向へのグラデーション」を意味します。
from-indigo-600:
- グラデーションの開始色を指定します。
- indigo-600はTailwind CSSで定義されたインディゴ色の濃いトーンです。
to-purple-600:
- グラデーションの終了色を指定します。
- purple-600はTailwind CSSで定義された紫色の濃いトーンです。
text-white:
- テキストの色を白に設定します。
py-6:
- 上下のパディングを設定します。
- pyは「padding-y（上下方向のパディング）」を意味し、6はTailwind CSSのスケールに基づく値（約1.5rem）です。

このクラス設定により、ヘッダー部分に右方向へのインディゴから紫へのグラデーション背景が適用され、テキストは白色で、上下に適度な余白が確保されていますにゃー。

こちらのファイルはそのままリポジトリに上げることで、新たに参入する開発メンバーも自然に導入することができます。

システムプロンプトの備忘録

こちらはまだ検証中の内容になります。運用を進めてみて、進展等があればブログにてまとめて行きます。

不必要なプロンプトは除外しておく

今回はデモ目的だったので、語尾に「にゃー」とつけてもらいました。実用性に関しては皆無であり、トークン数の無駄な消費につながります。GitHub Copilotはコード関連に特化したAIとなっています。そのため、汎用的な質問などは受け付けません。

システムプロンプトには、コードに関する情報を入れておくことが好ましいですね。

フロントエンドエンジニアならこんなプロンプトもよいかも

前提情報として、リポジトリ内で使用している技術の概要あたりは書いておくのが良いかもしれません。GitHub Copilotは特に意識をしなければ、開いているファイル群を読み取り回答を生成します。Tailwindでカスタム定義したCSSなどは、あまり読み込んでくれない印象です。そのため、以下のような情報を箇条書きで与えています。