Denoで動かすJupyterプロジェクト

はじめに

2023年の9月20日にDenoのバージョン1.37が発表されました。
バージョン1.37ではDenoとJupyterが統合され、JavaScript・TypeScriptを用いたデータサイエンスの道を新たに切り拓きました。
この記事ではJupyerプロジェクト内でDenoを利用する方法を紹介します。

準備

Denoの最新化/導入

既にDenoを導入している方は以下のコマンドで最新版までバージョンアップします。

deno upgrade

まだDenoを導入していない場合は以下のコマンドでDenoをインストールします。

# MacOS/Linux
curl -fsSL https://deno.land/x/install/install.sh | sh

# Windows
irm https://deno.land/install.ps1 | iex

他の方法でインストールしたい場合は公式ドキュメントを参照してくだい。

準備が完了したら以下のコマンドを入力して利用するdenoのバージョンが1.37を超えていることを確認してください。

deno -V
# deno 1.37.0

Jupyterの準備

事前準備としてPython3とpip3を公式ドキュメントのダウンロードなどを用いてお好きな方法で導入します。以後この記事ではPython３やpip3はpythonやpipで呼び出せるものとします。
以下のコマンドを叩いてバージョンが2系になっていないことを確認してください。

python -V
pip -V

そして、Jupyerを利用するための環境をpipを用いて準備します。

# Jupyter Labを主軸に開発する場合
pip install jupyterlab

# Jupyter Notebookを主軸に開発する場合
pip install notebook

準備完了後、Jupterが正常に動くことを確認します。

# jupyerlabをinstallした場合
jupyer lab

# notebookをinstallした場合
jupyter notebook

Denoの有効化

これまでの準備で最新版のDenoを扱えるようになり、Jupyer Lab/Notebookが起動できるようになりました。
次に、JupterでDenoを扱えるようにします。
以下のコマンドでDenoとJupyerの統合状況を確認します。

deno jupyter --unstable

Denoバージョン1.37時点ではJupterとの統合が安定版ではないため--unstableがついています。
入力後出力されたテキストを元に統合を完了させてください。

私の環境では以下のようなメッセージが表示されました。

ℹ️ Deno kernel is not yet installed, run `deno jupyter --unstable --install` to set it up

メッセージに従って以下のコマンドを入力しました。

deno jupyter --unstable --install

メッセージに従って設定を行った後に、再度統合状態を確認して以下のように完了したことを知らせるメッセージが表示されたら導入は完了です。

deno jupyter --unstable
# ✅ Deno kernel already installed

JupyerプロジェクトでDenoを利用する

Jupter Lab/Notebookを起動させてみましょう。
Jupyer Labを起動させると以下のように選択可能な言語として新たにDenoが追加されていることが確認できます。

jupyer lab

Jupter Notebookも同様に起動させ、ファイルを新規作成するときの言語としてDenoを選択可能になったことを確認できます。

jupyer notebook

実際これらを選択してファイルを作成するとJavaScript・TypeScriptのコードをJupter内で書けます。

データの可視化

出力はオブジェクトのキーに[Symbol.for("Jupyter.display")]を持つ要素を返すことでカスタマイズできます。
下の例ではhtmlの要素を組み立てた内容を出力するようにしてます。

少し大変ではありますが、このようにしてHTMLなどを用いたデータの可視化を行えます。他の表現についてはこちらのJupyterのドキュメントを参照してください。
これらを簡易化するDenoのインターフェイスとしてdisplayがあります。
以下の記述は先述の[Symbol.for("Jupyter.display")]を用いたコードとほとんど等価な出力を行います。

import { display } from "https://deno.land/x/display/mod.ts";
display({
  "text/html": `
        <table>
          <thead>
            <tr>
              <th colspan="2">The table header</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>The table body</td>
              <td>with two columns</td>
            </tr>
          </tbody>
        </table>
    `
});

直感的で利用しやすいインターフェイスなので、Jupyterプロジェクトでは積極的に使いたい機能です。

そして、DenoでHTML Canvas APIを高速で扱うためのモジュール、skia_canvasを組み合わせることで以下のように図を表示させられます。

npmにはHTML Canvas APIに関するがライブラリが豊富に提供されているので、それらを用いることでJupyerプロジェクトでより高い表現力を持った出力を行えます(公式ではd3が紹介されています)。

VSCode

VSCode内でもDenoでJupyter Notebookを動かせます。
前提としてJupyterの公式の拡張を導入してください。

その後、Jupyter Notebookを新しく開いて、

動作するKernelとしてDenoを選択すると、Denoを用いたJupyter NotebookをVSCode内でも動かせます。

おわりに

Denoを用いてJupterプロジェクトを利用する方法を紹介しました。
Jupyterといえば名前の通りJulia、Python、Rで動くデータサイエンスに使われるものというイメージでしたので、新たにDenoと統合されることになり驚きでした。
Denoをサポートしたことで、普段TypeScript・JavaScriptを書いている人がデータサイエンスを行いやすくなり良い統合だったと思います。