Notebooks, Visual Studio Code スタイル
2021年11月8日 Tanha Kabir, @_tanhakabir
ノートブックとは、リッチMarkdown、実行可能なコードスニペット、および付随するリッチ出力を混在させたドキュメントです。これらはすべて個別のセルに分けられ、任意の順序でインターリーブできます。
ノートブックに馴染みがない場合、REPL（read-eval-print loop）をご存知かもしれません。REPLは、数行のコードを書いてすぐに実行し、出力を確認できるインタラクティブなアプリケーションです。ノートブックはREPLの典型であり、小さなコードの塊を反復処理して作業できる環境をすばやく作成できます。
ノートブックは優れたREPLであるだけでなく、優れたストーリーテリングデバイスでもあり、画像、数式、説明テキストなどのMarkdown要素をコードとインターリーブできます。ノートブックは、同僚や一般コミュニティとアイデアを共有し、説明するのに最適な方法です。
今日最も人気のあるノートブックの形式はJupyter Notebookであり、豊富なPythonサポートを備えたデータサイエンスコミュニティで広く使用されています。Jupyter Notebookは、JuliaやRなどの他の言語も、ノートブックでコードを実行するための特定のプロトコルに従う実行可能ファイルであるJupyterカーネルを通じてサポートしています。Visual Studio Codeは、Jupyter Notebookを数年間サポートしてきましたが、最近、ネイティブノートブックサポートを追加しました VS Codeコアに。
VS Codeでのノートブックのサポート
その通り、ノートブックは現在、VS Codeのコア機能の一部です！これは、拡張機能の作成者が独自のノートブックエクスペリエンスを作成できるようにするNotebook APIがVS Codeで利用できるようになったことを意味します。誰でもカスタム言語とリッチ出力をサポートするVS Codeノートブック拡張機能を作成でき、ノートブックの作成は他の拡張機能の作成と変わりません。
Notebook API以前は、VS CodeでのJupyter Notebookのサポートは、Jupyter拡張機能のみから提供されていました。この拡張機能は、VS Code内の独立したWebページのような、分離されたwebview内にノートブックエクスペリエンスを作成し、インストールした他の拡張機能と通信できませんでした。
ただし、コアNotebook APIにより、ノートブックサポートはVS Codeから提供され、分離されたwebview内にはありません。これは、ノートブック拡張機能がVS Codeの残りの部分や他の拡張機能と対話できることを意味します。たとえば、Rainbow Indentのようなエディター拡張機能は、ノートブックのコードセルで動作します。
Notebook APIはJupyter Notebookに限定されません。コードを反復処理して説明するのに役立つツールを持つことで恩恵を受けることができる他の多くのドメインがあると考えているためです。新しいNotebook APIを、拡張機能の作成者が独自のカスタムノートブックを作成できるように公開しました。
ノートブック拡張機能エコシステムの始まり
次のセクションでは、Notebook APIを検証する際に開発した2つのカスタムノートブックについて説明します。
GitHub Issues Notebook
VS Codeチームが作成した最初のノートブックエクスペリエンスは、GitHub Issues Notebookでした。これは、GitHubにある数千件の問題をトリアージして整理するのに役立つノートブックです。このノートブックを使用すると、「bugラベルが付けられていて、自分に割り当てられているすべての問題を検索する」などのクエリを使用して、複数のリポジトリを一度に調べて問題を検索できます。VS Codeチームは、このノートブックを毎日使用して、チームが取り組んでいる多くのリポジトリ全体の問題を処理しています。
トリアージに使用する特定のノートブックは、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言語に追加された機能の1つは、変数を作成し、他のセルで使用できることです。
GitHub.comでGitHub Issues Notebookのソースコードを表示できます。
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クエリ言語の構文の強調表示とオートコンプリートには、language APIを多用しました。次に、Notebook APIを使用すると、ユーザーがクエリを実行したいときに何をする必要があるかを埋めるだけで済みました。
REST Bookのソースコードはこちらでご覧いただけます。
これらの両方のノートブックについて、これらのREPLのようなエクスペリエンスを作成するためにVS Code Notebook UIがあるのは素晴らしいことでした。独自のUIを作成および維持することを心配する必要はなく、機能に集中できます。
独自のカスタムノートブック拡張機能を作成する
コーディングチュートリアルを見る
VS Codeチームは数か月前にカスタムノートブックに関するライブストリームを録画し、その中で、カスタムノートブック拡張機能を作成するとはどういうことかをライブコーディングデモで紹介しました。YouTubeでご覧いただけます: VS Code Notebooks: A Deep Dive。ビデオが公開されてからNotebook APIの一部が変更されましたが、原則は同じです。
独自のノートブック拡張機能を構築する準備ができたら、最新かつ詳細な情報については、Notebook拡張機能作成者向けガイドを参照してください。
あなたのアイデアをコミュニティと共有する
独自のノートブック拡張機能を作成することに興味がないが、役立つアプリケーションのアイデアがある場合は、VS Code Twitterアカウント@codeにノートブックのアイデアをツイートするか、VS Code GitHubリポジトリにissueを作成することをお勧めします。これにより、VS Codeコミュニティがあなたのノートブックのアイデアを読んで議論し、うまくいけばあなたのノートブックを現実のものにするために人々にインスピレーションを与えるでしょう！
このブログで取り上げた少数のカスタムノートブックはほんの始まりにすぎません！あなたがどのようなカスタムノートブックエクスペリエンスを刺激し、作成するのかを見るのが楽しみです！
ハッピーコーディング！
Tanha Kabir（@_tanhakabir）、およびVS Codeチーム（@code）