編集

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 (単純な Express Web サーバーを追加)」と入力し、Enter を押してプロンプトを送信します。

コードの変更がエディターで直接ストリーミングされ始めることに注目してください。応答は、単純な Node.js Express Web サーバーの実装です。
Accept を選択するか、⌘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 を押してチャット要求またはプロンプトを送信します。

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

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

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

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

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

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

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

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

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

編集セッションを開始して、Web サーバー用に HTML ファイルのコンテンツを返すようにしましょう。

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

プロンプトにファイルをコンテキストとして追加することで、AI モデルはより関連性の高いコード編集を提供できます。オプションで、Add Context ボタンを使用するか、プロンプト入力フィールドに # とファイル名を入力して、プロンプトにコンテキストを追加します。
チャット入力フィールドに Return a static html page as the home page and implement it (静的な HTML ページをホームページとして返し、それを実装する) と入力し、Enter を押して新しい編集セッションを開始します。

プロジェクトに複数の編集が適用されることに注意してください。index.html が作成され、server.ts ファイルがこのファイルを返すように更新されます。
結果に満足したら、チャットビューで Keep を選択して、提案されたすべての変更を適用します。

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

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

インラインの提案やチャットの会話とは別に、AI 機能は VS Code の開発者フローのさまざまな領域で利用できます。VS Code のユーザーインターフェイスのキラキラアイコンを通じて AI 機能の存在に気づくかもしれません。

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

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

import express from 'express'; ステートメントに赤い波線が含まれていることに注意してください。赤い波線の上にカーソルを置くと、キラキラアイコンが表示されます。
キラキラアイコンを選択して AI コードアクションを表示し、Fix using Copilot を選択します。
エディターのインラインチャットが、エラーメッセージと問題の解決策が事前に入力された状態で表示されることに注意してください。

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

次のステップ

おめでとうございます、これで AI を使ってコーディングを強化しました！このチュートリアルでは、VS Code の AI 機能を正常に使用して、エディターでコード補完を取得し、チャットを使用して質問したりコード編集を生成したりしました。

チャットについてさらに学ぶには、Copilot チャットのチュートリアルに進んでください。