に参加して、VS Code の AI 支援開発について学びましょう。

VS Code でチャットを使用する

Visual Studio Code のチャットを使用して、コードベースについて質問したり、自然言語を使用してプロジェクト全体を編集したりできます。チャットは、質問をする場合から、複数ファイルの編集を行う場合、自律的なコーディングワークフローを開始する場合まで、ユースケースに合わせて最適化されたさまざまなモードで動作できます。

なぜ VS Code でチャットを使用するのか?

チャットを使用すると、AI と継続的なチャット会話をすることができます。フォローアップの質問をしたり、リクエストを繰り返し行ったりできます。VS Code のチャットでできることの例をいくつか示します。

  • 新しいアプリの足場を構築する - 「TypeScript と Tailwind CSS を使用して新しい React アプリを作成する」
  • 機能を追加する - 「ログインページを追加し、#styles.css に基づいてスタイルを設定する」
  • コードを理解する - 「この認証ミドルウェアがどのように機能するかを説明する」
  • 問題をデバッグする - 「このループで null 参照が発生するのはなぜですか?」
  • パフォーマンスを最適化する - 「このデータベースクエリの効率を改善するのを手伝ってください」
  • テストを生成する - 「calculateTotal 関数の単体テストを作成する」

前提条件

  • マシンに VS Code がインストールされていること。Visual Studio Code Web サイトからダウンロードしてください。

  • GitHub Copilot へのアクセス。これらの手順に従って、VS Code で GitHub Copilot を設定してください。

    ヒント

    Copilot サブスクリプションをお持ちでない場合は、VS Code 内から直接 Copilot を無料で利用登録でき、月ごとの補完とチャットインタラクションの制限が設けられます。

VS Code でチャットにアクセスする

VS Code では、自然言語チャットをさまざまな方法で使用できます。それぞれが特定のユースケースとタスクに最適化されています。

エクスペリエンス ユースケース ユーザーエクスペリエンス
チャットビュー
⌃⌘I (Windows、Linux Ctrl+Alt+I)
サイドの専用ビューで、継続的で多段階のチャット会話を行います。さまざまなチャットモードを切り替えて、質問したり、ファイルをまたいでコードを編集したり、自律的なコーディングワークフローを開始したりできます。 Screenshot of the Chat view
インラインチャット
⌘I (Windows、Linux Ctrl+I)
エディター (エディターインラインチャット) または統合ターミナル (ターミナルインラインチャット) から直接チャット会話を開始して、その場で提案を取得します。 Screenshot of the Inline chat
クイックチャット
⇧⌥⌘L (Windows、Linux Ctrl+Shift+Alt+L)
簡単な質問をして、行っていた作業に戻ります。 Screenshot of the Quick Chat

対応するキーボードショートカットを使用するか、VS Code のタイトルバーの [チャット] メニューから、各チャットエクスペリエンスにアクセスできます。

Screenshot of the Copilot Chat menu in the VS Code Command Center

チャットモードを選択する

チャットモードとは、計画、質問、自律的なコーディングタスクの実行など、特定のタスクに合わせて VS Code のチャットをカスタマイズするための、事前定義された構成またはペルソナです。

チャットモードを切り替えるには、チャットビューを開き (⌃⌘I (Windows、Linux Ctrl+Alt+I))、チャットモードドロップダウンリストから目的のモードを選択します。

Screenshot showing the Chat view, highlighting the chat mode dropdown list.

VS Code には、質問編集エージェントの 3 つの組み込みチャットモードが付属しています。新しい機能の計画や実装オプションの調査など、特定のシナリオに合わせて独自のチャットモードを定義できます。VS Code のチャットモードの詳細については、こちらをご覧ください。

言語モデルを変更する

VS Code は、さまざまな組み込み言語モデルを提供しており、選択できます。一部のモデルは高速コーディングタスクに最適化されており、他のモデルは低速の計画タスクや推論タスクに適しています。チャット入力フィールドのモデルピッカーを使用して、Copilot が応答を生成するために使用するモデルを変更できます。

