Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TypeScriptでJupyter

 TypeScriptでJupyter

Avatar for s2terminal

s2terminal

April 22, 2025
Tweet

More Decks by s2terminal

Other Decks in Programming

Transcript

  1. Jupyterの特徴 • 実行結果をテキストだけでなく画像やHTMLで出力 ◦ 科学計算や統計などの 可視化 に役立つ • インタラクティブな実行が可能 ◦

    AIなどの 実験的 なプログラムの記述に役立つ • アドホックなコード実行環境になる ◦ ※原則として、アプリケーションの本番環境に組み込んだりして使う ためのものではない 7
  2. アドホックなコード環境とDenoの相性の良さ • DenoはTypeScriptを直接実行できる ◦ →Pythonと同じ • Denoは依存関係installしなくて良い ◦ →Pythonよりも相性が良い!? •

    細かいこと ◦ 代入が式(expression)なのでセル末尾で代入すれば出力される ◦ →Pythonよりも相性が良い!? 10
  3. Deno+Jupyter環境構築 mise使っていれば簡単 (使っていない場合は、Denoとuvを自分でインストール) $ mise use deno uv $ uv

    add jupyterlab $ deno jupyter --install $ uv run jupyter lab → localhost:8888 にアクセス 11
  4. 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
  5. データフレームとは? 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
  6. 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`を 本来渡すところ
  7. 18

  8. 色を付けたり色々できる 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
  9. 20

  10. 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
  11. 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