PyPad ができるまで — Pyodide でブラウザ完結の Python REPL を作る

PyPad は、 Python をインストール不要・サインアップ不要でブラウザだけで実行できる無料の REPL です。 入力したコードと標準出力 / traceback は サーバーに送られず、 ブラウザ内だけで完結 します。 Pyodide (CPython を WebAssembly にコンパイルしたランタイム) を CDN から side-load して使う構成。 メディア処理ラボ 12本柱に続く 13本目、 新カテゴリ 「ブラウザだけで動くプログラミング環境」 を追加しました。

なぜこの形にしたか

オンライン Python (Replit / Programiz / Google Colab) は便利ですが、 すべて コードをサーバー側で実行する 設計です。 機密性のあるスクリプトの動作確認、 個人情報を扱う処理、 「会社の PC に Python を入れたくない / 入れられない」 ユースケースでは、 サーバーに送らない選択肢があった方がいい。

Pyodide が v0.26 で CPython 3.12 互換 + 主要 PyData パッケージ (NumPy / pandas / scikit-learn) を揃え、 ブラウザ実用に届きました。 初回 ~10MB の DL があるものの、 IndexedDB キャッシュで 2回目以降は即起動。 ブラウザ完結 Python の素地が成立しています。

visual direction

Python yellow + Jupyter orange on deep navy。

• 背景: 深い navy #0a0d1c
• メイン: Python 公式 yellow #ffd43b
• 副次: Jupyter orange #f37726

Python のブランドカラーを認識可能な形で使いつつ、 既存 12 サービス (mint / amber / violet / cobalt / lime / gold / rose / indigo / emerald / vermilion / uranium / phosphor) と完全別軸の warm-on-cold で識別性確保。

実装の見どころ

1. CDN side-load + Turbopack バイパス

@xenova/transformers / pyodide のように WASM ランタイムを含む重いパッケージは、 Next.js Turbopack の chunk loader を経由すると Cannot convert undefined or null to object で死ぬ事故を 2回踏みました (word-warp / voice-scribe)。 PyPad は最初から CDN side-load:

const PYODIDE_BASE = "https://cdn.jsdelivr.net/pyodide/v0.26.4/full/"
const s = document.createElement("script")
s.src = `${PYODIDE_BASE}pyodide.js`
document.head.appendChild(s)
// after script loads → window.loadPyodide is callable
const py = await window.loadPyodide({ indexURL: PYODIDE_BASE })

これでバンドラを介さず、 CDN から直接 Pyodide を読み込めます。

2. stdout / stderr の capture

Pyodide は setStdout / setStderr に batched コールバックを渡せます。 各 print 行が文字列としてバッファされ、 実行終了後に UI へ:

let stdout = ""
let stderr = ""
py.setStdout({ batched: (s) => { stdout += s; if (!s.endsWith("\n")) stdout += "\n" } })
py.setStderr({ batched: (s) => { stderr += s; if (!s.endsWith("\n")) stderr += "\n" } })

stdout と stderr を別 pre 要素に出すことで、 traceback (stderr) と通常出力 (stdout) が混ざらない。

3. import 自動検出

Pyodide は loadPackagesFromImports(code) で「コード中の import 文を見て、 必要なパッケージ (NumPy 等) を自動 DL」 してくれます。 失敗しても本実行で改めて ImportError が出るので、 best-effort で呼び warn だけ:

try {
  await py.loadPackagesFromImports(code)
} catch (e) {
  console.warn("[py-pad] loadPackagesFromImports warning", e)
}
const result = await py.runPythonAsync(code)

4. 最後の式の評価

REPL 体験を出すために、 runPythonAsync の戻り値 (= 最後の式の評価結果) を捕まえて UI に「last expression」 ラベルで表示します。 print("x") だけのコードは戻り値 None なので stdout 側に出る。 2 + 2 のような式は last expression 側で 4 と見える。

5. SEO §7.1 主用語確定

• 主: 「Python ブラウザ実行」「オンライン Python」「Python REPL」
• 補: 「Pyodide」「WebAssembly」「インストール不要」「サインアップ不要」「無料」

title / description / Hero h1 / FAQ最初の Q / service.tags の 5箇所に主用語を散布。 LLMO 用に「インストール不要 / アップロード不要 / ブラウザ完結 / 完全オフライン (初回後)」 を description へ。

6. §8.5.2 output reality invariants

result panel に data-stdout / data-stderr / data-result / data-failed を出して、 e2e で:

• print("hi") → stdout に hi
• 1 + 1 → result に 2
• 1/0 → failed=1, stderr に ZeroDivisionError

を assert。 silent fail の余地を構造的に潰します。

苦労したところ

• Pyodide の TS 型: 公式パッケージは TS 型を提供していますが、 CDN side-load 経由だと global window.loadPyodide のシグネチャを自分で書く必要があります。 最小限の手書き Pyodide 型で凌ぎました。
• Tab キーの編集挙動: textarea のデフォルト挙動 (Tab でフォーカス移動) を上書きして 4スペース挿入に。 簡易 IDE 体験。
• Ctrl+Enter 実行: 一般的な REPL ショートカット。 onKeyDown でハンドル。

このサービスから言える事

ラボの 13本柱:

• voice-scribe / clip-cast / bg-snap / text-pluck / pdf-anvil / pixel-lift / pic-flip / mind-cell / beam-drop / word-warp / exif-peel / ascii-bake / py-pad

カテゴリ:

• 認識 / 変換 / 生成 / 転送 / インスペクション / クリエイティブ / プログラミング環境 ← 新

「ブラウザ完結」 の射程が、 メディア処理から AI チャット、 P2P 通信、 メタデータ検査、 ASCII アート、 そして本物のプログラミング言語ランタイムまで伸びました。 「重い処理だけがブラウザの中で動くわけではない」 を 13本目で改めて示した形です。