すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

お役立ち情報

更新日:

GitHub Copilot Chatの使い方を徹底解説!

ぴっかちゃん
ぴっかちゃん

GitHub Copilot Chatは、GitHub Copilotにコーディング関連の質問をすることができる機能です。

GitHub Copilot Chatとは?

GitHub Copilot Chatは、GitHubが提供するAIベースのコード補完および支援ツールの一部です。GitHub Copilot自体は、OpenAIのCodexモデルを利用して、プログラミング中のコード補完や提案を行うツールです。Copilot Chatは、これにチャットインターフェースを追加し、ユーザーが自然言語で質問を投げかけ、具体的なコードや解決策を受け取ることができる機能です。

導入方法

GitHub Copilot Chatを使うにはGitHub Copilotを導入している必要があります。こちらの記事を参考に導入してください。

それでは、VSコードにGithub Copilot Chatの拡張機能をインストールします。
VSコードの上にあるナビゲーションメニューの「表示」をクリックすると、メニューの下の方に「拡張機能」と出てくるので、クリックしましょう。

拡張機能のメニューを表示

「拡張機能」をクリックすると、以下の画面のようにサイドバーが表示されます。サイドバーの検索窓に「GitHub Copilot Chat」と入力して「インストール」を押しましょう。

GitHub Copilot Chatのインストール

インストールが完了すれば、右下に「Sign in to Github」と書かれたボタンが表示されます。こちらのボタンをクリックし、GitHubにサインインしていない方はサインインしましょう。

GitHub Sign inボタン

GitHub Copilot Chatがインストールできれば、左のアクティビティバーに以下の画像のようにチャットアイコンが表示されます。

チャットアイコンの表示画像

左のアクティビティバーが表示されていない方は以下の画像のように、「表示 > 外観 > アクティビティバーの位置 > 側面」をクリックし、アクティビティバーを表示するようにしましょう。

アクティビティバーの表示

チャットアイコンをクリックして、以下の画像のようにチャットボットが表示されれば完了です。

チャットアイコンクリック後のナビゲーションバーの表示

基本的な使い方

それでは、GitHub Copilot Chatの使い方を確認していきましょう。以下のソースコードは有名なFizzBuzzアプリケーションです。以下のコードを使ってGitHub Copilot Chatの使い方を確認していきます。

FizzBuzzアプリケーション
1
2
3
4
5
6
7
8
9
10
11
12
13
numbers = [*1..100]

numbers.each do |number|
  if (number % 3 == 0 && number % 5 == 0)
    puts 'fizzbuzz'
  elsif number % 3 == 0
    puts 'fizz'
  elsif number % 5 == 0
    puts 'buzz'
  else
    puts number
  end
end

チャット

左側のチャットボットを使用して、開いているファイルに関する質問をしたり、チャットでやり取りを行うことができます。以下の動画のように聞きたいことを投げかけると、少し時間が経ってからGitHub Copilotが答えてくれます。

チャットボットのやり取り

またコードの提案をしてもらうことができます。
コードの提案をしてもらい、そのコードをファイルに反映させるには通常であればコピペをする必要がありますが、提案されたコードブロックをホバーすると表示されるスパークルをクリックすると、提案されたコードをファイルに反映させることができます。

スパークル

スパークルをクリックすると提案されたコードがハイライトされた状態になるので、「提案を受け入れる」をクリックするとハイライトされたコードが反映されます。

コードの反映

続けてコードを提案してもらい、同じようにスパークルをクリックすると追加されたコードのみがハイライトされ、自動でファイルに追加することができるので非常に便利な機能です。

自動で反映

スパークルの右にあるアイコンはAIカーソルを挿入するための機能です。
クリックするとファイルにカーソルが当たっている箇所から、提案されたコードを全てペーストしてくれます。

AIカーソルの挿入

クリックするとこのようにカーソルがある箇所からコードを追加することができます。

コードの挿入

一番右のアイコンは提案されたコードをコピーするためのアイコンになります。

コードのコピー

インラインチャット

特定のコードに対してそのコード上で質問することが可能です。
以下の動画のように、対象コードをドラッグして選択し、「インラインチャットを開始する」を選択すると、そのコード上でチャットを展開できます。

インラインチャットの動画

スラッシュコマンドの使い方

よくある質問内容は「スラッシュコマンド」にまとめられています。スラッシュコマンドを使用して質問すると、GitHub Copilotから適切な回答を受け取りやすくなります。

この章ではよく使うスラッシュコマンドを解説していきます。

/help

GitHub Copilotに関するヘルプを表示するコマンドになります。スラッシュコマンドについての説明などをみたい場合に使用しましょう。

/helpコマンド

@workspace

@workspaceは、スラッシュコマンドの前に入力するコマンドで、チャットで質問する際に現在のプロジェクト全体を対象としてcopilotに指示を与える機能です。通常の会話では、開いているファイルやその周辺のコンテキストが優先されますが、@workspaceを使用すると、開いているファイルだけでなく、同じリポジトリに含まれる他のファイルやコード全体を考慮して提案や回答を行います。

この機能を使うことで、より文脈に沿ったコード提案を受け取ったり、プロジェクト内の特定の部分に関連する情報を得ることができます。

基本的に、現在開いているワークスペース(つまり、VS Codeなどのエディタで開かれているプロジェクトのルートディレクトリ)が対象となります。

workspace

例えば以下のように質問をすると、プロジェクト内の全てのファイルを検証して、提案に必要なファイルを自動で参照し、回答を作成してくれます。

質問の例

参照されたファイルをクリックすると、ファイルを開くことができます。

また、@workspaceをつけなくても送信ボタン横の矢印をクリックすると表示される、「@workspaceに送信」を選択して送信すると自動で@workspaceがついた状態で質問をしてくれます。

