🚀 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 チャット機能の詳細について説明しています。

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

この記事では、VS Code における AI について少し背景を説明し、GitHub Copilot によって強化されたエキサイティングな新しいエクスペリエンスを紹介し、今後の方向性について展望をお見せしたいと思います。

GitHub Copilot "V1"

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

これらのアイデアは興味深いものでしたが、私たちはチャット エクスペリエンスについて考え続けました。私たちは健全な懐疑心を持っていました。私たちの生活に本当に別のチャット エクスペリエンスが必要なのでしょうか? VS Code はエディターであり、私たちの仕事は、ユーザーを「ゾーン」に入れ、次の素晴らしいものを生み出す間、気を散らすものを排除することで、そこに留まれるようにすることです。

私たちが行った調査の中で興味深いものの 1 つは、チャットをエディターに直接組み込むことでした。これが最初のプロトタイプです。

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 をめぐる興奮が高まるにつれて、カスタム チャット ビューを備えた社内外の拡張機能の数も増えました。私たちは、これらがスケールしないのではないかと心配しました。キー バインディングやテーマなどの基本機能を 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」は 1 つの単語で複数の重要な概念を伝えています。

したがって、自分自身を VS Code のパイロット、GitHub Copilot を…まあ…コパイロットと考えている場合、サービスについてどのように考え、それと対話して座席を最大限に活用する方法の感覚をつかみ始めるでしょう。

  • 私たちはこれを繰り返し言うことができます。パイロットとして、あなたは責任者です。どの提案を採用し、どのコードをワークスペースに統合するかを決定します。
  • Copilot の主な仕事は、日常的または反復的なタスクを処理して、あなたを支援することです。テスト ケースを作成したり、サンプル データを作成したり、既存のパターンに基づいてコードを足場を組んだりさせましょう。
  • Copilot はコンテキストが多いほど多くのことができます。私たちは皆、キーワード ベースの Web 検索に慣れていますが、詳細を提供すればするほど、より良い結果が得られます。たとえば、「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 に「荷物を積んでいないツバメの対気速度を計算するプログラムを作成する」ように依頼してください。
  • クイック チャットを試すには、チャット: クイック チャットを開く を実行するか、⇧⌥⌘L (Windows、Linux Ctrl+Shift+Alt+L) キーボード ショートカットを使用できます。

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

責任ある AI

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

AI は完璧ではありません (私たちも完璧ではありません!)。そして、時間の経過とともに改善されていきます。マイクロソフトと 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 チーム

ハッピーな スマート コーディングを!