Pyodide - ブラウザでPythonが動く時代が来た

はじめに

個人的に、ここ数年で一番「これはすごい」と思ったライブラリがPyodideなんですよ。

簡単に言うと、ブラウザ上でPythonが動くという話です。しかもNumPyやpandas、scikit-learnまで動く。データサイエンス系の仕事をしている人なら、この意味がわかると思います。

PyodideはCPythonをWebAssembly（Emscripten）に移植したプロジェクトで、GitHubスター数は14,000以上。Mozilla Public License 2.0で公開されていて、8年以上の歴史があります。正直なところ、ここまで成熟しているとは知らなかった。

特徴・メリット

サーバー不要でPythonが動く

これが一番大きいですね。通常、PythonをWebで使おうとするとサーバーサイドで実行する必要がある。でもPyodideなら、クライアントサイドで完結します。

サーバー代がかからないというのは、個人開発者にとってはかなりのメリットです。

科学計算パッケージが使える

NumPy
pandas
SciPy
Matplotlib
scikit-learn

このあたりが普通に動きます。データ分析のプロトタイプをブラウザ上で作れるというのは、QOL的にかなり上がる。

JavaScriptとの相互運用

PythonからJavaScriptのDOM操作ができるし、逆にJavaScriptからPythonの変数にアクセスすることもできる。この双方向のインターフェースがあるおかげで、既存のWebアプリにPythonの処理を組み込むことが現実的になります。

micropipでパッケージ管理

PyPIからパッケージをインストールできます。pure Pythonのパッケージなら、基本的には動くと思っていい。

インストール方法

インストールというか、CDNから読み込むだけです。これも手軽で良い。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/pyodide/v0.29.0/full/pyodide.js"></script>
</head>
<body>
  <script>
    async function main() {
      let pyodide = await loadPyodide();
      console.log("Pyodide準備完了");
    }
    main();
  </script>
</body>
</html>

自前のサーバーでホスティングしたい場合は、GitHubのリリースページからダウンロードして配置することもできます。

Node.js環境で使いたい場合は、npmからインストールできます。

npm install pyodide

基本的な使い方

Pythonコードを実行する

async function main() {
  let pyodide = await loadPyodide();

  // 単純な計算
  let result = pyodide.runPython("1 + 2");
  console.log(result); // 3

  // 複数行のコード
  pyodide.runPython(`
import sys
print(f"Python {sys.version}")
  `);
}
main();

JavaScriptとPythonの連携

JavaScript側からPythonに値を渡す場合：

pyodide.globals.set("x", [1, 2, 3, 4, 5]);

pyodide.runPython(`
import statistics
result = statistics.mean(x)
print(f"平均値: {result}")
`);

Python側からJavaScriptのAPIを使う場合：

import js

# DOM操作
div = js.document.createElement("div")
div.innerHTML = "Pythonから作成しました"
js.document.body.appendChild(div)

パッケージのインストール

async function main() {
  let pyodide = await loadPyodide();

  // micropipを読み込む
  await pyodide.loadPackage("micropip");
  const micropip = pyodide.pyimport("micropip");

  // パッケージをインストール
  await micropip.install("requests");

  pyodide.runPython(`
import requests
# ※ブラウザ環境ではCORS制限あり
  `);
}

実践的なユースケース

データ分析ツールをブラウザで提供

CSVファイルをアップロードして、ブラウザ上でpandasを使って分析するツールが作れます。サーバーにデータを送信しないので、機密性の高いデータを扱う場合にも向いています。

async function analyzeCSV(csvText) {
  let pyodide = await loadPyodide();
  await pyodide.loadPackage(["pandas"]);

  pyodide.globals.set("csv_data", csvText);

  return pyodide.runPython(`
import pandas as pd
from io import StringIO

df = pd.read_csv(StringIO(csv_data))
result = {
    "行数": len(df),
    "列数": len(df.columns),
    "統計情報": df.describe().to_dict()
}
result
  `);
}