GitHub Copilot in VS Code カスタムインストラクションの設定と効果検証【導入編】

こんにちは。

ファインディで Tech Lead をやらせてもらってる戸田です。

弊社では開発生産性の向上のための投資、検証を継続して行っており、生成AIの活用にも取り組んでいます。

そこで今回は、GitHub Copilot in VS Codeのカスタムインストラクションを導入した際の話を紹介しようと思います。

筆者も最近導入したばかりでフル活用までいっていないのが現状ですが、開発生産性の向上を見込めると確信している強力な機能となっています。

それでは見ていきましょう！

GitHub Copilot in VS Codeとは
設定方法
効果検証
まとめ

GitHub Copilot in VS Codeとは

公式ドキュメントはこちら

code.visualstudio.com

VS CodeにはGitHub Copilot、GitHub Copilot Chatを利用するための拡張機能が用意されています。

marketplace.visualstudio.com marketplace.visualstudio.com

デフォルトの設定だとCopilot自身がコード生成や変更内容をサジェストしてくれるのですが、このサジェスト内容をカスタマイズできるようになるのがカスタムインストラクションです。

サジェスト内容をカスタマイズするために必要なのがコードガイドラインとなっています。これを自然言語などで記述しておくとCopilotが読み込み、設定内容を反映したコード生成、変更内容のサジェストを出すようになります。

極端な例えになりますが、指定したファイルに開発チームのコードガイドラインを記述しておくことで、Copilotがそのコードガイドラインに従ったコードを生成してくれるようになります。

設定方法

基本的にはVS Codeを最新バージョンに更新して、 .github/copilot-instructions.md というファイルを作成するだけでOKです。

作成したファイルにコードガイドラインを記述していきます。記述する内容は日本語やマークダウンでOKです。

コードガイドラインを他のフォルダやファイルで管理したい場合は、.vscode/settings.json に次のような設定を追記します。file で指定したファイル名でファイルを作成しコードガイドラインを記述していきます。

{
  "github.copilot.chat.codeGeneration.instructions": [
    {
      "file": "path/to/code-guideline.md"
    }
  ]
}

また、次のように設定を直接追加することもできます。text で指定した内容がサジェスト内容に直接反映されます。

{
  "github.copilot.chat.codeGeneration.instructions": [
    {
      "text": "Always add a comment: 'Generated by Copilot'."
    },
    {
      "text": "In TypeScript always use underscore for private field names."
    },
    {
      "file": "path/to/code-guideline.md"
    }
  ]
}

これで設定は完了です。あとはコードガイドラインを記述してサジェスト内容をチューニングするだけです。

効果検証

カスタムインストラクションの設定が無い状態で、GitHub Copilot Chatで次のプロンプトを実行します。

以下の条件を全て満たすComponentを作成してください

- Function Componentである
- propsは以下の通り
  - title: string
  - description: string
  - link: string
  - linkText: string
  - isShowLink: boolean
- titleはh1タグで出力する
- descriptionはpタグで出力する
- isShowLinkがtrueの場合、linkで指定したurlをaタグにして、linkTextを出力する
- linkのテキストがurlではない場合、linkを出力しない

シンプルなコンポーネントを作成するプロンプトです。実行すると次のコードが生成されました。

プロンプトの命令に忠実なコードが生成されたかと思います。

import React from 'react';

type Props = {
  title: string;
  description: string;
  link: string;
  linkText: string;
  isShowLink: boolean;
};

export const MyComponent: React.FC<Props> = ({ title, description, link, linkText, isShowLink }) => {
  const isValidUrl = (text: string) => {
    try {
      new URL(text);
      return true;
    } catch {
      return false;
    }
  };

  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
      {isShowLink && isValidUrl(link) && <a href={link}>{linkText}</a>}
    </div>
  );
};

次にカスタムインストラクションの設定内容をチューニングします。

今回は .github/copilot-instructions.md に次のような記述をしました。

# コードガイドライン

- props の項目で boolean 型の項目があった場合は、その項目を optional にする
- a タグのリンク先が別ドメインだった場合、以下の属性を追加する
  - rel="noopener noreferrer"
- チェック処理などは可能な限り memo 化する

これでプロンプトを再実行すると、次のコードが生成されました。

import React, { memo, useMemo } from 'react';

type Props = {
  title: string;
  description: string;
  link: string;
  linkText: string;
  isShowLink?: boolean; // booleanはoptionalにする
};

export const MyComponent: React.FC<Props> = memo(({ title, description, link, linkText, isShowLink }) => {
  const isValidUrl = useMemo(() => {
    try {
      new URL(linkText);
      return true;
    } catch {
      return false;
    }
  }, [linkText]);

  const isExternalLink = useMemo(() => {
    try {
      const linkUrl = new URL(link);
      return linkUrl.origin !== window.location.origin;
    } catch {
      return false;
    }
  }, [link]);

  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
      {isShowLink && isValidUrl && (
        <a href={link} rel={isExternalLink ? "noopener noreferrer" : undefined}>
          {linkText}
        </a>
      )}
    </div>
  );
});