ショートカット

もしくは画像にあるようにcommandキーを押しながらエンターキーを押してプロンプトを送信しても同じことができます。

ChatGPTのようなAIではこのようにアプリケーション全体を検証して回答してもらうことはできないため、GitHub Copilot Chatを使う上での一番のメリットかもしれません。

/explain

/explainコマンドは、特定のコードスニペットやファイルの内容について説明してもらうために使用します。コードの内容がわからない時や、どのような動作をするコードなのかを調べたいときに役立つコマンドです。特に、他人が書いたコードや既存のコードベースを読む際に非常に便利です。

たとえば、次のように質問します。

具体例
1
/explain このコードは何をしていますか?

その後に、対象のコードを貼り付けます。

具体例
1
2
3
4
/explain このJavaScriptコードは何をしていますか?
function sum(a, b) {
  return a + b;
}

すると以下のようにコードの解説をしてくれます。

コードの解説

以下のように説明してもらいたいコードをハイライトして/explainコマンドだけでも使うことができます。

コマンドのみ

このようにハイライトし、/explainコマンドを実行するだけで解説をしてくれるので、非常に便利なコマンドです。/explainコマンドの前に@workspaceをつけてからコマンドを打つと、プロジェクト全体を検証した上で解説をしてもらえます。

/tests

/testsコマンドは、特定のコードに対してテストコードを自動生成するために使用されます。この機能は、単体テストや統合テストなどを簡単に作成できるため、開発者が手動でテストを記述する手間を省き、コードの品質を維持するのに非常に役立ちます。

以下のsumメソッドに対するRSpec形式のテストを生成する例です。

/testsの例
1
2
3
4
/tests このsumメソッドに対するRSpecのテストを書いてください。
def sum(a, b)
  a + b
end

すると以下のように自動でテストコードを作成してくれます。

テストコードの例

以下のように、テストコードを作成したいコードをハイライトし、/testsコマンドだけでも使用することができます。

コマンドのみ

作成が面倒なテストコードもこのコマンドのみでCopilotが作成してくれるので、開発効率をかなり向上させることができます。

/fix

/fixコマンドは、コード内のエラーやバグを自動的に検出し、それに基づいて修正を提案してくれます。

/fixコマンドを使用する際には、通常はプロンプトを追加する必要はありません。/fixコマンド自体が、コード内のエラーや改善点を検出して修正案を提案するために十分な指示になります。

/fixコマンドの使い方
1
/fix

ただし、特定の修正を求めたい場合や、修正の方向性を指示したい場合には、/fixコマンドの後にプロンプトを追加することも可能です。たとえば、次のように使うことができます。

対象のコード
1
2
3
4
# Rubyのコード例
def divide(a, b)
  a / b
end
プロンプト
1
/fix ゼロ除算エラーを処理してください

この場合、/fixコマンドはゼロ除算エラーに特化した修正案を提示してくれます。

特定の指示

しかし、特に指示を出さなくても、/fixコマンドは基本的なエラーや改善点を自動的に検出して処理します。シンプルに使いたい場合には、プロンプトを省略しても問題ありません。

また、以下のようにエラーが発生している箇所をハイライトして、fixコマンドのみで使用することもできます。

コマンドのみ

/new

/newコマンドは、新しいコードの生成や既存コードのリファクタリングをしてくれる機能です。このコマンドを使用すると、指定した要件に基づいて、全く新しいコードスニペットを提案したり、既存のコードを改善したりすることができます。

以下のような計算クラスを例に考えてみましょう。

具体例
1
2
class Calculator
end

/newコマンドを使い、Calculatorクラスに2つの数値を足した結果を返すメソッドを作ってみます。

プロンプト
1
/new Calculatorクラスに2つの数値を加算するメソッドを追加してください

このように指定した指示通りに自動でコードを生成してくれます。

自動でコード生成

また作成したコードに対してリファクタリングを行うこともできます。

プロンプト
1
/new addメソッドに引数が整数であることをチェックする機能を追加してください

リファクタリングの例

このように作成した機能に対してリファクタリングすることができます。

GitHub Copilotは一度の提案で100点満点のコードを出すことは少ないです。最初は70点ぐらいのコードが提案されることが多いので、提案されたコードを何度も見直し、深掘りしながらCopilotと一緒に100点満点のコードを目指して改善していくことが大切です。

/doc

/docコマンドは、ドキュメントを生成するための機能です。このコマンドを使用すると、コードに関するコメントやドキュメントを自動的に生成することができます。特に、メソッドやクラス、関数の説明や、使用方法を詳細に記述したいときに便利です。

メソッドに対してドキュメントを作成する例を見てみましょう。

使用例
1
2
3
4
5
class Calculator
  def add(a, b)
    a + b
  end
end

/docコマンドを使い、addメソッドにドキュメントを作成してもらいます。

プロンプト
1
/doc addメソッドに関するドキュメントを追加してください

この例の場合、以下のようにドキュメントを自動で作成してくれます。

/docの例

このようにaddメソッドに関するドキュメントを作成してくれました。
ドキュメント内の@paramは引数に関するドキュメントで型や引数の説明をしています。
@returnはメソッドの返り値のドキュメントで、型や返ってくる内容の説明です。

/clear

/clearコマンドはCopilot Chatとのやり取りを初期化するためのものです。チャットの数が多くなり、煩わしく感じたときに実行しましょう。

clearコマンドの動画

この記事のまとめ

  • GitHub Copilot Chatはコーディング関連の質問をすることができる機能です。
  • スラッシュコマンドを使うことで適切な回答を受け取りやすくなります。
  • コードの生成やバグ修正も自動で行ってくれるため、開発時間の短縮ができます。