GitHub Copilot のコード開発機能を調べる

  • 8 分

Visual Studio Code には、GitHub Copilot と GitHub Copilot Chat という 2 つの拡張機能を使用して GitHub Copilot が実装されています。 アプリケーションを拡張または改善する提案を生成するこれらの拡張機能により、開発者の生産性が向上します。 各拡張機能には、コードをより効率的に開発するのに役立つ一連の機能が用意されています。

  • GitHub Copilot 拡張機能は、エディターまたはコード コメントに入力したコードを使用して、コード補完提案を生成します。
  • GitHub Copilot Chat 拡張機能は、スマート アクション メニューからのチャットによる対話と選択に基づいてコード提案を生成します。

注

このモジュールでは、GitHub Copilot 拡張機能を使用して、新しいコードの機能とアプリケーションを開発します。 GitHub Copilot を使用して単体テストの作成と既存のコードの改善を行う 2 個の別個のモジュールがあります。

Visual Studio Code 内の GitHub Copilot ツール

Visual Studio Code は、以下の GitHub Copilot および GitHub Copilot Chat 機能への簡単なアクセスを提供しています。

  • コード行補完: コード行補完を使用して、コードをより効率的に記述します。
  • インライン チャット: コーディング中に、エディターから直接インライン チャットの会話を開始してヘルプを表示します。
  • チャット ビュー: いつでも役立つ AI アシスタントをサイドで開きます。
  • クイック チャット: 簡単な質問をして、作業内容に戻ります。
  • スマート アクション: スマート アクションを実行して、プロンプトを記述しなくても特定のタスクを完了します。

GitHub Copilot 拡張機能は、AI の機能を Visual Studio Code 環境に取り込みます。

GitHub Copilot でコード行入力候補を使用してコードを生成する

GitHub Copilot では、コードを入力するときにコード行の入力候補が生成されます。 アプリケーションに既に存在するコードは、GitHub Copilot が正確な提案を生成するために使用するコンテキストを提供します。 たとえば、顧客の支出を処理するクラスに取り組んでいるとします。 このクラスでは、すべての顧客の支出を含むリストを使用します。 すべての支出の合計を返すメソッドを作成する必要があります。 メソッド シグネチャの入力を開始すると、GitHub Copilot によって、コード行の入力候補提案が生成されます。

コードベースでコード行が補完されたスクリーンショット。

提案に問題がない場合は、Tab キーを押すか、[ 承諾] を選択します。 オートコンプリートは時間を節約し、変数やその他のコード要素の名前を提示して、コードを正確に記述するのに役立ちます。

コード行の入力候補を使用して、コードを構築するためのさまざまなオプションを表示することもできます。 たとえば、メソッドの呼び出しステートメントの入力を開始すると、GitHub Copilot はさまざまなメソッド オーバーロードを実装する提案を提供します。 提案を一通り確認して、意図に一致するオプションを受け入れることができます。 すべての入力候補を拒否することもできます。 このプロセスは、さまざまなコーディング スタイルと手法をすばやく調べるために役立ちます。

GitHub Copilot では、コード コメントからコード行の入力候補も生成されます。 たとえば、作成するメソッドを説明するコメントを入力した場合、GitHub Copilot はメソッド シグネチャと実装に関する入力候補を生成します。

コメントに基づくコード行の入力候補を示すスクリーンショット。

提案されたコード入力候補には、既存のコードからの情報と、メソッドを説明するコード コメントが使用されていることに注意してください。

開発者は、コード入力候補を使用して、初期コード構造の開発を加速します。

GitHub Copilot Chat を使用してコードを生成する

GitHub Copilot Chat は、チャット インターフェイスとスマート アクションを使用してコードを作成するのに役立ちます。 たとえば、GitHub Copilot Chat に新しいメソッドの作成を求めるプロンプトを入力すると、GitHub Copilot は 1 つ以上のメソッド シグネチャと実装の提案を提供します。 提案を確認してから受け入れるか破棄することで、コードの初期バージョンをより迅速かつ正確に作成できます。

注

Visual Studio Code の GitHub Copilot Chat 拡張機能には、ユーザー入力を処理するチャット インターフェイスが含まれています。 このトレーニングでは、チャット セッション中に指定する入力のことを、"質問" と "プロンプト" という用語で表します。

GitHub Copilot Chat が特に役に立つのは、見慣れない新しいライブラリ、フレームワーク、API などのリソースを実装するコードを開発する必要がある場合です。 要件を説明するプロンプトを送信すると、GitHub Copilot Chat によって、目標を達成する方法を示す提案が生成されます。 提案を確認すると、新しいリソースを実装する方法を知ることもできます。

明確な範囲と意図を含むプロンプトや質問を GitHub Copilot Chat に提供すると、生成される応答が改善されます。 コンテキストを提供し、要件を説明する質問を会話形式で行うことができます。 提供した情報が GitHub Copilot Chat によって使用され、ニーズを満たし、コーディング スタイルに合ったコード提案が生成されます。