Screenshot of the chat model picker in the Chat view, showing a dropdown list of available models.

他のモデルプロバイダーからのモデルを追加して、チャットで使用することもできます。他のプロバイダーからのモデルの使用方法の詳細については、こちらをご覧ください。

利用可能なモデルのリストは、Copilot サブスクリプションによって異なり、時間の経過とともに変更される場合があります。利用可能な言語モデルの詳細については、GitHub Copilot のドキュメントの利用可能な言語モデルを参照してください。

チャットプロンプトを送信する

VS Code でチャットリクエストを行うには、チャット入力フィールドに自然言語のプロンプトを入力します。選択したチャットモードに応じて、プロンプトは適切に処理されます。たとえば、質問モードでは、応答は

チャット応答には、Markdown テキスト、コードブロック、ボタン、ファイルツリーなどの豊富なコンテンツが組み合わせて含まれる場合があります。

Screenshot of the Chat view in the Secondary Side Bar showing the response to 'explain recursion'.

より関連性の高い応答を得たり、ワークスペース内の特定のファイルやアーティファクト (テストの失敗やターミナル出力など) を参照したりするには、関連するコンテキストアイテムを #-メンションすることで、チャットプロンプトにコンテキストを追加します。

ヒント

chat.math.enabled 設定 (プレビュー) を使用して、チャット応答での数式レンダリングを有効にします。

チャットコンテキストを追加する

VS Code は、自然言語プロンプトに基づいて、チャットリクエストの意図と範囲を判断しようとします。より関連性の高い応答を得るために、ファイル、テスト結果、ターミナル出力など、追加のコンテキストをチャットプロンプトに提供します。

チャットビューのコンテキストを追加ボタンを使用するか、#-メンションを入力して、チャットプロンプトにコンテキストを追加します。たとえば、#codebase と入力してコードベース全体の検索を実行したり、#<file | folder | symbol> と入力してワークスペース内の特定のファイル、フォルダー、またはシンボルを参照したりできます。チャット入力フィールドに # と入力して、コンテキストアイテムのリストを表示します。

Screenshot of the Chat view with the context menu open.

ツールを提供する MCP サーバーまたは拡張機能をインストールしている場合は、チャットプロンプトで #-メンションすることで、これらのツールを直接参照することもできます。たとえば

  • summarize #fetch code.visualstudio.com/updates: 組み込みツール fetch を使用して Web ページのコンテンツを取得する
  • what is terminal suggest #githubRepo microsoft/code: 組み込みツール githubRepo を使用して GitHub リポジトリでコード検索を実行する。

プロンプトで # の後にツール名を入力することで、エージェントモードツールを直接参照することもできます。これはすべてのチャットモード (質問、編集、エージェントモード) で実行できます。たとえば、#fetch ツールを使用して Web ページのコンテンツをチャットプロンプトのコンテキストとして追加したり、#githubRepo を使用して GitHub リポジトリでコード検索を実行したりできます。

チャットプロンプトにコンテキストを追加するの詳細については、こちらをご覧ください。

プロンプトの例

一般的な技術トピックについて質問する
  • 「リンクされたリストとは何ですか?」
  • 「人気のある Web フレームワーク トップ 10」
コードベースを理解する
  • 「#codebase での認証の仕組みを説明する」
  • 「データベースの接続文字列はどこで設定されていますか? #codebase」
  • 「この #codebase をビルドするにはどうすればよいですか?」
  • 「#getUser はどこで使用されていますか? #usages」
アプリに新機能を追加する
  • 「アバウトページを作成し、ナビゲーションバー #codebase に含める」
  • 「アドレス情報更新用の新しい API ルートを #codebase に追加する」
  • 「ログインボタンを追加し、#styles.css に基づいてスタイルを設定する」
ワークスペースの問題を修正する
  • 「#problems の問題を修正する」
  • 「失敗しているテストを修正する #testFailure」
