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

## はじめに
2023年の9月20日にDenoのバージョン1.37が発表されました。
バージョン1.37では[DenoとJupyter](https://deno.com/blog/v1.37#jupyter-notebook-integration)が統合され、JavaScript・TypeScriptを用いたデータサイエンスの道を新たに切り拓きました。
この記事ではJupyerプロジェクト内でDenoを利用する方法を紹介します。

## 準備
### Denoの最新化/導入
既にDenoを導入している方は以下のコマンドで最新版までバージョンアップします。
```sh
deno upgrade
```

まだDenoを導入していない場合は以下のコマンドでDenoをインストールします。
```sh
# MacOS/Linux
curl -fsSL https://deno.land/x/install/install.sh | sh

# Windows
irm https://deno.land/install.ps1 | iex
```
他の方法でインストールしたい場合は[公式ドキュメント](https://docs.deno.com/runtime/manual/getting_started/installation#download-and-install)を参照してくだい。

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

```sh
deno -V
# deno 1.37.0
```

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

そして、Jupyerを利用するための環境をpipを用いて準備します。
```sh
# Jupyter Labを主軸に開発する場合
pip install jupyterlab

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

準備完了後、Jupterが正常に動くことを確認します。
```sh
# jupyerlabをinstallした場合
jupyer lab

# notebookをinstallした場合
jupyter notebook
```

### Denoの有効化
これまでの準備で最新版のDenoを扱えるようになり、Jupyer Lab/Notebookが起動できるようになりました。
次に、JupterでDenoを扱えるようにします。
以下のコマンドでDenoとJupyerの統合状況を確認します。
```sh
deno jupyter --unstable
```
Denoバージョン1.37時点ではJupterとの統合が安定版ではないため`--unstable`がついています。
入力後出力されたテキストを元に統合を完了させてください。

:::note
私の環境では以下のようなメッセージが表示されました。
```
ℹ️ Deno kernel is not yet installed, run `deno jupyter --unstable --install` to set it up
```
メッセージに従って以下のコマンドを入力しました。
```sh
deno jupyter --unstable --install
```
:::

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

## JupyerプロジェクトでDenoを利用する
Jupter Lab/Notebookを起動させてみましょう。
Jupyer Labを起動させると以下のように選択可能な言語として新たにDenoが追加されていることが確認できます。
```sh
jupyer lab
```
![スクリーンショット 2023-09-23 14.45.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/2ee1a465-3308-3efb-5ee6-18b931442ad8.png)

Jupter Notebookも同様に起動させ、ファイルを新規作成するときの言語としてDenoを選択可能になったことを確認できます。
```sh
jupyer notebook
```
![スクリーンショット 2023-09-23 14.48.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/6db4151f-6a4d-c7d8-2c63-e48ddd2b1bcf.png)

実際これらを選択してファイルを作成するとJavaScript・TypeScriptのコードをJupter内で書けます。
![スクリーンショット 2023-09-23 14.55.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/036256d8-c732-b809-89e8-e05ee05665ba.png)

### データの可視化
出力はオブジェクトのキーに`[Symbol.for("Jupyter.display")]`を持つ要素を返すことでカスタマイズできます。
下の例では`html`の要素を組み立てた内容を出力するようにしてます。
![スクリーンショット 2023-09-23 15.04.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/c53a4358-30cd-498a-2b2e-6b1307a93317.png)
少し大変ではありますが、このようにしてHTMLなどを用いたデータの可視化を行えます。他の表現については[こちらのJupyterのドキュメント](https://docs.jupyter.org/en/latest/reference/mimetype.html)を参照してください。
これらを簡易化するDenoのインターフェイスとして[display](https://deno.land/x/display@v0.1.1)があります。
以下の記述は先述の`[Symbol.for("Jupyter.display")]`を用いたコードとほとんど等価な出力を行います。
```ts
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](https://deno.land/x/skia_canvas@0.5.4)を組み合わせることで以下のように図を表示させられます。
![スクリーンショット 2023-09-23 15.25.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/48233c7c-b4ce-8a44-c38f-42cf9611b4dd.png)
npmにはHTML Canvas APIに関するがライブラリが豊富に提供されているので、それらを用いることでJupyerプロジェクトでより高い表現力を持った出力を行えます(公式では[d3](https://d3js.org)が紹介されています)。

### VSCode
VSCode内でもDenoでJupyter Notebookを動かせます。
前提として[Jupyterの公式の拡張](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter)を導入してください。
![スクリーンショット 2023-09-25 15.51.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/6994b989-69bf-13de-12ca-45ad9d3e4f42.png)
その後、Jupyter Notebookを新しく開いて、
![スクリーンショット 2023-09-25 15.52.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/94fa59a6-955c-730a-fb03-953aeb1c8b6b.png)

動作するKernelとしてDenoを選択すると、Denoを用いたJupyter NotebookをVSCode内でも動かせます。
![画面収録 2023-09-25 15.53.36 (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/6d75bbcd-d712-3d17-b912-ab0239fbba74.gif)


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