VS Code で GitHub Copilot の使用を開始する

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

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

前提条件

お使いのコンピューターに VS Code がインストールされていること。Visual Studio Code Web サイトからダウンロードしてください。
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 駆動のコード補完は、定型コードや反復的なコードの生成に役立ち、開発フローを維持し、より複雑なコーディングタスクに集中できるようになります。

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

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

エディターのインラインチャットを使用して、基本的な Express Web サーバーの生成を支援しましょう。

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

エディターのインラインチャットは、アクティブなエディターのコードに関する質問をしたり、コードを生成したりできるチャットインターフェースを提供します。
チャット入力フィールドに「add a simple express web server」と入力し、Enter キーを押してプロンプトを送信します。

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

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

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

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

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

エディターで、server.ts ファイルのポート番号 3000 を選択し、⌘I (Windows、Linux Ctrl+I) を押してインラインチャットを開きます。
チャット入力フィールドに「use an environment variable for the port number」と入力し、Enter キーを押してチャットリクエストまたはプロンプトを送信します。

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

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

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

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

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

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

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

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

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

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

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

ファイルをプロンプトのコンテキストとして追加することで、AI モデルはより関連性の高いコード編集を提供できます。オプションで、コンテキストを追加ボタンでプロンプトにさらにコンテキストを追加します。
チャット入力フィールドにReturn a static html page as the home page and implement it.と入力し、Enter キーを押して新しい編集セッションを開始します。

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

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

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

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

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

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

import express from 'express'; ステートメントに赤い波線が含まれていることに注意してください。赤い波線にカーソルを置くと、きらめくアイコンが表示されます。
きらめくアイコンを選択して AI コードアクションを表示し、Copilot を使用して修正を選択します。
エディターのインラインチャットが起動し、エラーメッセージと問題を修正するソリューションが事前に設定されていることに注目してください。

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