VS Codeのエージェントモードを拡張するには、を試してください！

Visual Studio Code と GitHub Copilot

2023年3月30日 by Chris Dias, @chrisdias

このブログ記事はAIが書いたものではありませんが、AIはあなたの開発体験を素晴らしいものにしてくれるでしょう。

注: Visual Studio Code における GitHub Copilot の最新の体験について知りたい場合は、「GitHub Copilot in VS Code」のトピックをご覧ください。そこでは、Copilot のエディター統合や、インラインチャット、専用のチャットビュー、クイックチャットなどの Copilot Chat の機能についての詳細が記載されています。

今日、人工知能（AI）をめぐっては多くの話題、興奮、そしていくつかの懸念があります。進歩はほぼ毎日起きており、追いつくのが難しいほどです。しかし一度試してみると、100万人以上の Copilot ユーザーが日々目にしていることをすぐに実感するでしょう。この技術は、特に OpenAI の GPT-3.5/4 のような大規模言語モデル（LLM）においては、期待を裏切りません。

この記事では、VS Code における AI の背景を少し紹介し、GitHub Copilot を活用したエキサイティングな新しい体験をいくつかお見せし、そして私たちが今後どのように物事を進めていくかについて少しだけお話ししたいと思います。

GitHub Copilot "V1"

Microsoft の開発者向け AI サービスは GitHub Copilot です。開発ライフサイクル全体にわたる GitHub のビジョンをまだご覧になっていない場合は、こちらの素晴らしいブログ記事をご覧ください。

Copilot 拡張機能が初めてリリースされてから1年以上が経ちました。Oege De Moor と彼の GitHub チームは OpenAI と協力し、特に OpenAI の Codex モデルを使用して、開発に LLM を大規模に活用する最初の事例をもたらしました。

Editor with Copilot generated ghost (faded) text suggestions

Copilot は、周辺のコードの文脈に基づいて「ゴーストテキスト」として提案を提供することで、あなたが書いているコードに対するリアルタイムのヒントを提供します。意図をコメントとして書いたり、わかりやすい関数名を使用したりすると、Copilot はこれらのヒントを使って、単語ごと、行ごと、あるいはブロックごとにコードを自動生成できます。

これは驚くほど効果的な体験です。ゴーストテキストがうまく機能することが多く、すぐに「Tab-Tab-Tab」というスムーズな開発フローでコードを書くことができるようになります。

そして、これはほんの始まりに過ぎませんでした。

エディター内チャット

AI が開発プロセスに浸透するのは時間の問題だとわかっていました。私たちは GitHub Next チームと Copilot や Copilot Labs 拡張機能に取り組んできましたが、2022年11月の ChatGPT のリリースにより、そのタイムテーブルは大幅に加速しました。

VS Code チームは、AI をより深く VS Code に統合する方法を探るための社内ハッカソンを開催し、名前の変更やリファクタリングの改善、例に基づくコード変換、自然言語を使ったファイル glob パターンや正規表現の作成方法など、多くのクールなアイデアを思いつきました。

これらのアイデアも興味深いものでしたが、私たちはチャット体験を中心に考え続けました。私たちは少なからず懐疑的でした。私たちの生活に、また新たなチャット体験が本当に必要だろうか？VS Code はエディターであり、私たちの仕事はユーザーを「ゾーン」に導き、次のユニコーン企業を生み出すために集中している間、邪魔なものを取り除くことです。

興味深いと感じた探求の一つは、チャットをエディターに直接組み込むことでした。これが最初のプロトタイプです。

Prototype of a chat input in the editor

デザインを繰り返すうちに、このユーザーモデルには利点があることに気づきました。キーボードから簡単に呼び出せ、コードから離れることなく、出力はコード（そしてコードのみ）です。

以下の例では、まず users 配列を選択し、macOS で Cmd+I（Windows/Linux では Ctrl+I）を押してチャット入力を表示させました。次に Copilot に username フィールドを firstName と lastName の両方に分割するように依頼し、最後に [Inline Diff] をクリックして Copilot が行った変更を確認しました。

Inline change with preview of update

コメントや長すぎる関数名を使って Copilot に意図を伝える必要はありません。Cmd+I を押して、やりたいことを説明するだけです。Copilot が作業している間、あなたはゾーンにとどまり続けることができます。

チャットビューの採用

ChatGPT を巡る興奮が高まるにつれて、カスタムのチャットビューを持つ社内外の拡張機能の数も増えていきました。私たちはこれらがスケールしないことを懸念していました。Web ビューでキーバインドやテーマのような基本的なものをサポートするのは難しく、コードブロックに Monaco エディターを使用している場合、何百ものインスタンスにスケールさせるのは非常に困難です。言うまでもなく、それらのエディターインスタンスには拡張機能のサポートがありません。その結果、私たちは GitHub Copilot チームと密接に連携し、VS Code のコアにチャットビューを構築しました。

