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

Visual Studio Code と GitHub Copilot

2023年3月30日 Chris Dias (@chrisdias)

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

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

今日の人工知能をめぐっては、多くの話題、興奮、そしていくつかの懸念があります。進歩はほぼ毎日起きており、追いつくのが大変です。しかし、一度試してみれば、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 と協力し、開発向けに LLM、特に OpenAI の Codex モデル を大規模に利用した最初の事例を実現しました。

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 にさらに深く統合する方法を探る社内ハッカソンを開催し、名前変更やリファクタリングの改善、例に基づいたコード変換、自然言語を使ったファイルグロブパターンや正規表現の作成方法など、多くの素晴らしいアイデアを生み出しました。

これらのアイデアも興味深かったのですが、私たちは常にチャット体験を中心に考えていました。私たちは健全な懐疑心を抱いていました。本当に私たちの生活にもう一つチャット体験が必要なのでしょうか？VS Code はエディターであり、私たちの仕事は、気が散るものを取り除きながら、次のユニコーンを生み出すために、あなたを「ゾーン」に引き込み、そこに留まらせることです。

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

Prototype of a chat input in the editor

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

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

Inline change with preview of update

コメントや過剰に記述的な関数名を使って Copilot に意図を伝える必要はありません。ただ Cmd+I を押して、やりたいことを記述するだけです。Copilot が作業している間も、あなたは集中したままです。

チャットビューを活用する

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

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

A GitHub Copilot conversation within an extension's chat view

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

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

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

A GitHub Copilot chat asking how to add debugging support

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

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

Copilot を最大限に活用する

命名は難しいものです（私たちの製品名が「Code」であることから、よく分かります）。しかし、「GitHub Copilot」は素晴らしい名前です。「ペアプログラマー」や「オートパイロット」あるいは単なる「チャット」ではなく、「Copilot」は単一の言葉の中に複数の重要な概念を伝えています。

したがって、ご自身を VS Code のパイロット、そして GitHub Copilot を...そう...コパイロットだと考えれば、このサービスについてどのように考え、シートメイトから最大限のものを引き出すためにどのようにやり取りすべきかという感覚がつかめるでしょう。

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

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

  • トピックをショートカットとして使うこともできます。インラインチャットで「このコードを説明して」と入力する代わりに、単に「/」 + Tab（/explainのショートカット）を入力し、Enterを押します。チャットビューが開き、選択したコードの説明が表示されます。
  • Copilot は完璧ではなく、間違った回答をすることもあることを知っておいてください。正しいものと間違ったものを判断するために明確な質問をし、Up/Down 投票ボタンを使ってエクスペリエンスの改善にご協力ください。
  • 最後に、そして最初のヒントとほとんど同じくらい重要なことですが、常に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に「荷を積んでいないツバメの対気速度を計算するプログラムを書いて」と尋ねてみましょう。
  • クイックチャットを試すには、チャット: クイックチャットを開く を実行するか、⇧⌥⌘L（Windows、Linux Ctrl+Shift+Alt+L） のキーボードショートカットを使用できます。

GitHub Copilot および Copilot Chat 拡張機能の詳細については、VS Code の GitHub Copilot のトピックを参照してください。

責任ある 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 チーム一同

ハッピー スマート コーディング！