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

ノートブック、Visual Studio Codeスタイル

2021年11月8日 Tanha Kabir (@_tanhakabir)

ノートブックは、リッチなMarkdown、実行可能なコードスニペット、およびそれらに付随するリッチな出力を組み合わせたドキュメントです。これらはすべて個別のセルに分かれており、任意の順序でインターリーブできます。

An example notebook showing code cells, Markdown, and a rich graph output

ノートブックに馴染みがない場合でも、REPL (read-eval-print loop) には馴染みがあるかもしれません。REPLは、数行のコードを記述し、すぐに実行して出力を確認できる対話型アプリケーションです。ノートブックはREPLの典型であり、小さなコードチャンクで反復作業を行う環境をすばやく作成できます。

ノートブックは優れたREPLであるだけでなく、画像、数式、説明テキストなどのMarkdown要素をコードと組み合わせることで、優れたストーリーテリングツールにもなります。ノートブックは、同僚や一般のコミュニティとアイデアを共有し、説明する完璧な方法となり得ます。

今日のノートブックの最も人気のある形式はJupyter Notebookで、データサイエンスコミュニティで豊富なPythonサポートとともに広く使用されています。Jupyter Notebookは、ノートブックでコードを実行するための特定のプロトコルに従う実行可能ファイルであるJupyterカーネルを介して、JuliaやRなどの他の言語もサポートしています。Visual Studio Codeは数年前からJupyter Notebookをサポートしていましたが、最近、VS Codeコアにネイティブノートブックのサポートが追加されました。

VS Codeでのノートブックサポート

そうです、ノートブックはVS Codeのコア機能の一部になりました！これにより、VS CodeでノートブックAPIが利用可能になり、拡張機能の作成者が独自のノートブックエクスペリエンスを作成できるようになります。誰でもカスタム言語とリッチな出力をサポートするVS Codeノートブック拡張機能を作成でき、ノートブックの作成は他の拡張機能の作成と何ら変わりありません。

ノートブックAPI以前は、VS CodeでのJupyter Notebookサポートは、Jupyter拡張機能からのみ提供されていました。この拡張機能は、VS Code内の独立したウェブページのような、他のインストール済みの拡張機能とは通信できない孤立したウェブビュー内でノートブックエクスペリエンスを作成していました。

しかし、コアのノートブックAPIが導入された現在、ノートブックのサポートはVS Code自体から提供され、孤立したウェブビュー内ではありません。これにより、ノートブック拡張機能はVS Codeの他の部分や他の拡張機能と連携できるようになります。例えば、Rainbow Indentのようなエディター拡張機能は、ノートブックのコードセル内で動作します。

ノートブックAPIはJupyter Notebookに限定されません。コードを反復して記述するのに役立つツールを持つことで恩恵を受けることができる他の多くのドメインがあると信じているからです。私たちは、すべての拡張機能作成者が独自のカスタムノートブックを作成できるように、新しいノートブックAPIを公開しました。

ノートブック拡張機能エコシステムの始まり

次のセクションでは、ノートブックAPIを検証する際に開発した2つのカスタムノートブックについて説明します。

GitHub Issues Notebook

VS Codeチームが最初に作成したノートブックエクスペリエンスは、GitHub Issues Notebookです。これは、GitHubにある何千もの問題をトリアージし、整理するのに役立つノートブックです。このノートブックを使用すると、「bugとラベル付けされ、自分に割り当てられたすべての問題を見つける」といったクエリを使用して、複数のリポジトリを一度に調べて問題を見つけることができます。VS Codeチームは、このノートブックを毎日使用して、チームが作業している多くのリポジトリの問題を処理しています。

A preview of the GitHub Issues Notebook we use on the team that's available in the vscode repo

トリアージに使用する特定のノートブックは、VS Codeリポジトリの.vscode/notebooksで見つけることができます。inbox.github-issuesという名前のノートブックがあり、新しい問題を適切な領域と担当者にトリアージするために使用されます。

GitHub Issues NotebookはVS Code Marketplaceで誰でも利用できます。この拡張機能をインストールし、my-notebook.github-issuesのような.github-issuesファイル拡張子を持つノートブック用のファイルを作成し、その後、次のようなクエリを作成することで試すことができます。

$repo=repo:microsoft/vscode-github-issue-notebooks
$repo is:open no:assignee

クエリの作成に使用されるノートブック言語github-issuesは、GitHub.comで使用される構文とほとんど同じです。GitHub Issues Notebook言語の追加点として、変数を作成し、他のどのセルでもそれらを使用できることがあります。

GitHub Issues NotebookのソースコードはGitHub.comでこちらから閲覧できます。

REST Book

GitHub Issues Notebookでのクエリ体験に触発されて、VS Codeチームに参加した当初の学習の一環として、REST Bookを作成しました。REST Bookは、ノートブック内でHTTP呼び出しを行うことを可能にします。私はREST Bookが、サーバーとのプロジェクトを反復するのに役立つことを見つけました。これにより、複数の呼び出しを時間的に行い、結果を1つのページで簡単に比較できます。また、テストケースとドキュメントを組み合わせたプロジェクトの手動テストを設定するためにもREST Bookノートブックを使用しました。

A preview of the REST Book being used in a project with an Express App

このREST Book拡張機能も現在マーケットプレイスで入手可能です。REST Book拡張機能をインストールし、.restbookで終わるファイルを作成して、GET github.comのようなHTTPクエリを実行できます。

REST Bookの開発は当初複雑に思えましたが、利用可能なVS Code APIが多数あったため、プログラミングとREST Bookの作成は予想よりもはるかに簡単でした。特に、カスタムRESTクエリ言語のシンタックスハイライトとオートコンプリートのために、言語APIを多用しました。その後、ノートブックAPIを使用して、ユーザーがクエリを実行したいときに何を行うべきかを記述するだけで済みました。

REST Bookのソースコードはこちらで閲覧できます。

これら両方のノートブックにとって、このようなREPLライクなエクスペリエンスを作成するためにVS CodeノートブックUIが利用できたことは非常に有益でした。独自のUIを作成したり維持したりする心配がなく、機能に集中できます。

独自のカスタムノートブック拡張機能を作成する

コーディングチュートリアルを見る

VS Codeチームは数ヶ月前にカスタムノートブックに関するライブストリームを録画し、その中でカスタムノートブック拡張機能の作成方法をライブコーディングデモで紹介しました。YouTubeで視聴できます：VS Code Notebooks: A Deep Dive。ビデオ公開後、一部のノートブックAPIは変更されていますが、原則は同じです。

独自のノートブック拡張機能の構築準備ができた場合は、最新かつ詳細な情報としてノートブック拡張機能作成者ガイドを参照してください。

コミュニティとアイデアを共有する

独自のノートブック拡張機能の作成には興味がないものの、役立つアプリケーションのアイデアがある場合は、VS CodeのTwitterアカウント(@code)にノートブックのアイデアをツイートするか、VS Code GitHubリポジトリに課題を作成することをお勧めします。これにより、VS Codeコミュニティがあなたのノートブックのアイデアを読み、議論し、そして願わくばそのアイデアを実現するよう人々を刺激するでしょう！

このブログで紹介したいくつかのカスタムノートブックは、ほんの始まりに過ぎません！皆さんがどのようなカスタムノートブックエクスペリエンスにインスピレーションを受け、創造するのかを見るのが楽しみです！

ハッピーコーディング！

Tanha Kabir (@_tanhakabir) 、およびVS Codeチーム (@code)