TypeScriptでJupyter

kansai.ts #10 - connpass https://kansaits.connpass.com/event/348764/

TypeScriptでJupyter - Qiita https://qiita.com/suzuki_sh/items/90de3fb79f3eb7756047

Transcript

1. TypeScriptでJupyter 2025-04-22 kansai.ts #10 suzuki.sh | s2terminal
2. Jupyterとは？ • おもにブラウザで動かす、インタラクティブな実行環境 • Pythonの機能ではないが、Pythonでよく使われるし Pythonの著名なライブラリ等と密接な関係がある • 「カーネル」を変更することでPython以外でも使える ◦ →TypeScriptでJupyterできないかな？ 2
3. Jupyterとは？ 3
4. Jupyterの特徴 • 「セル」にコードを書いて実行 4
5. Jupyterの特徴 • 「セル」にはコードの他にMarkdownも書ける 5
6. Jupyterの特徴 • 扱うファイル`.ipynb`の中身はただのJSONデータ ◦ 実行結果を共有しやすい ◦ GitHub/GitLabなどではプレビューもできる ▪ ※ただしdiffが見やすいというわけではない ◦ ドキュメントやサンプルコードの記録として役立つ 6
7. Jupyterの特徴 • 実行結果をテキストだけでなく画像やHTMLで出力 ◦ 科学計算や統計などの 可視化 に役立つ • インタラクティブな実行が可能 ◦ AIなどの 実験的 なプログラムの記述に役立つ • アドホックなコード実行環境になる ◦ ※原則として、アプリケーションの本番環境に組み込んだりして使う ためのものではない 7
8. JupyterでTypeScriptを使いたい 8
9. JupyterでTypeScriptを使いたい Deno本体にJupyterカーネルが組み込まれている！ (ってGeminiが言ってた) Jupyter Kernel for Deno https://docs.deno.com/runtime/reference/cli/jupyter/ 9
10. アドホックなコード環境とDenoの相性の良さ • DenoはTypeScriptを直接実行できる ◦ →Pythonと同じ • Denoは依存関係installしなくて良い ◦ →Pythonよりも相性が良い！？ • 細かいこと ◦ 代入が式（expression）なのでセル末尾で代入すれば出力される ◦ →Pythonよりも相性が良い！？ 10
11. Deno+Jupyter環境構築 mise使っていれば簡単 (使っていない場合は、Denoとuvを自分でインストール) $ mise use deno uv $ uv add jupyterlab $ deno jupyter --install $ uv run jupyter lab → localhost:8888 にアクセス 11
12. 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
13. 実践1 Deno+Jupyterで可視化 13
14. 「データフレーム」を使って、「可視化」してみる • データフレーム ◦ Pythonで言うPandasやPolars ◦ Polarsには公式のNode.jsバインディングがある ▪ https://github.com/pola-rs/nodejs-polars • 可視化 ◦ https://observablehq.com/plot/ Deno+Jupyterで可視化 14
15. データフレームとは？ 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
16. データフレームとは？ • ※JSONやCSVからも 読み込めます ◦ (通常はそうします) 16
17. 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`を 本来渡すところ
19. 色を付けたり色々できる 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
21. 実践2 Deno+Jupyterで実験 21
22. Deno+Jupyterで実験 • 実験といえばAI • AIといえばOpenAI • openai-node ◦ https://github.com/openai/openai-node 22
23. 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
24. Deno+Jupyterで実験 24
25. Deno+Jupyterで実験 • 出力を見て、コードを少し変えながら繰り返し実行しやすい ◦ プロンプトやパラメータの試行錯誤が必要な 生成AIとも相性が良い • コードと出力を保存できるので、そのまま記録になる ◦ 「新しいモデルが出てきたから、ちょっと試したい」といった おためし的なコードとも相性が良い 25
26. VS CodeでDeno+Jupyter 26
27. VS CodeでDeno+Jupyter • VS CodeにはMicrosoft公式Jupyterプラグインがある ◦ .ipynbファイルを開いたら、カーネルからDenoを選択 27
28. VS CodeでDeno+Jupyter • データフレームは、セルのプレゼンテーションを `text/html`に変更する必要がある ◦ 参考: https://github.com/microsoft/vscode-notebook-renderers/issues /189#issuecomment-2451818378 28
29. VS CodeでDeno+Jupyter • VS Codeで動くので、各種拡張機能もそのまま使える ◦ GitHub CopilotやClineなど 29 「モデルをgpt-4.1-miniに 変更して」とClineに指示
30. まとめ • DenoにJupyterカーネルが組み込まれていて TypeScriptでJupyterが使えるようになる • Jupyter+Denoを使うことで... ◦ データを分析・可視化したりしやすい ◦ アドホックなコードで実験したりしやすい ◦ コードと実行結果を記録して共有したりしやすい ひとことで言うと「雑な用途で気軽に使ってOK」ということ 30
31. 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