Web からコンテンツを参照する
  • 「React 18 で 'useState' フックを使用するにはどうすればよいですか? #fetch https://18.react.dev/reference/react/useState#usage」
  • 「アドレス情報を取得する API エンドポイントを構築し、#githubRepo contoso/api-templates のテンプレートを使用する」

プロンプトの例の詳細については、GitHub ドキュメントのCopilot Chat Cookbookを参照してください。

ヒント

チャット入力フィールドに /help と入力して、Copilot とチャットとの連携方法についてヘルプを得ることができます。

ビジョン

チャットはビジョン機能をサポートしており、画像をチャットプロンプトのコンテキストとして添付し、それについて質問することができます。たとえば、コードブロックのスクリーンショットを添付して説明を求めたり、UI のスケッチを添付してエージェントモードに実装を依頼したりできます。

ヒント

Web ブラウザからチャットビューに画像をドラッグアンドドロップして、コンテキストとして追加できます。

チャット履歴

チャットセッションで複数のチャットプロンプトを繰り返し送信すると、VS Code はチャットプロンプトと応答の履歴を現在のチャットプロンプトのコンテキストとして使用します。これにより、コンテキストを繰り返すことなく、フォローアップの質問をしたり、以前の質問を明確にしたりできます。たとえば、「これは...とどう違うのですか」、「テストケースを追加してください」、「もっと詳しく説明してください」などと質問できます。

いつでも、チャットビューの新しいチャット (+) ボタン (⌘N (Windows、Linux Ctrl+N)) を使用して、新しいチャットセッションを作成できます。これは、別のトピックに移行し、以前のコンテキストと履歴を避けたい場合に便利です。

チャットセッションの履歴を表示するには、チャットビューのチャットを表示...ボタンを選択するか、コマンドパレットでチャット: チャットを表示...コマンドを使用します。履歴エントリを選択すると、チャットビューでそのチャットセッションが開き、会話を続けることができます。

Screenshot of the Chat view with the Show Chats... button highlighted

コマンドパレットのチャット: チャットをエクスポート...コマンドを使用して、チャットセッションのすべてのプロンプトと応答を JSON ファイルでエクスポートできます。特定のチャットプロンプトまたは応答を Markdown 形式でクリップボードにコピーするには、メッセージを右クリックしてコピーを選択します。チャットセッション全体をコピーするには、チャットビューを右クリックしてすべてコピーを選択します。

以前のチャットリクエストを編集する

チャットリクエストの編集機能は、VS Code バージョン 1.102 以降で利用できます。

アクティブなチャットセッションで以前のチャットリクエストを編集できます。これは、プロンプトを微調整したり、間違いを修正したりする場合に便利です。チャットリクエストの編集は、リクエストを元に戻し、編集されたプロンプトで新しいリクエストを送信することと同じです。

以前のチャットリクエストを編集すると、次の手順が実行されます。

  1. 編集されたリクエストと、それ以降のすべてのリクエストおよび応答が会話履歴から削除されます。
  2. これらのリクエストによって行われた編集は、リクエストが行われる前の状態に戻されます。
  3. 編集されたリクエストが会話履歴に追加され、新しい応答のために言語モデルに送信されます。

chat.editRequests 設定で以前のチャットリクエストの編集を構成できます。

  • inline: チャットビューでリクエストを選択すると、その場で編集可能になります。Escape を使用して編集モードを終了します。
  • hover: チャットリクエストにカーソルを合わせ、編集アイコン (鉛筆) を選択すると、その場で編集可能になります。Escape を使用して編集モードを終了します。
  • input: チャットリクエストにカーソルを合わせ、編集アイコン (鉛筆) を選択すると、チャット入力フィールドでリクエストを編集できます。
  • none: チャットビューでのチャットリクエストの編集を無効にします。

チェックポイントでチャットリクエストを元に戻す

チェックポイントは、VS Code リリース 1.103 以降で利用できます。

チャットチェックポイントは、ワークスペースの状態を以前の時点に復元する方法を提供し、チャットのやり取りが複数のファイルにわたる変更をもたらした場合に特に役立ちます。

