はじめに

GitHub Copilot Chat は、VS Code 内でチャット形式でコードに関する質問やエラー修正、最適化の提案を依頼できる強力なツールです。本記事では、Copilot Chat の活用方法を紹介し、コーディング効率を大幅に向上させるための具体的な手順やコマンドを解説します。

Copilot Chat のメリット

• リアルタイムサポート：コードに関する疑問をその場で解決でき、作業効率が向上します。
• コード生成と最適化：テストコードの作成や重複コードの排除を自動化し、コードの質を改善します。
• エラー修正：エラー箇所を素早く指摘し、具体的な修正案を提示してくれるため、デバッグ作業がスムーズに進みます。
• ドキュメント生成：JSDoc コメントを自動生成し、コードの可読性と保守性を高めます。

これらの機能を活用することで、コーディングの効率が大幅に向上します。次のセクションでは、GitHub Copilot Chatのセットアップ手順について説明します。

セットアップ手順

1. VS Codeのインストール

   • 公式サイトから最新のVS Codeをダウンロードし、インストールします。

2. GitHub Copilotのインストール

   • VS Codeを開き、拡張機能ビューを開きます。
   • 検索バーに「GitHub Copilot」と入力し、拡張機能をインストールします。

3. GitHubアカウントのリンク

   • GitHub Copilotを使用するには、GitHubアカウントが必要です。アカウントを作成し、VS Codeにログインします。

これで準備完了です。

Copilot Chat の便利なスラッシュコマンド

以下に、特に役立つ Copilot Chat のスラッシュコマンドを5つ紹介します。

1. /explain: コードを解説

1. 解説したいコードを選択。
2. Ctrl + / で Copilot Chat を開き、/explain と入力。

1.example {
2  width: 100px;
3  height: 100px;
4  background-color: blue;
5}

Copilot Chatで /explain と送信すると、選択したコードの解説をCopilotが提供してくれます。コードの意図や動作を理解するのに役立ちます。

2. /tests: テストコード生成

1. テストを書きたい関数を選択。
2. Copilot Chat を開き、/tests と指示。

1export function add(a, b) {
2  return a + b;
3}

Copilot Chatで /tests と送信すると、次のようにテストコードが生成してくれます。

1// add.test.js
2import { add } from './add';
3
4test('adds 1 + 2 to equal 3', () => {
5  expect(add(1, 2)).toBe(3);
6});

Copilot Chatで jest.config.js を作成してください と送信すると、次のようにテストコードが生成してくれます。

1module.exports = {
2  preset: 'ts-jest',
3  testEnvironment: 'node',
4  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
5  transform: {
6    '^.+\\.tsx?$': 'ts-jest',
7  },
8  testMatch: ['**/?(*.)+(spec|test).[tj]s?(x)'],
9};

Jest を使うなら、次の手順を実行します。

1npm install --save-dev jest ts-jest @types/jest

にスクリプトを追加：

1{
2  "scripts": {
3    "test": "jest"
4  }
5}

テスト実行：

1npm test

結果：

3. /fix: エラー修正

1. エラーがあるコードを選択。
2. Copilot Chat を開き、/fix と入力。

1/* 修正前：セミコロン抜けやプロパティのミス */
2.example {
3  width: 100px
4  height: 100px;
5  background-colour: blue;
6}

Copilot Chatで /fix と送信すると、次のようにセミコロンの抜けやプロパティのミスなどを自動で修正してくれます。

1/* 修正後 */
2.example {
3  width: 100px;
4  height: 100px;
5  background-color: blue;
6}

4./optimize: コードの最適化

1. 改善したいコードを選択。
2. Copilot Chat を開き、/optimize と送信。

1/* 最適化前：冗長なプロパティ */
2button {
3  display: block;
4  display: flex;
5  color: black;
6  color: #000000;
7  padding: 10px;
8  padding-left: 10px;
9}

Copilot Chatで /optimize と送信すると、次のように重複プロパティを削除し、無駄を減らします。

1/* 最適化後：無駄を削減 */
2.button {
3  display: flex;
4  color: #000;
5  padding: 10px;
6}

5./doc: ドキュメントコメント生成

1. ドキュメントが必要な関数を選択。
2. Copilot Chat で、/doc と送信。

1function add(a, b) {
2  return a + b;
3}

Copilot Chatで /doc と送信すると、次のように読み手に優しいコメントを付けてくれる便利な機能です。

1/**
2 * Adds two numbers together.
3 *
4 * @param {number} a - The first number.
5 * @param {number} b - The second number.
6 * @returns {number} The sum of the two numbers.
7 */
8function add(a, b) {
9  return a + b;
10}

まとめ

GitHub Copilot Chat は、開発者のコーディング体験を大きく向上させる強力なツールです。本記事で紹介したスラッシュコマンドを活用することで、コードの理解、エラー修正、最適化、テスト作成、ドキュメント生成といった作業を効率よく進められます。特に、/explain でコードの意図を確認したり、/fix でエラーを素早く修正したりと、日々の開発をサポートしてくれる便利な機能が満載です。

今回紹介したもの以外にも、Copilot Chat には便利なコマンドがたくさんあります。ぜひ Copilot Chat を使いこなして、より快適で生産的な開発環境を手に入れてください！

参考サイト

https://qiita.com/kohashi/items/05bc01cbb3a74fdc7227