チャット参加者、スラッシュ コマンド、チャット変数を使用して、プロンプトのコンテキストを明確にすることができます。

  • @workspace や @terminal などのチャット参加者は、GitHub Copilot Chat が質問のコンテキストを理解するために役立ちます。
  • /explain や /new などのスラッシュ コマンドは、Copilot Chat が質問の意図や目的を理解するために役立ちます。
  • #file や #editor などのチャット変数は、Copilot Chat が質問のより大きなコンテキストを考慮する際に、特定の何かに焦点を合わせるために役立ちます。

これらの特殊な記述子を使用すると、GitHub Copilot Chat がより正確で便利な応答を生成するのに役立ちます。

チャット参加者とスラッシュ コマンドを組み合わせて、特定のアクションを実行できます。 たとえば、次のプロンプトを使用して、新しい C# コンソール アプリケーションをスキャフォールディングできます: @workspace /new console application in C#。 このプロンプトには、GitHub Copilot Chat が目的のタスクを実行するのに役立つチャット参加者 (@workspace) とスラッシュ コマンド (/new) が含まれます。

コンソール アプリのスキャフォールディングに使用されるチャットを示すスクリーンショット。

GitHub Copilot では、より複雑なワークスペースをスキャフォールディングできます。 たとえば、次のプロンプトでは、Express フレームワーク、Pug テンプレート エンジン、TypeScript を使用する Node.js アプリケーションのワークスペースが作成されます: @workspace /new Node.js Express Pug TypeScript。

チャット ビューを使用して GitHub Copilot Chat でコードを生成する

Visual Studio Code のチャット ビューでは、コードの開発に役立つ AI アシスタントにアクセスできます。 Visual Studio Code 環境を離れることなく、AI アシスタントに質問したり、AI アシスタントからサポートを受けることができます。 チャット ビューは、コードを開発しているときや、難しいコーディングの問題を解決するためのアプローチを検討しているときにサポートを提供します。 チャット ビューを使用して、既存のコードに関する質問、エラーやコーディング ロジックに関するヘルプの取得、プロジェクト リソースの使用に関する情報の取得もできます。 チャット ビューは、新しいコーディング手法の学習、さまざまなコーディング スタイルの検索、コーディング スキルの向上に役立ちます。

チャット ビューは、Visual Studio Code のコード エディターの右側にある独自のパネルで開きます。 チャット ビューを開くには、Visual Studio Code コマンド センターから [ チャットを開く ] を選択するか、 Ctrl + Alt + I キーボード ショートカットを使用します。

Visual Studio Code のチャット ビュー

Visual Studio Code でさらに画面領域が必要な場合は、チャット ビューのコンテキスト メニューから [新しいウィンドウでチャットを開く] を選択して、別の ウィンドウでチャット ビューを開くことができます。

Visual Studio Code の質問に応答するチャット ビューを示すスクリーンショット。

GitHub Copilot Chat は、次の要素を含む豊富で対話型の結果を提供します。

  • 単純なテキスト。 たとえば、質問に対する自然言語の応答を提供するため。
  • 画像。 たとえば、図やスクリーンショットを表示するため。
  • ボタン。 たとえば、アクションをトリガーするため。
  • 参照。 たとえば、詳細情報を確認できる URI (Uniform Resource Identifiers) など。
  • ファイル ツリー たとえば、チャット参加者が新しいワークスペースの作成を提案するときにワークスペース プレビューを表示するためなどです。

次の例は、Express アプリの作成に使用したプロンプトに対する応答を示しています。 GitHub Copilot Chat には、簡単なテキストの説明、推奨されるワークスペース構造を示すツリー ビュー、新しいワークスペースの作成に使用できるボタンが用意されています。

[ワークスペースの作成] ボタンが表示された [チャット] ビューを示すスクリーンショット。

GitHub Copilot では、会話の履歴が保持されます。 この履歴は、GitHub Copilot Chat によって提案される応答とフォローアップの質問を改善するために使用されます。

チャット ビューでコード ブロックを管理する

質問によっては、GitHub Copilot Chat が応答でソース コードを返す場合があります。 ソース コードはコード ブロックとして表示され、いくつかの異なる方法でコードを管理できます。

コード ブロックの上にマウス ポインターを置くと、コード ブロックを管理するためのオプションが表示されます。 初期オプションは、 エディターでの適用、 カーソル位置の挿入 (Ctrl + Enter キー)、 およびコピーです。

チャット ビューのコード ブロックを示すスクリーンショット。

[その他の操作] (...) ボタンには、 ターミナルに挿入するオプション (Ctrl + Alt + Enter キー) と [新しいファイルに挿入] オプションが表示されます。

