SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発用エディタのド定番「VSCode」を使いこなそう

GitHub CopilotでAIコーディングをはじめよう

開発用エディタのド定番「VSCode」を使いこなそう 第13回

  • X ポスト
  • このエントリーをはてなブックマークに追加

チャット(Copilot Chat)

 チャットは、Copilotの基本中の基本といえる機能です。セカンダリサイドバーにチャットビューを表示して、プロンプト(質問)を入力することでCopilotに質問したり、コードを生成してもらえる機能です。

 チャットビューは、キャプションバーにある[Copilot]アイコンをクリックし、メニューから[チャットを開く]を選択するか、[Ctrl]+[Command]+[I](macOS)/[Ctrl]+[Alt]+[I](Windows)キーを押して表示させることができます(図2)。

図2:チャットビュー
図2:チャットビュー

チャットモード

 チャットには、3つのモードがあります。

 以前はAskモードが既定でしたが、現在ではより進んだAgentモードが既定となっています。モードは、チャットビュー下のプロンプトパネルから、「Agent」などをクリックしてプルダウンから選択できます(図3)。

図3:チャットモードの選択
図3:チャットモードの選択
  • Agent:Agentモード
  • Ask:質問するモード
  • Edit:ワークスペース内のファイルの編集のためのモード

 AgentモードはVS Code 1.99でサポートされた新しいモードです。このモードについては、次回で取り上げます。

[NOTE]最初の質問とサインイン

 VS Codeから最初の質問を投げると、サインインされていない場合にはサインインを求めてきます。[Sign in]をクリックすると、ブラウザが開いてCopilotへのサインインを求められるので、GitHubアカウントとパスワードを指定してサインインを済ませてください。サインインが済めばVS Codeに戻ってきて、サインイン前に投げた質問が送信されます。

モデルの選択

 チャットでは、どのAIモデルを使うか最初に選択しておきます(図4)。質問の性質に対しての適不適、性能とコストに差があるからです。

図4:Askモードでモデルを選択
図4:Askモードでモデルを選択

 標準モデル(Standard Models)はプレミアムリクエストを消費しませんが、プレミアムモデル(Premium Models)はモデルに応じたプレミアムリクエストが消費されるので注意が必要です。図4で「1x」などと表示されているのがプレミアムリクエストの消費数です。

 Claude Sonnet 3.7 Thinkingはコストが高く、o3-miniとo4-miniはコストが比較的低いのが分かります。表3は、AskモードとEditモードで使えるモデルです(Agentモードで使えるモデルは、次回で触れます)。

表3:Ask/Editモードで使えるモデル
標準モデル GPT-4.1、GPT-4o
プレミアムモデル Claude Sonnet 3.5/3.7/3.7 Thinking/4、Gemini 2.0 Flash/2.5 Pro、o3-mini/o4-mini

 本記事では、プレミアムリクエストを消費しないGPT-4oを使っていきます。

Askモード

 Askモードは、Copilot Chatの機能を使ったモードです。モデルを選択したら、早速質問を投げることができます。

 Askモードは文字通り「尋ねる」モードなので、何でも聞いてみるとよいでしょう。アプリの開発手順を聞いてもよいですし、具体的なコードを作成してもらっても構いません。Copilotに慣れるまでは、このAskモードをいろいろ触ってみるのがおすすめです。

 ただ、これだけではブラウザで使うMicrosoft Copilotと変わりません。実際には、以下で紹介するコンテキストを活用して、編集中のファイルをレビューしてもらったり、改善案を提案してもらったりといった用途での活用が考えられます。

コンテキストのアタッチ

 チャットには、「コンテキスト」と呼ばれるファイルなどをアタッチして、モデルがそれを使って回答を導く機能が用意されています。コンテキストのアタッチは、プロンプトパネルにある[コンテキストの追加…]をクリックして選択するか、ファイルなどをチャットビューにドラッグ&ドロップするか、コピー&ペーストを利用するなど、いくつかの方法があります(図5)。

図5:コンテキストのアタッチ
図5:コンテキストのアタッチ

 コンテキストにできるコンテンツは表4の通りです。

表4:コンテキストに指定できるコンテンツ
コンテキスト 概要
ファイルとフォルダー 単独のファイルか、フォルダーをアタッチする
スクリーンショット ウィンドウ 現時点でのVS Code画面をアタッチする
手順 カスタム指示のための命令ファイルをアタッチする。例えば.github/instructionsフォルダ以下にMarkdownファイルを作成し、そこに条件(glob形式が可能)にマッチする特定のファイルに対して行うべきこと(「変数名や関数名は意味のある名前を使ってください。」など)を記述しておく
問題 問題ビューの内容をアタッチする。問題の内容を解説してもらうなど
記号 ワークスペース中のシンボル(変数、関数名など)を指定してアタッチする。回答を特定のシンボルにフォーカスさせるなど
ツール ツールをアタッチする。例えばrunCommandsツールで、ターミナルでコマンドを実行することを指示するなど

 最もよく使うのはファイルのアタッチでしょう。VS Code 1.98からは、画像ファイルのアタッチも可能になりました(Copilot Vision)。これについては次回で紹介します。

 なお、図5において、エディタービューにて開かれているファイル(create_table.sql)が、自動的に「現在のファイルコンテキスト」として認識されています。この機能により、ある質問を投げても、現在のファイルコンテキストを利用した回答となることがあります。

 例えば図6は、「テーブルの作成構文について説明して。」と投げてみた結果です。