時間が経つにつれ、当初の躊躇にもかかわらず、完全なチャットビュー体験は私たちを魅了し始めました。つまり、こんな挨拶で一日を始めたくない人なんているでしょうか？

A GitHub Copilot conversation within an extension's chat view

私たちはチャットビューの利点をますます実感し始めました。

ブラウザベースのチャットに対する統合された体験の最も明白な価値は、モデルにコンテキストを提供できることであり、会話の土台を固め、より良い回答を提供できることです。例えば、ブラウザベースの ChatGPT に、複数のファイルにまたがるコードを最適化するように簡単に頼むことはできません。VS Code はワークスペースについてすでに多くを知っています。これは、ファイル間のリファクタリング、[すべての参照を検索]、[定義へ移動] などができる仕組みだからです。重要な情報をプロンプトに責任を持って埋め込むことで、モデルはより関連性の高い回答を返すことができ、最終的には複数のファイルに依存関係を持つコードの最適化やリファクタリングを Copilot に依頼できるようになります。

プログラミングに関する多くの質問への回答は、しばしば複数のステップを含みます。どれだけ多くのブログ記事が手順を説明しているかを考えてみてください。チャットビューは、この種の対話に適しています。デバッグが良い例です。正直に言って（そして私たちは正直です）、デバッグのために launch.json と tasks.json を設定するのは簡単ではありません。私たちがより多くのドキュメントを書いたり、エディターにダイアログやウィザードを追加したりする代わりに、「/vscode launch.json と tasks.json を追加して」と尋ねるだけで、ファイルの作成方法、追加する内容などの指示が提供され、最終的にはプロのようにブレークポイントを設定し、変数を検査できるようになります。

A GitHub Copilot chat asking how to add debugging support

しかし、おそらくチャットを統合する最も重要な理由は、双方向の対話を持つことが、何が正しくて何が間違っているかを判断するのに役立つからです。大規模言語モデルは完璧ではなく、「思考」しません。それらは単に、応答する次の最適な単語を見つけ出すだけです（もちろん、それはかなり得意ですが）。

パイロットとして、あなたは常に主導権を握っており、Copilot のどの提案を受け入れ、どのコードをワークスペースに取り込むかを決定します。明確化のための質問をしたり、追加の詳細を提供したりする能力は、それらの重要な決定を下すのに役立ちます。

Copilot を最大限に活用する

命名は難しいものです（私たちの製品が「Code」と呼ばれていることからもわかるでしょう）。しかし、「GitHub Copilot」は素晴らしい名前です。「ペアプログラマー」や「オートパイロット」、あるいは単に「チャット」ではなく、「Copilot（副操縦士）」は、複数の重要な概念を一つの単語で伝えています。

ですから、もし自分自身を VS Code のパイロット（操縦士）だと考え、GitHub Copilot を…そうですね…Copilot（副操縦士）だと考えれば、このサービスについてどのように考え、隣席の仲間から最大限のものを引き出すためにどのように対話すればよいかの感覚がつかめてくるでしょう。

  • これは何度でも繰り返しますが、パイロットとして、あなたは主導権を握っています。どの提案を受け入れ、どのコードをワークスペースに統合するかを決めるのはあなたです。
  • Copilot の主な仕事は、あなたを支援し、ありふれた、あるいは反復的なタスクを処理することです。テストケースを書かせたり、サンプルデータを作成させたり、既存のパターンに基づいてコードの骨組みを作らせたりしましょう。
  • Copilot は、より多くのコンテキストがあれば、より多くのことができます。私たちは皆、キーワードベースの簡単なウェブ検索に慣れていますが、より多くの詳細を提供するほど、より良い結果が得られます。例えば、「Node Express TypeScript」ではなく、「TypeScript を使用して Express.js フレームワークを使った Node.js のウェブサイトの骨組みを作って」と Copilot に尋ね、そこから反復していきましょう！
  • チャット入力フィールドで / を押すことで、特定のトピックに対話を絞り込むことができます。例えば、エディターのパンくずリストをオンまたはオフにする方法を学ぶには、/vscode パンくずリストをオフにする と入力します。

