GitHub Copilotのコード開発機能を確認する

  • 8 分

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

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

注

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

Visual Studio CodeのGitHub Copilot ツール

Visual Studio Codeでは、次のGitHub CopilotとGitHub Copilotチャット機能に簡単にアクセスできます。

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

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

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

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

コードに基づくコード補完の例を示すスクリーンショット。

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

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

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

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

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

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

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

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

注

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

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

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

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

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

これらの特化した記述子を使用すると、GitHub Copilot チャットでより正確で便利な応答を生成できます。

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

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

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

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

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

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

Visual Studio Code のチャット ビューの「ようこそ」メッセージを示すスクリーンショットです。

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

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

GitHub Copilot チャットは、次の要素を含む豊富でインタラクティブな結果を提供します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  4. GitHub Copilot チャットによって提供される提案を確認し、必要に応じてプロンプトを絞り込みます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

GitHub 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 チャット拡張機能は、選択したコードに対して動作するチャット操作またはスマート アクションに基づいてコード提案を生成します。