チェックポイントが有効になっている場合、VS Codeはチャットのやり取り中の重要なポイントでファイルの自動スナップショットを作成し、チャットリクエストによって行われた変更が期待どおりでなかったり、別のアプローチを試したい場合に、既知の良好な状態に戻ることができます。

チェックポイントを有効にするには、chat.checkpoints.enabled設定を構成します。

チェックポイントを復元する

チェックポイントを復元すると、VS Code はワークスペースをそのチェックポイント時の状態に戻します。つまり、そのチェックポイント以降にファイルに加えられたすべての変更は元に戻されます。

ワークスペースを以前のチェックポイントに復元するには

  1. チャットビューで、チャットセッション内の以前のチャットリクエストに移動します。

  2. チャットリクエストにカーソルを合わせ、チェックポイントを復元を選択します。

    Screenshot of the Chat view, showing the Restore Checkpoint action in the Chat view.

  3. チェックポイントを復元し、その時点以降に行われたファイル変更を元に戻すことを確認します。

    チャットリクエストが会話履歴から削除され、ワークスペースファイルがチェックポイント時の状態に復元されることに注意してください。

復元後にやり直す

以前のチェックポイントに復元した後、元に戻された変更をやり直すことができます。これは、誤ってチェックポイントに復元してしまった場合に役立つことがあります。

チェックポイントを復元した後で変更をやり直すには、チャットビューでやり直すを選択します。

Screenshot of the Chat view, showing the Redo button to redo the changes after restoring a checkpoint to a previous state.

チェックポイントでのファイル変更を表示する

各チャットリクエストの影響を理解し、どのチェックポイントに復元するかを簡単に決定できるように、chat.checkpoints.showFileChanges 設定を有効にします。これにより、各チャットリクエストの最後に変更されたファイルのリストと、各ファイルで追加および削除された行数が表示されます。

Screenshot of the Chat view, showing the file changes at the end of a chat request.

エディタータブまたは別のウィンドウでチャットを開く

チャットセッションを別のエディタータブとして、または別のフローティングウィンドウとして開くことができます。この機能により、複数のチャットセッションを同時に開くことができます。

チャットビューで、右上隅の ... アイコンを選択し、エディターでチャットを開くまたは新しいウィンドウでチャットを開くを選択します。次のスクリーンショットは、フローティングウィンドウで実行されているチャットビューを示しています。

Screenshot of the Chat view, highlighting the three-dot menu that contains the Open in Editor and Open in New Window options. The desktop shows a floating window with a chat session.

デフォルトでは、チャットセッションはコンパクトモードで開かれ、タイトルバーやその他の UI 要素は非表示になります。フローティングウィンドウのタイトルバーのコンパクトモードアイコンを選択して、コンパクトモードと通常モードを切り替えます。

必要に応じて、常に最前面モードを有効にして、チャットビューを常に他のウィンドウの最前面に表示します。

VS Code のフローティングウィンドウの詳細については、こちらをご覧ください。

音声インタラクションを使用する

VS Code Speech 拡張機能によって提供される VS Code の音声制御機能を使用すると、音声を使用してチャット会話を開始できます。

  • 音声を使用してチャットプロンプトをディクテーションする
  • 「Hey Code」音声コマンドを使用して、Copilot Chat との音声セッションを開始する
  • 「ホールドトゥースピーク」モードを使用して、チャットの音声入力を高速化する

VS Code で音声インタラクションを使用する方法の詳細については、こちらをご覧ください。

チャットデバッグビュー

チャットデバッグビューは、AI リクエストと応答の詳細を表示できる専用のビューです。各チャットリクエストについて、システムプロンプト、ユーザープロンプト、および言語モデルに送信されるコンテキストの詳細を表示できます。言語モデルからの詳細な応答、およびチャットリクエストの一部として呼び出されたツールからの応答を表示できます。

チャットデバッグビューを開くには、コマンドパレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) から開発者: チャットデバッグビューを表示コマンドを実行します。

Screenshot of the Chat Debug view, showing the details of a chat request and response.

