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

完了済み

GitHub CopilotはVisual Studio Codeに組み込まれており、AI を利用した支援を開発環境に直接取り込みます。 GitHub Copilotは、アプリケーションを拡張または改善する提案を生成することで、開発者の生産性を向上させます。 GitHub Copilotには、コード候補を生成する主な方法が 2 つあります。

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

注

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

Visual Studio CodeのGitHub Copilot ツール

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

  • コード行補完: コード行補完を使用して、コードをより効率的に記述します。 これには、カーソルでの ゴースト テキスト の提案や 、次の編集候補 (NES) が含まれます。これは、次の編集の場所と必要な内容を予測します。
  • インライン チャット: コーディング中に、エディターから直接インライン チャットの会話を開始してヘルプを表示します。
  • チャット ビュー: いつでも役立つ AI アシスタントをサイドで開きます。 チャット ビューでは、エージェント ピッカーを使用して、GitHub Copilotの動作方法を選択します。会話型ヘルプには Ask、Plan はコードを記述する前に実装計画を調査および設計し、複数のファイル間で自律的に動作するように <>Agent。
  • クイック チャット: 簡単な質問をして、作業内容に戻ります。 Ctrl + Shift + Alt + L キーボード ショートカットを使用してクイック チャットを開くか、Visual Studio Codeタイトル バーの [チャット] メニューから選択します。
  • スマート アクション: スマート アクションを実行して、プロンプトを記述しなくても特定のタスクを完了します。

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

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

GitHub Copilotでは、コードを記述するときに 2 種類のインライン候補が生成されます。

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

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

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

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

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

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

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

開発者は、ゴースト テキスト補完を使用して、初期コード構造の開発を加速します。

次の編集候補 (NES) では、次に何が行われるのかだけでなく、ファイル内の他の場所にある場合でも、次の編集 が どこで行われる必要があるかを予測することで、インライン提案をさらに行います。 変数の名前を変更したり、データ型を変更したり、ロジック エラーを修正したりすると、NES は、コードの一貫性を保つために必要な後続の編集を提案します。 エディターの余白矢印は、提案が使用可能であることを示します。 Tab キーを押して移動し、もう一度 Tab キーを押して受け入れます。 次のユニットでは、ゴーストテキストの補完と次の編集提案の両方について詳しく説明します。

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

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

注

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

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

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

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

  • チャット参加者である @terminal などは、GitHub Copilot Chat が質問のコンテキストを理解するのに役立ちます。
  • /explain や /new などのスラッシュ コマンドは、GitHub Copilot Chatが質問の意図や目的を理解するのに役立ちます。
  • チャット変数 (#file、#editor など) は、質問のより大きなコンテキストを検討する際に特定の事項に集中 Copilot Chatするのに役立ちます。

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

スラッシュ コマンドを使用して、Copilot Chatで特定のアクションを実行できます。 たとえば、次のプロンプトを使用して、新しい C# コンソール アプリケーションをスキャフォールディングできます。

/new console application in C#

このプロンプトでは、スラッシュ コマンド (/new) を使用して、GitHub Copilot Chat目的のタスクを実行できるようにします。

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

/new Node.js Express Pug TypeScript

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

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

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

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 キー) と [新しいファイルに挿入] オプションが表示されます。

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

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

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

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

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

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

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

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

インライン チャットを使用して新しいコード機能を作成するには:

  1. 新しいコードを挿入するエディターにカーソルを置きます。

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

  3. 作成する機能を説明するプロンプトを入力します。 例えば次が挙げられます。

    Create a method that reads a list of sales records and calculates the total revenue by product category.
    
  4. 結果が意図と一致しない場合は、提案を確認し、プロンプトを絞り込みます。

  5. [ 承諾] を選択して提案を適用します。

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

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

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

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

  1. 検証を追加するエディターでコードを選択します。

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

  3. 検証する必要があるデータ パターンを説明するプロンプトを入力します。 例えば次が挙げられます。

    I want to create a regular expression to validate email addresses.
    
  4. 提案を確認し、問題がなければ [同意する ] を選択します。

まとめ

GitHub Copilotは、開発者がコードをより迅速かつ少ないエラーで記述するのに役立ちます。 エディターまたはコード コメントに入力したコードを使用してインライン コード補完候補が生成され、選択したコードに対して動作するチャット操作またはスマート アクションに基づいてコード候補が生成されます。