VS Code で GitHub Copilot を使い始める

Visual Studio Code には、GitHub によって強化された豊富な AI 機能が搭載されています。このチュートリアルでは、エディターでコーディング中に AI を使用する方法、コードに関する質問をする方法、および複数のファイルにわたって変更を加える編集セッションを開始する方法について説明します。

このチュートリアルでは JavaScript と TypeScript を使用していますが、Copilot は他の多数の言語やさまざまなフレームワークでもトレーニングされていることに注意してください。

前提条件

お使いのマシンに VS Code がインストールされていること。 Visual Studio Code のウェブサイトからダウンロードしてください。
GitHub Copilot へのアクセス。 VS Code で GitHub Copilot をセットアップするには、次の手順に従ってください。

ヒント
Copilot サブスクリプションをお持ちでない場合、または組織からシートが割り当てられていない場合でも、VS Code 内から直接 Copilot に無料でサインアップして、月ごとの補完およびチャットインタラクションの制限を取得できます。

最初のコード補完を取得する

VS Code の AI 機能を使い始めるにあたって、特別な操作は必要ありません。エディターでコードを入力すると、Copilot はコードをより効率的にコーディングできるように、エディターにコード候補 (コード補完) を自動的に提示します。

VS Code を開き、新しい JavaScript ファイル calculator.js を作成します。
JavaScript ファイルで、次のコードの入力を開始します
```
class Calculator
```
入力すると、Calculator クラスの実装に関するコード候補が、グレーの薄暗いテキスト (ゴーストテキスト) で自動的に表示されることに注意してください。大規模言語モデルは非決定的であるため、受け取る候補は正確には異なる場合があります。
候補を受け入れるには、Tab キーを押します。

おめでとうございます！AI 駆動の最初のコード候補を受け入れました。入力を続けると、Copilot はそれに応じてコード候補を更新します。
特定の入力に対して、複数の候補がある場合があります。クラス内に次のコードを入力して、factorial メソッドを追加します
```
factorial(n) {
```
エディターで候補の上にカーソルを合わせると、複数の候補があることに気付くでしょう。