コマンドラインからチャットを開始する

VS Code CLI の chat サブコマンドを使用して、コマンドラインから直接チャットセッションを開始できます。これにより、現在の作業ディレクトリで、指定したプロンプトでチャットセッションを開くことができます。

たとえば、次のコマンドは現在のディレクトリのチャットを開き、「すべての型付けされていない変数を検索して修正する」と質問します。

code chat Find and fix all untyped variables

chat サブコマンドには、次のコマンドラインオプションがあります。

  • -m--mode <mode>: チャットセッションに使用するチャットモード。利用可能なオプション: askeditagent、またはカスタムモードの識別子。デフォルトは agent です。
  • -a--add-file <path>: チャットセッションにファイルをコンテキストとして追加します。
  • --maximize: チャットセッションビューを最大化します。
  • -r--reuse-window: チャットセッションに最後にアクティブなウィンドウを使用します。
  • -n--new-window: チャットセッション用に空のウィンドウを開きます。

chat サブコマンドは、コマンドの最後に - を渡すことで、stdin からの入力パイプもサポートしています。たとえば

python app.py | code chat why does it fail -

プライバシーと透明性

プライベートリポジトリのワークスペース検索機能をさらに有効にするには、追加のアクセス許可が必要です。これらのアクセス許可がまだないことが検出された場合、起動時に要求されます。付与されると、将来のためにセッションが安全に保存されます。

Modal window asking for additional authentication for a private repository.

セキュリティ、プライバシー、透明性の詳細については、GitHub Copilot Trust Center を参照してください。

よくある質問

チャットビューが自動的に開かないようにするにはどうすればよいですか?

デフォルトでは、チャットビューはセカンダリサイドバーで開きます。ワークスペースのチャットビューを閉じると、VS Code はこの設定を記憶し、次回そのワークスペースを開いたときにチャットビューを自動的に開きません。

チャットビューから直接デフォルトの可視性を変更できます。

  1. チャットビューを開きます (⌃⌘I (Windows、Linux Ctrl+Alt+I))。
  2. チャットビューの右上隅にある ... アイコンを選択します。
  3. ビューをデフォルトで表示を選択して、チャットビューの自動開閉を有効または無効にします。

workbench.secondarySideBar.defaultVisibility 設定でセカンダリサイドバーのデフォルトの可視性を制御することもできます。チャットビューが自動的に開かないようにするには、hidden に設定します。

異なるチャットモードをどのように選択すればよいですか?

異なるチャットモードは、異なるユースケースに最適化されています。

  • エディターインラインチャットを使用して、アクティブなエディターで直接質問したり、編集したりします。これは、コードの変更を行ったり、アクティブなファイルに限定された質問をしたりする場合に便利です。

  • 質問モードを使用して、コードベースやテクノロジーの概念について質問します。応答にはコードの提案が含まれる場合があり、それらはコードベースに手動で個別に適用できます。変更はコードベースに自動的に適用されません。

  • 編集モードを使用して、チャットプロンプトに基づいてコードベース内の複数のファイルを直接編集します。プロンプトに関連するコンテキストとファイルを提供します。

  • エージェントモードを使用して、自律的なコーディングワークフローを開始します。これにより、AI は関連するコンテキストとファイルを自律的に判断し、リクエストを完了するために実行する必要があるタスクを判断します。その後、望ましい結果を達成するために独立して反復し、発生した問題を修正します。エージェントモードは、ターミナルコマンドの実行、テストケースの検証、API へのアクセスなど、特殊なタスクを実行するために、拡張機能または MCP サーバーからのツールを呼び出すことができます。

追加リソース

GitHub Copilot および GitHub Copilot のドキュメントで VS Code での使用方法の詳細について読むことができます。

または、YouTube のVS Code Copilot シリーズをご覧ください。ここでは、Copilot を PythonC#JavaPowerShellC++ などで使用するための入門コンテンツやプログラミング固有の動画を見つけることができます。

次のステップ

© . This site is unofficial and not affiliated with Microsoft.