コード ブロックにコマンドが含まれていることが Copilot Chat によって検出された場合は、ターミナル に挿入 (Ctrl + Alt + Enter) を使用して統合ターミナルで直接実行できます。 このオプションは、アクティブなターミナルを作成または開き、コマンド テキストを挿入して、ユーザーがすぐに実行できるように準備します。

チャット ビューの [ターミナルに挿入] オプションを示すスクリーンショット。

インライン チャットを使用して GitHub Copilot Chat でコードを生成する

インライン チャット インターフェイスを使用すると、コードに集中しながら、強力な AI 機能にアクセスできます。 コード エディターで作業している場合は、キーボードの Ctrl + I キー を押してインライン チャットを開くことができます。

インライン チャットは、次の方法で使用できます。

  • 既存のコードについて質問する。
  • 既存のコードを変更または置換する。
  • 新しいコードを生成する。

インライン チャットを使用して新しい機能を作成する

インライン チャット インターフェイスを使用して、新しいコード機能を開発できます。 たとえば、インライン チャットを使用して、新しいユーザー インターフェイス コンポーネント、新しい API エンドポイント、または新しいデータ処理パイプラインを生成できます。

次の手順を実行することで、インライン チャットを使用して新しいコード機能を作成できます。

  1. エディターでコードを選択します。

  2. キーボードの Ctrl + I キー を押して、インライン チャット インターフェイスを開きます。

  3. 作成する機能を説明するプロンプトを入力します。

  4. Copilot Chat によって提供される提案を確認し、必要に応じてプロンプトを改善します。

  5. 満足のいくものになったら、提案を受け入れます。

次の例は、インライン チャットを使用して新しいメソッドを作成する方法を示しています。

メソッドの作成に使用されるインライン チャット セッションを示すスクリーンショット。

インライン チャットを使用して正規表現を作成する

正規表現は、文字列内の文字の組み合わせに一致させるために使用されるパターンです。 正規表現は複雑で理解が難しい場合があるため、記述するのが難しいと考える開発者もいます。

インライン チャット インターフェイスを使用すると、正規表現をすばやく正確に生成できます。 たとえば、インライン チャットを使用して、メール アドレス、電話番号、郵便番号、およびその他のデータ パターンを検証するための正規表現を生成できます。

次の手順を実行することで、インライン チャットを使用して正規表現を作成できます。

  1. エディターでコードを選択します。

  2. キーボードの + キーを押して、インライン チャット インターフェイスを開きます。

  3. 検証する必要があるデータ パターンを説明するプロンプトを入力します。

  4. Copilot Chat によって提供される提案を確認し、問題がなければ提案を受け入れます。

次の例は、インライン チャットを使用してメール アドレスの正規表現を作成する方法を示しています。

正規表現の作成に使用されるインライン チャット セッションを示すスクリーンショット。

常に、GitHub Copilot Chat によって生成された応答を確認することが重要です。

Copilot チャットは、次の正規表現を使用してメール アドレスを検証できることを示しています。^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$

少し時間を取って提案された正規表現を評価してみましょう。

^:この記号は、行の先頭を示します。 メール アドレスはここから開始する必要があります。

[a-zA-Z0-9_.+-]+: 式のこの部分は、角かっこ ([]) 内の 1 つ以上 (+) の文字と一致します。 文字には、小文字 (a ～ z)、大文字 (A ～ Z)、数字 (0 ～ 9)、またはアンダースコア (_)、ピリオド (.)、プラス (+)、ハイフン (-) などの特殊文字を使用できます。

@: 式のこの部分は、"at" 記号 (@) です。 これは、メール アドレス内のリテラル文字です。

[a-zA-Z0-9-]+: 式のこの部分は最初の部分に似ていますが、メールのドメイン名の部分用です。 1 つ以上の小文字、大文字、数字、またはハイフン (-) 文字を含めることができます。

\.: 式のこの部分はリテラルなピリオド (.) 文字です。 ドメイン名とドメイン拡張機能を分離します。

[a-zA-Z0-9-.]+: 式のこの部分は、ドメイン拡張機能と一致します。 1 つ以上の小文字、大文字、数字、ハイフン (-)、またはピリオド (.) 文字を含めることができます。

$:この記号は、行の終了を示します。 メール アドレスはここで終了する必要があります。

全体として、この正規表現はメール アドレスを検証するための出発点として適していますが、いくつかの制限があり、すべての有効なメール形式に対応していない場合があります。 より包括的なパターンや、重要なアプリケーション用の専用のメール検証ライブラリの使用を検討することをお勧めします。

まとめ

GitHub Copilot 拡張機能は、開発者がコードをより迅速に、より少ないエラーで記述するのに役立ちます。 GitHub Copilot 拡張機能は、エディターまたはコード コメントに入力したコードを使用して、コード補完提案を生成します。 GitHub Copilot Chat 拡張機能は、スマート アクション メニューからのチャットによる対話と選択に基づいてコード提案を生成します。