Asking Copilot how to turn off VS Code breadcrumbs in the editor

  • トピックをショートカットとして使用することもできます。インラインチャットで「このコードを説明して」と入力する代わりに、単に「/」+ Tab (/explain へのショートカット) を押し、Enter を押すだけです。チャットビューが開き、選択されたコードの説明が表示されます。
  • Copilot は完璧ではなく、間違った答えを返すことがあることを知っておいてください。どの答えが正しく、どれが間違っているかを判断するために、明確化のための質問をし、賛成/反対の投票ボタンを使って、私たちが体験を改善するのを手伝ってください。
  • 最後に、最初のヒントとほぼ同じくらい重要なことですが、常に Copilot にフレンドリーな「こんにちは」や「おはようございます」で挨拶しましょう。それはあなたと Copilot の両方をより良い気分にさせるでしょう。

今日から始めましょう

Copilot の動作を確認し、Copilot を最大限に活用するためのさらなるヒントを得るには、この素晴らしい紹介ビデオをチェックするか、YouTube の完全な VS Code Copilot シリーズに飛び込んでみてください。

上記で説明したインライン補完体験は、現在利用可能です。組織を通じて Copilot を持っていない場合は、こちらでサインアップして無料トライアルを開始できます。そこから

  • VS Code を開きます（さらに良いのは、Insiders を使用することです）。
  • 拡張機能ビューを開き（⇧⌘X (Windows, Linux Ctrl+Shift+X)）、GitHub Copilot を検索して拡張機能をインストールします。
  • プロンプトが表示されたら、GitHub ID で認証します。
  • コードファイルを開いて、魔法が起こるのを見てみましょう！

チャット体験（エディター内、チャットビュー、クイックチャット）にアクセスするには、GitHub Copilot Chat 拡張機能をインストールする必要があります。

  • 拡張機能ビューを開き（⇧⌘X (Windows, Linux Ctrl+Shift+X)）、GitHub Copilot Chat 拡張機能を検索します。
  • プロンプトが表示されたら、GitHub ID で認証します。
  • エディター内チャットを開くには、任意でコードブロックを選択し、⌘I (Windows, Linux Ctrl+I) を押します。Copilot にクイックソート関数を書くように依頼してみてください。
  • アクティビティバーに「チャット」アイコンが表示されます。それをクリックしてチャットビューを開きます。さあ、Copilot に「荷を積んでいないツバメの対気速度を計算するプログラムを書いて」と頼んでみましょう。
  • クイックチャットを試すには、[Chat: Open Quick Chat] を実行するか、キーボードショートカット ⇧⌥⌘L (Windows, Linux Ctrl+Shift+Alt+L) を使用します。

GitHub Copilot および Copilot Chat 拡張機能について詳しくは、「GitHub Copilot in VS Code」のトピックで学ぶことができます。

責任ある AI

このような技術の記念碑的な進歩は、本当にめったにありません。私たちも、AI が開発ツールの考え方、構築、使用方法を変革する次の大きな変化であると信じています。それは最終的に、今日私たちが夢見ることしかできない方法で、開発プロセスのあらゆる側面を強化するでしょう。私たちがこれを最初に言ったと主張するわけではありませんが、すぐに私たちは皆、AI を活用したツールなしで、どのようにアプリケーションやシステムを構築、デバッグ、デプロイ、保守していたのか不思議に思うようになるでしょう。

AI は完璧ではありません（私たちも同様です！）し、時間とともに改善されていきます。Microsoft と GitHub Copilot は、責任ある AI の原則に従い、サービスでの体験が適切で、快適で、有用であることを保証するための制御を採用しています。AI の能力の急速な拡大を取り巻く躊躇や懸念があることを理解しており、Copilot を使用したくない、または使用できない人々を完全に尊重します。

点と点をつなぐ

チャットアシスタント、エディター内チャット、インライン補完の組み合わせにより、どのコーディングの「ゾーン」にいても Copilot の力を活用できます。始めたばかりですか、それとも質問がありますか？チャットビューを使用してください。猛烈にコードを書いていて、リファクタリング、更新、または骨組み作りをしたいですか？Ctrl+I を叩いて、Copilot にそれをやってもらいましょう。問題を一歩一歩解決していますか？インライン補完を使って、Tab-Tab-Tab で成功への道を切り開きましょう。

GitHub Copilot を搭載したチャットを VS Code に統合することは、旅の一歩に過ぎません。私たちは、自然言語を使用して検索パターンやコード生成を記述する、コミットメッセージやプルリクエストの説明を自動生成する、よりスマートなコードの名前変更、リファクタリング、変換など、追加の「インナーループ」シナリオを引き続き探求していきます。

GitHub、Twitter、YouTube でフォローしてください。ご意見や VS Code における AI に関するアイデアをお聞かせください。

よろしくお願いいたします。

Chris と VS Code チームより

Happy Smart Coding!