図6:コンテキストを利用した回答
図6:コンテキストを利用した回答

 このように、開いているファイルの内容を使ってテーブル作成構文を説明してくれました。必要に応じてファイルをアタッチし、その内容についてレビューさせてみるなどの活用が考えられます。なお、現在のコンテキストを無効にするには、「現在のファイル」の右にある目のアイコンをクリックします。

特殊なキーワード

 プロンプトには、特殊な意味を持つキーワードを含めることができます。

  • #メンション:コンテキストをプロンプトに含める
  • @メンション:チャットの参加者を指定する
  • /コマンド:よく使われる指示へのショートカット

 #メンションは、プロンプトで「#」を入力することで一覧から選択できます(図7)。#changesでコードの変更点をコンテキストに加えたり、#editFilesでワークスペースで編集中のファイルをコンテキストとすることができます。

図7:#メンション
図7:#メンション

 @メンションも、プロンプトで「@」を入力することで一覧から選択できます(図8)。これは、質問を投げかける架空の相手です。@githubを指定してGitHubについて質問したり、@vscodeを指定してVS Codeの機能について質問したりするときに有効です。

図8:@メンション
図8:@メンション

 /コマンドも、プロンプトで「/」を入力することで一覧から選択できます(図9)。主に、表5に挙げるコマンドが用意されています。/コマンドは、例えば「/explain」の「説明する」のようによく使う指示のショートカットです。

図9:/コマンド
図9:/コマンド
表5:/コマンド
コマンド 概要
/createWorkspace 新しいワークスペースのスケルトンコードを生成する
/explain 選択したコードがどのように機能するかを説明する
/extApi VS Codeの拡張開発について質問する
/fix 選択されたコードの問題の修正を提案する
/help Copilot Chatの使い方を学ぶ
/search ワークスペース検索のクエリパラメータを生成する
/simplify 選択したコードを簡素化する
/tests 選択したコードの単体テストを生成する
/clear セッションをクリアする
/save チャットをプロンプトファイルに保存する

 モデルの選択やキーワードは、クイックチャットやインラインチャットでも同様に利用できます。

クイックチャット

 クイックチャットは、コマンドパレットに質問を入力し、そのままポップアップ内で回答を得るシンプルなチャットです(図10)

 [Copilot]アイコンのメニューから[クイックチャット]を選択するか、[Option]+[Shift]+[Command]+[L]/[Ctrl]+[Shift]+[Alt]+[L]キーを押してコマンドパレットに質問文を入力すれば、回答はそのまま質問文の下に表示されます。

図10:クイックチャットによる回答
図10:クイックチャットによる回答

 回答下部にある[コマンドパレットに表示]をクリックすると、その質問と回答をコマンドパレットから呼び出せるようになります。図11では、「Code>リリースノートの表示」として登録されるので、「Code」と入力してフィルターするなどすれば、いつでも質問と回答を呼び出せて便利です。

図11:コマンドパレットからクイックチャットの結果を呼び出す
図11:コマンドパレットからクイックチャットの結果を呼び出す

インラインチャット

 インラインチャットは、エディタービューにチャットウインドウを開き、カーソル位置においてコード入力などの操作を行える機能です(図12)。

 [Copilot]アイコンのメニューから[エディター内でのインライン チャット]を選択するか、[Command]+[I]/[Ctrl]+[I]キーを押します。インラインチャットはエディタービューで実行する性質から、その場で入力させたいコードをチャットで指示する際に使います。

 例えば、「日本のことわざ5個の配列を作成して表示。」と入力すれば、生成されたコードが仮入力されるので、[同意する]で確定、[閉じる]でキャンセルできます。

図12:インラインチャットで生成されたコード
図12:インラインチャットで生成されたコード

Editモード

 Editモードは、Copilot Editsの機能を使ったモードです。Askモードに対し、その名の通りコードの変更に徹したモードです。チャットビューのプロンプトにおいて、[Edit]を選択することでEditモードとなります(図13)。

図13:チャットビュー(Editモード)
図13:チャットビュー(Editモード)

 EditモードとAskモードの違いは、プロンプトが直接ワークスペース内のファイルに作用する点です。例えばSQL文を作成することを想定し、以下のプロンプトを投げてみます(図14)。

以下のテーブルを作成するSQLを作成してください。
・id、name、birth、is_activeをフィールドに持つテーブル
・idを主キーとしてauto incrementにする
・nameは文字列型で100文字
・birthは日付型
・is_activeは真偽型
図14:Editモードでプロンプト
図14:Editモードでプロンプト

 create_table.sqlファイルが作成され、エディタービューに表示されます。ここで内容を見て、問題なさそうなら[保持]を、取り消したければ[元に戻す]をクリックします(図15)。なお、この操作はコード部分にある[✓][アンドゥ]のクリック、プロンプト上にあるボタンをクリックしても同様です。

図15:Editモードで作成されたコード
図15:Editモードで作成されたコード

次のページ
Copilot Next Edit Suggestions(NES)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/22053 2025/08/19 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング