PyScriptとは？ブラウザでPythonが動く時代へ
「Pythonって、ブラウザで直接動いたら最高じゃない？」そんな夢を現実にしたのが、Anacondaが開発したPyScriptです。
従来、ブラウザ上で動くプログラミング言語といえばJavaScript一択でした。しかし2022年にPyScriptが登場したことで、Python開発者もサーバーなしでブラウザだけでコードを実行できるようになりました。裏側ではWebAssemblyという技術（主にPyodideまたはMicroPython）が動いており、PythonコードをブラウザのJavaScript環境上で解釈・実行しています。
JavaScriptを書けないPythonエンジニアでも、データ可視化ツールや教育用デモをWebページとして公開できるのは、かなり魅力的ですよね。本記事では実際に動くコード例を交えながら、PyScriptの使い方と注意点をしっかり解説していきます！
セットアップはCDNリンクを貼るだけ
PyScriptの導入は拍子抜けするほど簡単です。HTMLファイルの<head>タグ内に以下のCDNリンクを追加するだけで準備完了です。
<!-- PyScript CDN（最新版） -->
<link rel="stylesheet" href="https://pyscript.net/releases/2024.1.1/core.css">
<script type="module" src="https://pyscript.net/releases/2024.1.1/core.js"></script>バージョンは公式サイト（pyscript.net）で最新のものを確認してください。なお、v2023以降の新APIでは<py-script>タグは非推奨となり、代わりに<script type="py">タグを使います。本記事では新APIで解説します。
まずはHello World！最もシンプルな実行例
「百聞は一見に如かず」ということで、まず最もシンプルなサンプルを見てみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PyScript Hello World</title>
<link rel="stylesheet" href="https://pyscript.net/releases/2024.1.1/core.css">
<script type="module" src="https://pyscript.net/releases/2024.1.1/core.js"></script>
</head>
<body>
<h1>PyScript テスト</h1>
<!-- ここにPythonを書く -->
<script type="py">
print("Hello, PyScript!")
result = [x ** 2 for x in range(1, 6)]
print(result)
</script>
</body>
</html>print()の出力はブラウザの開発者ツールのコンソール、またはPyScriptのログ出力エリアに表示されます。[1, 4, 9, 16, 25]が出力されれば成功です。Pythonがそのまま書けるのは感動的ですね！
DOM操作の実例：ボタンクリックでPython処理を実行
PyScriptの真価は、HTMLのDOMと連携できる点にあります。jsモジュールとdocumentオブジェクトを使ってDOM操作が可能です。以下はボタンをクリックするとPythonで計算した結果を画面に表示するサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PyScript DOM操作</title>
<link rel="stylesheet" href="https://pyscript.net/releases/2024.1.1/core.css">
<script type="module" src="https://pyscript.net/releases/2024.1.1/core.js"></script>
</head>
<body>
<h1>FizzBuzz ジェネレーター</h1>
<button id="btn">実行する</button>
<div id="output"></div>
<script type="py">
from pyscript import document
def run_fizzbuzz(event):
result = []
for i in range(1, 21):
if i % 15 == 0:
result.append("FizzBuzz")
elif i % 3 == 0:
result.append("Fizz")
elif i % 5 == 0:
result.append("Buzz")
else:
result.append(str(i))
output_div = document.getElementById("output")
output_div.innerHTML = "<p>" + ", ".join(result) + "</p>"
btn = document.getElementById("btn")
btn.addEventListener("click", run_fizzbuzz)
</script>
</body>
</html>ポイントはfrom pyscript import documentという一行。これでJavaScriptのdocumentオブジェクトと同様にDOM要素を操作できます。ボタンのイベントリスナーもaddEventListenerでそのまま設定できるのがスマートですね。
NumPyとPandasを使った実例
PyScriptではPyodide経由でNumPyやPandasといった科学計算ライブラリも利用できます。<py-config>タグ（またはJSONの設定）でパッケージを指定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PyScript + NumPy & Pandas</title>
<link rel="stylesheet" href="https://pyscript.net/releases/2024.1.1/core.css">
<script type="module" src="https://pyscript.net/releases/2024.1.1/core.js"></script>
</head>
<body>
<h1>売上データ分析（NumPy + Pandas）</h1>
<div id="result">読み込み中...</div>
<!-- 使用パッケージの宣言 -->
<script type="py" config='{"packages": ["numpy", "pandas"]}'>
import numpy as np
import pandas as pd
from pyscript import document
# サンプルデータ作成
data = {
"月": ["1月", "2月", "3月", "4月", "5月"],
"売上": [120, 150, 130, 170, 160]
}
df = pd.DataFrame(data)
sales = np.array(df["売上"])
avg = np.mean(sales)
max_val = np.max(sales)
min_val = np.min(sales)
html = f"""
<table border="1" cellpadding="8">
<tr><th>月</th><th>売上（万円）</th></tr>
"""
for _, row in df.iterrows():
html += f"<tr><td>{row['月']}</td><td>{row['売上']}</td></tr>"
html += f"""
</table>
<p>平均売上: <strong>{avg:.1f}万円</strong></p>
<p>最大: {max_val}万円 ／ 最小: {min_val}万円</p>
"""
document.getElementById("result").innerHTML = html
</script>
</body>
</html>config='{"packages": ["numpy", "pandas"]}'と書くことで、Pyodideが初回ロード時に必要なパッケージを自動的にダウンロードしてくれます。あとは通常のPythonコードとほぼ同じ感覚で書けます。
注意点・制限事項（ここは正直に話します）
PyScriptは非常に面白い技術ですが、実用上のハードルもいくつかあります。正直にお伝えします。
① 初回ロードが重い
Pyodideのランタイム本体が数MB〜数十MB規模です。ページを初めて開いたときにダウンロードが走るため、数秒〜数十秒の待ち時間が発生します。パッケージを追加するとさらに時間がかかります。ユーザー体験を考えると「読み込み中…」のような表示を必ず入れておきましょう。
② 使えるパッケージに制限がある
全てのpipパッケージが使えるわけではありません。Pyodideが対応しているパッケージのみ利用可能です。C拡張に依存するパッケージ（例：一部のscikit-learnプラグイン、OpenCVなど）は動かないことがあります。使用前にPyodideのパッケージ対応リストを確認しましょう。
③ 非同期処理・スレッドの扱いに注意
ブラウザのシングルスレッド環境で動作するため、重い処理を同期的に実行するとUIがフリーズします。非同期処理（async/await）を活用するか、Web Workerを使う設計を検討しましょう。
④ APIの変更が多い（バージョン管理に注意）
PyScriptはまだ発展途上のプロジェクトです。<py-script>タグが非推奨になったように、バージョンアップでAPIが変わることがあります。CDNのバージョンを固定して使うのが安全です。
向いているユースケースと向いていないユースケース
| ✅ 向いているケース | ❌ 向いていないケース |
|---|---|
| 教育・学習用のデモページ | 高速レスポンスが必要な本番Webアプリ |
| データ可視化の共有ツール | 重いML学習処理 |
| サーバーレスの簡易ツール作成 | ファイルシステムへの直接アクセスが必要な処理 |
| PythonコードのWebデモ公開 | C拡張依存パッケージを多用するアプリ |
| Jupyter代替の軽量インタラクティブページ | SEOや初期表示速度が重要なサイト |
特に教育・デモ用途との相性は抜群です。「このコードを実際に試してみよう」という体験をWebページ上で提供できるのは、PyScript最大の強みです。
まとめ
PyScriptは「JavaScriptを書かなくてもWebでPythonが動く」という、Python開発者にとって夢のような技術です。CDNリンク一枚で始められる手軽さ、NumPy・Pandasなどのエコシステムをそのまま活かせる点は大きな魅力です。
一方でロード時間の重さやパッケージ制限など、現時点では本番プロダクションよりも教育・デモ・プロトタイプ用途に最適な技術です。WebAssemblyの進化と共にPyScriptも成熟していくことが期待されており、今のうちに触っておく価値は十分あります。
「JavaScriptは苦手だけどWebにPythonを出したい」という方は、ぜひ今回のコードをコピペして試してみてください。ブラウザでPythonが動く感動、ぜひ体験してみましょう！🐍
PR
📚 関連商品・おすすめ書籍
※本記事にはアフィリエイトリンクが含まれます。
