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

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

ノートブックとは、リッチな Markdown、実行可能なコード スニペット、そしてそれに付随するリッチな出力を混在させたドキュメントです。これらはすべて個別のセルに分かれており、任意の順序で挟み込むことができます。

ノートブックに馴染みがない方でも、REPL (read-eval-print loop) はご存知かもしれません。REPL は、数行のコードを書いてすぐに実行し、その出力を確認できる対話型のアプリケーションです。ノートブックは REPL の典型であり、小さなコードの塊を繰り返し作業できる環境を素早く作成できます。

ノートブックは優れた REPL であるだけでなく、優れたストーリーテリングのツールでもあります。画像、数式、説明文などの Markdown 要素をコードの間に挟み込むことができます。ノートブックは、同僚や公開コミュニティとアイデアを共有し、説明するための最適な方法となり得ます。

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

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

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

Notebook API が登場する前は、VS Code での Jupyter Notebook のサポートは、Jupyter 拡張機能のみが提供していました。この拡張機能は、VS Code 内の独立した Web ページのような、分離された Web ビュー内でノートブック体験を作成していたため、インストールされている他の拡張機能と通信することはできませんでした。

しかし、コアの Notebook API が搭載された現在では、ノートブックのサポートは VS Code から提供され、分離された Web ビュー内にはありません。これは、ノートブック拡張機能が VS Code の他の部分や他の拡張機能とやり取りできることを意味します。例えば、Rainbow Indent のようなエディター拡張機能は、ノートブックのコードセル内で動作します。

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

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

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

GitHub Issues Notebook

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

私たちがトリアージに使用する特定のノートブックは、VS Code リポジトリの .vscode/notebooks 以下にあります。inbox.github-issues というものがあり、新しい issue を適切なエリアと担当者にトリアージするために使用されます。

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 言語の追加点の 1 つは、変数を作成し、それを他のセルで使用できることです。

GitHub Issues Notebook のソースコードは、こちらの GitHub.com でご覧いただけます。

REST Book

GitHub Issues Notebook でのクエリ体験に触発されて、私は VS Code チームに加わったばかりの頃、学習の一環として REST Book を作成しました。REST Book を使うと、ノートブック内で HTTP コールを行うことができます。REST Book は、サーバーを使用するプロジェクトで反復作業を行うのに便利だと感じました。時間をかけて複数のコールを行い、その結果を 1 つのページで簡単に比較できるからです。また、REST Book ノートブックを使って、テストケースの間にドキュメントを挟み込みながら、プロジェクトの手動テストをいくつか設定しました。

この REST Book 拡張機能も現在 Marketplace で公開されています。REST Book 拡張機能をインストールし、.restbook で終わるファイルを作成すれば、GET github.com のような任意の HTTP クエリを実行できます。

REST Book の開発は最初は複雑に思えましたが、利用可能な VS Code API が多数あったため、プログラミングと REST Book の作成は予想以上にずっと簡単でした。特に、独自の REST クエリ言語のシンタックスハイライトと自動補完のために、言語 API を多用しました。そして Notebook API を使えば、ユーザーがクエリを実行したいときに何をすべきかを埋めるだけでよかったのです。

REST Book のソースコードはこちらでご覧いただけます。

これら両方のノートブックにおいて、このような REPL のような体験を作成するために VS Code Notebook UI があったことは素晴らしいことでした。独自の UI を作成し、維持することを心配する必要はなく、機能性に集中するだけでよいのです。

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

コーディング チュートリアルを視聴する

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

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

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

独自のノートブック拡張機能の作成に興味はないが、便利なアプリケーションのアイデアがある場合は、VS Code の Twitter アカウント @code でノートブックのアイデアをツイートするか、VS Code GitHub リポジトリ に issue を作成することをお勧めします。これにより、VS Code コミュニティがあなたのノートブックのアイデアを読んで議論し、人々があなたのノートブックを現実にすることを願っています！

このブログで取り上げた数少ないカスタムノートブックは、ほんの始まりに過ぎません！皆さんがどのようなカスタムノートブック体験をひらめき、創造されるかを楽しみにしています！

ハッピーコーディング！

Tanha Kabir (@_tanhakabir) と VS Code チーム (@code)