Jypyter(notebook/lab)またはGoogle ColabのコードセルにDeno(JavaScript/TypeScript)を書いて実行するためのマジックコマンドです。

Jupyter環境ではあらかじめDenoをインストールしてパスを通しておく必要があります。インストール方法はDenoの公式サイトを参照してください。VSCode経由でJupyter(拡張機能)を使う場合はさらにDeno拡張機能をインストールしたうえで設定でDeno.enableをtrueにしてください。

Google Colab環境ではパッケージにインストール用の関数が用意されているので個別にインストールする必要はありません。

コードセルに以下のコードを貼り付けて実行しマジックコマンドを登録してください。カーネルやランタイムを再起動する度に再実行する必要があります。

%pip install denomagic
import denomagic

# denoのインストール(Google Colab用、他の環境では呼び出してもインストールしません)
denomagic.install_deno_colab()
# マジックコマンドの登録
denomagic.register_deno_magics()

コードセルの冒頭に以下のようにマジックコマンドを記述してください。実行するとDenoによってコードセル内のJavaScript/TypeScriptコードが実行されます。

%%run_deno

console.log("Hello, world!");

また、コードセルのJavaScript/TypeScriptコードをDenoでトランスパイルしてiframe内で実行するマジックコマンドも用意しています。 以下は、ブラウザ用のライブラリであるp5.jsを使った例です。

%%run_deno_iframe 830 430
import "https://cdn.jsdelivr.net/npm/p5@1.9.4/lib/p5.js";

const sketch = (p: any) => {
  let x = 0;
  let y = 0;
  let speed = 2;
  let color: [number, number, number] = [0, 0, 0];

  p.setup = () => {
    p.createCanvas(800, 400);
    x = p.width / 2;
    y = p.height / 2;
  };

  p.draw = () => {
    p.background(220);
    p.fill(color);
    p.ellipse(x, y, 50, 50);
    if (p.keyIsDown(p.LEFT_ARROW) === true) {
      x -= speed;
    }

    if (p.keyIsDown(p.RIGHT_ARROW) === true) {
      x += speed;
    }

    if (p.keyIsDown(p.UP_ARROW) === true) {
      y -= speed;
    }

    if (p.keyIsDown(p.DOWN_ARROW) === true) {
      y += speed;
    }
  };

  p.mousePressed = () => {
    color = [p.random(255), p.random(255), p.random(255)];
  };
};

new p5(sketch);

%%run_deno [userval]

コードセル内のJavaScript/TypeScriptをDenoで実行します。

• userval: Jupyterのユーザー変数をDenoで利用するかどうかを設定します。デフォルトはFalseです。

usevalをTrueにすると、Jupyterのユーザー変数をglobalThis.jupyterを通じて利用できるようになり、セルを超えた変数のやりとりが出来るようになります。
内部ではJupyterとDenoの間をJSONの一時ファイルでやりとりしているため、JSONに変換できないオブジェクトは利用できません。
利用した場合の動作は未定義です。

Jupyterのコードセル内で実行されている場合、globalThis.isJupyterCellが定義されているので、これがundefinedではないかどうかを確認することでJupyterのコードセルからの実行なのかどうかを判定できます。

Jupyterユーザー変数を利用した状態でコードセルの途中で終了させたい場合はDeno.exitの代わりにjupyterExit()を利用してください。 Deno.exitで終了するとJupyterのユーザー変数は更新されません。

コードセル内のJavaScript/TypeScriptをDenoでトランスパイルしてiframe内で実行します。

%%run_deno_iframe [width] [height] [srcs]

• width: iframeの幅を指定します。デフォルトは500です。
• height: iframeの高さを指定します。デフォルトは500です。
• srcs: 外部JavaScriptのURLを指定します。複数指定する場合はスペースで区切ります。

コードセル内のJavaScript/TypeScriptをimportしたコードも含めてトランスパイル及びバンドルしてiframe内で実行します。

引数は%%run_deno_iframeと同じです。

コードセル内のJavaScript/TypeScriptをDenoでトランスパイルした後生成したHTMLを出力します。

引数は%%run_deno_iframeと同じです。

コードセル内のJavaScript/TypeScriptをimportしたコードも含めてトランスパイル及びバンドルした後生成したHTMLを出力します。

引数は%%run_deno_iframeと同じです。