矢印コントロールを使用するか、キーボードショートカットを使用して、次 (⌥] (Windows、Linux Alt+])) または前 (⌥[ (Windows、Linux Alt+[)) の候補を表示できます。

AI 駆動のコード補完は、ボイラープレートコードや反復コードの生成に役立ち、開発フローを維持し、より複雑なコーディングタスクに集中できるようにします。

エディターインラインチャットを使用して基本的なウェブサーバーを生成する

チャットベースの AI を使用すると、自然言語を使用してコードに関する質問をしたり、コードを生成するように依頼したりできます。エディターインラインチャットは、エディター内に直接チャットインターフェースを提供するため、アクティブなエディター内のコードについてプロンプトできます。

エディターインラインチャットを使用して、基本的な Express ウェブサーバーを生成してみましょう。

まず、新しい TypeScript ファイル server.ts をワークスペースに追加します。
次に、キーボードで ⌘I (Windows、Linux Ctrl+I) を押して、エディターインラインチャットを起動します。

エディターインラインチャットは、アクティブなエディター内のコードについて質問したり、コードを生成したりできるチャットインターフェースを提供します。
チャット入力フィールドに「簡単な express ウェブサーバーを追加」と入力し、Enter を押してプロンプトを送信します。

コードの変更がエディターに直接ストリーミングされ始めることに注意してください。応答は、シンプルな Node.js Express ウェブサーバーの実装です。
Accept を選択するか、⌘Enter (Windows、Linux Ctrl+Enter) を押して、提案されたコード変更を適用します。

おめでとうございます！チャットと自然言語を使用してコードを生成するために、エディターインラインチャットを使用しました。

AI チャットを通じてコードをリファクタリングする

エディターインラインチャットを使用して、エディター内の既存のコードをリファクタリングまたは改善することもできます。

生成されたウェブサーバーは現在、静的なポート番号 3000 を使用していることに注意してください。これを環境変数を使用するように変更しましょう。

エディターで、server.ts ファイルの 3000 ポート番号を選択し、⌘I (Windows、Linux Ctrl+I) を押してインラインチャットを開きます。
チャット入力フィールドに「ポート番号に環境変数を使用する」と入力し、Enter を押してチャットリクエストまたはプロンプトを送信します。

既存のコードが更新され、ポート番号に環境変数が使用されるようになったことに注目してください。
Accept を選択するか、⌘Enter (Windows、Linux Ctrl+Enter) を押して、提案されたコード変更を適用します。
提案された変更に満足できない場合は、プロンプトを変更して反復処理を続け、別の解決策を得ることができます。たとえば、ポート番号に別の環境変数名を使用するように依頼します。

一般的なプログラミングの質問にチャットを使用する

新しいコードベースで作業している場合、または新しいプログラミング言語を探索している場合は、より一般的なコーディングに関する質問が出てくる可能性があります。チャットを使用すると、質問の履歴を追跡するチャット会話をサイドで行うことができます。

タイトルバーの Copilot メニューからチャットビューを開くか、⌃⌘I (Windows、Linux Ctrl+Alt+I) を押します。
チャットはさまざまな方法で使用できます。質問するには、モードドロップダウンから Ask を選択します。

後のステップでは、チャットを使用して編集セッションを開始し、複数のファイルにわたって変更を加えます。

ヒント
ドロップダウンから別のモデルを選択することで、チャットで使用される言語モデルを変更できます。
チャット入力フィールドに「再帰とは？」と入力し、Enter を押してチャットプロンプトを送信します。

チャットの応答に、Markdown テキストやコードブロックのような豊富な結果が含まれていることに注目してください。
チャットチュートリアルの手順に従って、チャットを使用して特定のコードベースに関する質問をする方法も学んでください。

複数のファイルにわたって編集を行う

複数のファイルへの編集を伴う可能性のある大規模なコード変更の場合は、AI 駆動の編集セッションを開始できます。チャットビューでコードブロックを受信する代わりに、編集はワークスペース全体のファイルに直接適用されます。

編集セッションを開始して、ウェブサーバーの HTML ファイルの内容を返すようにしましょう。

チャットビューのモードドロップダウンから Edit を選択します。
server.ts ファイルがチャットプロンプトのコンテキストとして自動的に追加されることに注目してください。

ファイルをプロンプトのコンテキストとして追加することで、AI モデルはより関連性の高いコード編集を提供できます。必要に応じて、コンテキストを追加ボタンを使用して、プロンプトにコンテキストを追加します。
チャット入力フィールドに「静的な HTML ページをホームページとして返し、実装します。」と入力し、Enter を押して新しい編集セッションを開始します。

複数の編集がプロジェクトに適用されることに注目してください。server.ts ファイルは、新しく作成された index.html HTML ページを返すようになりました。
結果に満足している場合は、保持を選択して、提案されたすべての変更を適用します。

エディターオーバーレイコントロールを使用して、編集されたさまざまなファイル間を移動し、それらを受け入れるか拒否することもできます。

AI でコーディングエラーを修正する

インライン候補やチャット会話以外にも、VS Code の開発フロー全体でさまざまな領域で AI 機能を利用できます。VS Code ユーザーインターフェースの スパークル アイコンを通じて AI 機能の存在に気付くかもしれません。

そのような場所の 1 つはエディターで、コンパイラーエラーのために赤い波線が表示されるたびに表示されます。AI を使用してコーディングエラーを修正してみましょう。

以前に作成した server.ts TypeScript ファイルをエディターで開きます。

import express from 'express'; ステートメントに赤い波線が含まれていることに注目してください。赤い波線にカーソルを合わせると、スパークルアイコンが表示されるのがわかります。
スパークルアイコンを選択して AI コードアクションを表示し、次に Copilot を使用して修正 を選択します。
エディターインラインチャットが表示され、エラーメッセージと問題を修正するための解決策が事前に入力されていることに注目してください。

チャット応答から直接、ターミナルに挿入ボタンを選択して、提案されたコマンドをターミナルにコピーできます。