[レポート] VS Code Day 2021 – NOTEBOOKS IN VS CODE ARE GETTING REVAMPED! – #VSCodeDay #VSCode #VisualStudioCode

2021.02.01

こんにちは、Mr.Moです。

初のVS Code公式カンファレンス 『VS Code Day 2021』が開催されましたね!🎉
本イベントではセッションがいくつか用意されていますが、本エントリーではそのうちの一つ『NOTEBOOKS IN VS CODE ARE GETTING REVAMPED!』をレポートしていきたいと思います。

VS Code Day 2021とは

image.png

Join the Visual Studio Code team and community at a live event just for VS Code users. Get a glimpse of things to come and meet the team who works on VS Code every day.

VS Code Dayは、VSCodeユーザーと開発者コ​​ミュニティのための無料のイベントです!今回はオンラインでの開催なのでどこからでも参加できますね!

公式ページは下記
https://code.visualstudio.com/vscode-day

そして下記がセッション一覧です!

image.png

レポート

  • スピーカー
    • Claudia Regio(PROGRAM MANAGER AT MICROSOFT)
  • タイトル
    • NOTEBOOKS IN VS CODE ARE GETTING REVAMPED!

image.png

このセッションではPython拡張機能で提供されるノートブックのエクスペリエンスの改良について触れていきます。内容のほとんどは VS Code Insiders で提供される機能についてになります。

image.png

さっそく始めていきます。その前にJupyter Notebookとは何かですが、これはインタラクティブにプログラミング実行やドキュメントを書くことができ、実行可能なコードと可視化された実行結果の一連の流れをまとめて管理できるため、データサイエンスの有力なツールとなっています。

image.png

現在、Webviewの実装からネイティブにサポートされているノートブックファイルタイプの実装に移行しています。これは何を意味するかというと、vimキーバインディングやBracket Pair Colorizerなどの非常に人気のある拡張機能を統合することで恩恵を受けることができるということです。また、ノートブックのロード時間が改善され、新しいモダンなデザインの恩恵も受けることができます。

image.png

ではどのように試していくかですが、まずVS Code Insidersをダウンロードします。そしてコマンドパレットを開き"notebook"と打ち、表示された"Jupyter:Create New Blank Jupyter Nootebook"を選択して空のJupyter Notebookを作成します。

notebook-canvas.png

従来のものとはかなり違っているので何が変わったのかを見ていきます。セルに言語ピッカーがあり使用する言語を表示します。下の方にはPythonの実行環境の切り替えやリモートのサーバーに接続する設定エリアがあります。セルにあるツールバーですが、カスタマイズが可能で位置もデフォルトは右側にありますが、今は左に位置するよう設定しています。また、コードの追加、Markdownの追加はアイコンをクリックでもできますしショートカットを使用する方法もあります。

variable-explorer.png

そして従来からある機能ですが変数エクスプローラーです。ノートブックで作業をしていると状態の追跡をするのが手間です。変数エクスプローラーは変数の値を見ることができ、ツールバーのグリッドのようなアイコンをクリックするとキャンバスの下部にポップアップが表示され変数エクスプローラーにアクセスできます。左下のアイコンをクリックしてデータビューアにアクセスすることもできます。

image.png

データビューアは行をフィルタリングする機能があり、左上のボタンをクリックすると、このトップパネルが表示されます。ここですばやくフィルタリングすることができるのです。データを理解しようとしているときにも、迅速に所定のデータを特定できます。

table-of-contents.png

そしてココから、VS Code Insiders で利用できるようになった機能の発表です。コミュニティからの要望が大きかった機能でファイルエクスプローラーの下に表示されているOUTLINEを展開するとノートブック内の全体像や階層関係などが表示されます。クリックすることでノートブック内の目的の場所に移動することが可能です。

image.png

次にLive Shareです。Live Shareでは共同作業と双方向実行をサポートしています。(デモでは実際に同僚の方と同じセルを共同編集しているところが紹介されていました)

image.png

ノートブックの差分を見るのは少し難儀なところがありました。そこでノートブックの差分を見る機能があり、VS Code Insidersで動きます。これによりレンダリングされた結果の差分も簡単に確認することができます。

gather.png

Gatherはデータのクリーニングを支援するツールです。ノートブックのセルをコピーして別のセルに貼って実行すると、関連するコードの不足でエラーが発生することがよくあります。そこでGatherでは必要な関連するコードを取得する動きをします。また、必要な関連するコードのみを取得するのでノートブックのクリーニングプロセスを高速化させます。

image.png

そして、多くの場合ノートブックを他の方に提供する必要が出てきます。そんな時にもエクスポートの機能があります。『Pythonスクリプト』、『HTML』そして『PDF』の形式でエクスポートが可能です。

image.png

必要な拡張機能のリストになります。

image.png

フィードバックや機能のリクエストがあれば連絡してください!

まとめ

昨年の11月に発表されたJupyter拡張機能の新しいUIベースの内容でしたね。まだVS Code Insidersのみでの提供ですが、昨年の11月からまだそれほどたっていないにもかかわらず、随分使いやすくなっきている印象でした。Jupyter拡張機能およびVS Codeにおけるノートブックの動向から今後も目が離せないですね!

(ちなみに、Jupyter拡張機能については下記の記事も参考にしていただければと思います)