TypeScriptでJupyter 2025-04-22 kansai.ts #10 suzuki.sh | s2terminal 

Jupyterとは？ ● おもにブラウザで動かす、インタラクティブな実行環境 ● Pythonの機能ではないが、Pythonでよく使われるし Pythonの著名なライブラリ等と密接な関係がある ● 「カーネル」を変更することでPython以外でも使える ○ →TypeScriptでJupyterできないかな？ 2 

Jupyterとは？ 3 

Jupyterの特徴 ● 「セル」にコードを書いて実行 4 

Jupyterの特徴 ● 「セル」にはコードの他にMarkdownも書ける 5 

Jupyterの特徴 ● 扱うファイル`.ipynb`の中身はただのJSONデータ ○ 実行結果を共有しやすい ○ GitHub/GitLabなどではプレビューもできる ■ ※ただしdiffが見やすいというわけではない ○ ドキュメントやサンプルコードの記録として役立つ 6 

Jupyterの特徴 ● 実行結果をテキストだけでなく画像やHTMLで出力 ○ 科学計算や統計などの 可視化 に役立つ ● インタラクティブな実行が可能 ○ AIなどの 実験的 なプログラムの記述に役立つ ● アドホックなコード実行環境になる ○ ※原則として、アプリケーションの本番環境に組み込んだりして使う ためのものではない 7 

JupyterでTypeScriptを使いたい 8 

JupyterでTypeScriptを使いたい Deno本体にJupyterカーネルが組み込まれている！ (ってGeminiが言ってた) Jupyter Kernel for Deno https://docs.deno.com/runtime/reference/cli/jupyter/ 9 

アドホックなコード環境とDenoの相性の良さ ● DenoはTypeScriptを直接実行できる ○ →Pythonと同じ ● Denoは依存関係installしなくて良い ○ →Pythonよりも相性が良い！？ ● 細かいこと ○ 代入が式（expression）なのでセル末尾で代入すれば出力される ○ →Pythonよりも相性が良い！？ 10 

Deno+Jupyter環境構築 mise使っていれば簡単 (使っていない場合は、Denoとuvを自分でインストール) $ mise use deno uv $ uv add jupyterlab $ deno jupyter --install $ uv run jupyter lab → localhost:8888 にアクセス 11 

Deno+Jupyter環境構築 Dockerfileを書く場合の例(PythonイメージにDenoを入れる) FROM python:3.13-slim WORKDIR /app RUN pip install jupyterlab RUN apt-get update && apt-get install -y curl zip unzip RUN curl -fsSL https://deno.land/install.sh | DENO_INSTALL=/usr/local sh RUN deno jupyter --install CMD [ "jupyter", "lab", "--no-browser", "--ip=0.0.0.0", "--allow-root", "--NotebookApp.token=''" ] 12 

実践1 Deno+Jupyterで可視化 13 

「データフレーム」を使って、「可視化」してみる ● データフレーム ○ Pythonで言うPandasやPolars ○ Polarsには公式のNode.jsバインディングがある ■ https://github.com/pola-rs/nodejs-polars ● 可視化 ○ https://observablehq.com/plot/ Deno+Jupyterで可視化 14 

データフレームとは？ import pl from "npm:nodejs-polars"; let df = pl.DataFrame([ {"月":3, "日":1, "最高気温":18.2, "最低気温":7}, {"月":3, "日":2, "最高気温":15.5, "最低気温":12.1}, {"月":3, "日":3, "最高気温":12.2, "最低気温":5.7}, {"月":3, "日":4, "最高気温":8.7, "最低気温":3.7}, {"月":3, "日":5, "最高気温":11.2, "最低気温":8.2}, {"月":3, "日":6, "最高気温":11.7, "最低気温":4.7}, {"月":3, "日":7, "最高気温":9.8, "最低気温":3.8}, ]); 15 

データフレームとは？ ● ※JSONやCSVからも 読み込めます ○ (通常はそうします) 16 

Deno+Jupyterで可視化 import * as Plot from "npm:@observablehq/plot"; import { document } from "jsr:@ry/jupyter-helper"; Plot.plot({ marks: [ Plot.lineY(df.toRecords(), {x: "日", y: "最高気温"}), ], document, }); 17 Webフロントエンドでよく使う `window.document`を 本来渡すところ 

18 

色を付けたり色々できる Plot.plot({ color: {legend: true}, grid: true, marks: [ Plot.ruleY([0]), Plot.lineY(df.toRecords(), {x: "日", y: "最高気温", stroke: "red"}), Plot.lineY(df.toRecords(), {x: "日", y: "最低気温", stroke: "blue"}), Plot.frame(), ], document, }); 19 

20 

実践2 Deno+Jupyterで実験 21 

Deno+Jupyterで実験 ● 実験といえばAI ● AIといえばOpenAI ● openai-node ○ https://github.com/openai/openai-node 22 

Deno+Jupyterで実験 import OpenAI from 'jsr:@openai/openai'; const client = new OpenAI({ apiKey: process.env['OPENAI_API_KEY'], }); const response = await client.responses.create({ model: 'gpt-4.1-mini', input: '日本で一番高い山は？関西弁で', }); console.log(response.output_text); 23 

Deno+Jupyterで実験 24 

Deno+Jupyterで実験 ● 出力を見て、コードを少し変えながら繰り返し実行しやすい ○ プロンプトやパラメータの試行錯誤が必要な 生成AIとも相性が良い ● コードと出力を保存できるので、そのまま記録になる ○ 「新しいモデルが出てきたから、ちょっと試したい」といった おためし的なコードとも相性が良い 25 

VS CodeでDeno+Jupyter 26 

VS CodeでDeno+Jupyter ● VS CodeにはMicrosoft公式Jupyterプラグインがある ○ .ipynbファイルを開いたら、カーネルからDenoを選択 27 

VS CodeでDeno+Jupyter ● データフレームは、セルのプレゼンテーションを `text/html`に変更する必要がある ○ 参考: https://github.com/microsoft/vscode-notebook-renderers/issues /189#issuecomment-2451818378 28 

VS CodeでDeno+Jupyter ● VS Codeで動くので、各種拡張機能もそのまま使える ○ GitHub CopilotやClineなど 29 「モデルをgpt-4.1-miniに 変更して」とClineに指示 

まとめ ● DenoにJupyterカーネルが組み込まれていて TypeScriptでJupyterが使えるようになる ● Jupyter+Denoを使うことで... ○ データを分析・可視化したりしやすい ○ アドホックなコードで実験したりしやすい ○ コードと実行結果を記録して共有したりしやすい ひとことで言うと「雑な用途で気軽に使ってOK」ということ 30 

Thank you! ● suzuki.sh | s2terminal ● http://twitter.com/s2terminal_tech ● 本資料で使ったコード: https://github.com/s2terminal/typescript-jupyter-demo/ ● 本資料のブログ記事: https://qiita.com/suzuki_sh/items/90de3fb79f3eb7756047 31