Pythonをブラウザで動かせるPyodideとは？仕組みと使い方を解説

はじめに

一般的なPythonプログラムは、パソコンへPythonをインストールし、ターミナルから実行します。

WebアプリでPythonを使う場合は、サーバー側でDjangoやFlask、FastAPIなどを動かし、ブラウザからリクエストを送る構成もよく使われます。

しかし、Pyodideを使うと、Pythonの実行環境そのものをWebブラウザへ読み込み、利用者の端末内でPythonコードを実行できます。

Pythonをインストールしていないパソコンでも、Webページを開くだけでPythonによる計算やデータ処理を実行できるのです。

この記事では、Pyodideの仕組みから具体的な使い方まで、次の内容を解説します。

• Pyodideとは何か
• Pythonがブラウザで動く仕組み
• WebAssemblyの役割
• 通常のPython、PyScript、サーバー構成との違い
• Pyodideが向いているアプリと向いていないアプリ
• JavaScriptからPythonを実行する基本的な方法

最後には、2つの数値と演算方法を入力すると、ブラウザ内のPythonが四則演算を行う計算アプリを完成させます。

「Hello Worldを表示できた」で終わらず、入力、計算、結果表示、エラー処理までを持つ小さなWebアプリを作ってみましょう。

Pyodideとは

Pyodideは、WebAssemblyを利用してブラウザやNode.jsでPythonを動かすためのPythonディストリビューションです。

公式ドキュメントでは、PyodideはCPythonをWebAssemblyとEmscriptenへ移植したものと説明されています。

CPythonは、一般にPython公式サイトからインストールして使う、標準的なPython処理系です。PyodideはPythonに似た独自言語を作ったものではなく、このCPythonをブラウザで実行できる形にしたプロジェクトです。

Pyodideには、主に次の特徴があります。

• ブラウザ内でPythonコードを実行できる
• JavaScriptからPythonを呼び出せる
• PythonからDOMやFetch APIなどのWeb APIを利用できる
• PythonとJavaScriptの間で値や関数を受け渡せる
• Python標準ライブラリの多くを利用できる
• NumPy、pandas、SciPy、Matplotlib、scikit-learnなどの対応パッケージを読み込める
• Pure PythonのWheelが用意されたパッケージをmicropipでインストールできる

つまりPyodideは、単にPythonの構文を一部再現するライブラリではありません。

ブラウザの中へPython実行環境を持ち込み、JavaScriptやWeb APIと組み合わせて使えるようにする基盤です。

Pythonがブラウザで動く仕組み

通常、ブラウザが直接実行するプログラミング言語として最もよく使われるのはJavaScriptです。

HTMLがページの構造、CSSが見た目、JavaScriptがボタン操作や画面更新などの動きを担当します。

Pyodideを利用する場合も、最初に動き始めるのはJavaScriptです。JavaScriptがPyodideのローダーを読み込み、loadPyodide()を呼び出してPython実行環境を準備します。

準備が完了したら、JavaScriptからpyodide.runPython()へPythonコードを文字列として渡します。

const pyodide = await loadPyodide();
const result = pyodide.runPython("1 + 2");

console.log(result); // 3

内部では、WebAssemblyへ変換されたCPythonがPythonコードを解釈して実行します。最後の式の値はJavaScript側へ返せるため、計算結果をHTMLへ表示できます。

Webページを開いてから結果を表示するまでの流れは、次のようになります。

1. 利用者がWebページを開く
2. ブラウザがJavaScriptを読み込む
3. loadPyodide()でPython実行環境を準備する
4. WebAssembly版のCPythonがPythonコードを実行する
5. Pythonの実行結果をJavaScriptへ返す
6. JavaScriptが結果をHTMLへ表示する

今回作るアプリでは、HTMLの入力欄からJavaScriptが数値を取得し、その値をPythonへ渡します。計算はPythonが担当し、返された結果をJavaScriptが画面へ表示します。

WebAssemblyとは

WebAssemblyは、ブラウザなどで効率よく実行できるように設計された、コンパクトなバイナリ形式です。略してWasmとも呼ばれます。

C、C++、Rustなどで書かれたプログラムをWebAssembly向けにコンパイルすると、JavaScript以外の言語で作られた処理もブラウザで利用できるようになります。

WebAssemblyは、JavaScriptを置き換えるための技術ではありません。

JavaScriptと連携し、それぞれが得意な処理を担当できるようにする技術です。

Pyodideの場合は、次のように役割を分けられます。

開発者がPyodideを利用するだけなら、WebAssemblyのバイナリを自分で書く必要はありません。

PyodideがWebAssemblyとして用意されたPython実行環境を提供し、JavaScript用のAPIから扱いやすくしてくれます。

通常のPythonとの違い

PyodideはCPythonを基盤にしているため、変数、関数、リスト、辞書、クラスなど、基本的なPythonコードは通常とほぼ同じように記述できます。

def calculate_total(prices):
    return sum(prices)


calculate_total([120, 350, 480])

一方、実行場所はOS上ではなくブラウザ内です。ブラウザの安全上の制限を受けるため、通常のPythonと完全に同じではありません。

たとえば、tkinterでデスクトップ画面を作るプログラムや、OSのコマンドをsubprocessで実行するプログラムを、そのままPyodideへ移すことはできません。

また、PyPIに公開されているパッケージがすべて動くわけではありません。

Pythonだけで実装されたパッケージは比較的利用しやすい一方、CやRustなどの拡張機能を含むパッケージは、WebAssembly向けのビルドが必要です。Pyodide側で対応済みかどうかを確認する必要があります。

PyScriptとの違い

Pyodideとよく似た名前として、PyScriptがあります。

両者は競合する別実装というより、異なる層を担当する技術です。

Pyodideは、CPythonをWebAssemblyで動かし、PythonとJavaScriptを接続するための実行環境です。

PyScriptは、HTML内のPythonコード、イベント処理、画面表示、設定、Web Workerなどを扱いやすくするためのブラウザ向けPythonプラットフォームです。実行環境としてPyodideまたはMicroPythonを選べます。

PyScriptでPyodideを選んだ場合、内部のPython実行にはPyodideが使われます。

この記事では、ブラウザでPythonが動く基本構造を理解するため、PyScriptを介さずにPyodideをJavaScriptから直接呼び出します。

サーバーでPythonを動かす構成との違い

WebアプリでPythonを使う従来の構成では、Pythonはサーバーで動きます。

ブラウザは入力内容をHTTPリクエストとしてサーバーへ送り、サーバーのPythonがデータベース処理や計算を行い、結果をブラウザへ返します。

サーバー構成：ブラウザ → インターネット → Pythonサーバー → ブラウザ
Pyodide構成：ブラウザ内の画面 → ブラウザ内のPython → ブラウザ内の画面

主な違いは次のとおりです。

Pyodideを使っても、Webサイトを公開するための静的ホスティングは必要です。しかし、計算のたびにPythonサーバーへリクエストを送る必要はありません。

一方、ログイン情報の確認、決済、秘密鍵を使う処理、共有データベースの更新などは、信頼できるサーバー側で行う必要があります。

ブラウザへ送ったコードや値は、利用者が開発者ツールなどで確認、変更できるためです。

Pyodideでできること

Pyodideを使うと、次のような処理をブラウザ内へ組み込めます。

• 入力された数値の計算
• CSVやJSONデータの読み込みと集計
• NumPyやpandasを使ったデータ分析
• Matplotlibによるグラフ作成
• 統計シミュレーション
• Pythonコードを試せる学習教材やREPL
• ブラウザ内で完結するデータ変換ツール
• 機械学習モデルを使った小規模な予測
• Pythonライブラリのデモ

PythonとJavaScriptは相互に連携できます。

JavaScriptからPythonの関数を呼ぶだけでなく、PythonからdocumentなどのWeb APIへアクセスして、HTML要素を操作することも可能です。

ただし、最初からすべてをPythonで書く必要はありません。

HTMLやボタン操作はJavaScript、複雑な計算や既存ライブラリの利用はPythonというように、役割を分けることもできます。

Pyodideが向いているアプリ

Pyodideは、入力データを利用者の端末内で処理し、結果をその場で返せるアプリに向いています。

たとえば、CSVを読み込んで集計するツールなら、ファイルをサーバーへアップロードせず、ブラウザ内で処理できます。適切に実装すれば、業務データや個人データを外部の計算サーバーへ送らずに済みます。

具体的には、次のような用途と相性がよいでしょう。

• Pythonを学ぶためのブラウザ教材
• 数式、統計、金融などの計算ツール
• CSVやJSONの変換・集計ツール
• データ可視化のデモ
• 端末内で完結する試作アプリ
• Pythonライブラリを紹介するインタラクティブなドキュメント
• サーバーの実行コストを抑えたい小規模ツール
• 一度読み込んだ後にオフラインでも使いたいアプリ

特に、すでにPythonで書いた計算ロジックがあり、それをインストール不要のWeb画面から使えるようにしたい場合は有力な選択肢です。

Pyodideが向いていないアプリ

Pyodideは便利ですが、Pythonサーバーの代わりになるとは限りません。

次のような用途では、サーバー側のPythonや別の構成を検討したほうがよいでしょう。

• パスワード、APIキー、秘密鍵を安全に隠す必要がある
• 決済や権限判定など、利用者に変更されてはいけない処理を行う
• 複数ユーザーで同じデータベースを共有する
• 大量データをサーバーへ保存する
• 長時間の重い計算を行う
• 利用者の端末性能に関係なく一定の処理速度が必要
• OSのファイル、ソケット、プロセスなどへ自由にアクセスする
• Pyodideに対応していないネイティブ拡張パッケージを使う
• 初回からすぐに表示したい、読み込み速度が重要なページ

Pyodideを通常のメインスレッドで実行すると、重い同期処理によってページの操作が止まることもあります。

大きなデータ処理や時間のかかる計算を行う場合は、Web Workerへ処理を分離する設計が必要です。Web Workerについては、今後の記事で詳しく扱います。

今回作成する計算アプリ

ここからは、Pyodideを使って実際にWebアプリを作成します。

完成するアプリには、次の機能があります。

• 2つの数値を入力できる
• 足し算、引き算、掛け算、割り算を選べる
• JavaScriptからPythonへ入力値を渡す
• Pythonで計算した結果を画面へ表示する
• 数値が未入力の場合にメッセージを表示する
• 0で割ろうとした場合にエラーを表示する
• Pyodideの準備が終わるまで計算ボタンを無効にする

今回は仕組みを確認しやすいように、HTML、CSS、JavaScript、Pythonコードを1つのHTMLファイルへまとめます。

計算アプリを作成する

index.htmlという名前でファイルを作成し、次のコードを入力してください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pyodide計算アプリ</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      color: #1f2937;
      background: #f3f4f6;
      font-family: system-ui, sans-serif;
    }

    .calculator {
      width: min(100%, 420px);
      padding: 28px;
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
    }

    h1 {
      margin-top: 0;
      font-size: 1.5rem;
    }

    label {
      display: block;
      margin-top: 16px;
      font-weight: 700;
    }

    input,
    select,
    button {
      width: 100%;
      margin-top: 8px;
      padding: 12px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font: inherit;
    }

    button {
      margin-top: 24px;
      border: 0;
      color: #ffffff;
      background: #2563eb;
      font-weight: 700;
      cursor: pointer;
    }

    button:disabled {
      background: #94a3b8;
      cursor: wait;
    }

    .status,
    .result {
      margin-bottom: 0;
      padding: 12px;
      border-radius: 8px;
      background: #eff6ff;
    }

    .result {
      margin-top: 16px;
      font-size: 1.2rem;
      font-weight: 700;
    }

    .error {
      color: #b91c1c;
      background: #fef2f2;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/pyodide/v314.0.3/full/pyodide.js"></script>
</head>
<body>
  <main class="calculator">
    <h1>Pyodide計算アプリ</h1>
    <p id="status" class="status" role="status">
      Pythonを準備しています...
    </p>

    <label for="number1">1つ目の数値</label>
    <input id="number1" type="number" step="any" value="10">

    <label for="operator">計算方法</label>
    <select id="operator">
      <option value="+">足し算（+）</option>
      <option value="-">引き算（-）</option>
      <option value="*">掛け算（×）</option>
      <option value="/">割り算（÷）</option>
    </select>

    <label for="number2">2つ目の数値</label>
    <input id="number2" type="number" step="any" value="5">

    <button id="calculateButton" type="button" disabled>
      計算する
    </button>

    <p id="result" class="result" aria-live="polite">
      計算結果がここに表示されます。
    </p>
  </main>

  <script>
    const statusElement = document.getElementById("status");
    const resultElement = document.getElementById("result");
    const calculateButton = document.getElementById("calculateButton");

    let pyodide;

    async function initializePyodide() {
      try {
        pyodide = await loadPyodide();
        statusElement.textContent = "Pythonの準備ができました。";
        calculateButton.disabled = false;
      } catch (error) {
        statusElement.textContent = "Pythonを読み込めませんでした。";
        statusElement.classList.add("error");
        console.error(error);
      }
    }

    function calculate() {
      const number1Text = document.getElementById("number1").value;
      const number2Text = document.getElementById("number2").value;
      const operator = document.getElementById("operator").value;

      resultElement.classList.remove("error");

      if (number1Text === "" || number2Text === "") {
        resultElement.textContent = "2つの数値を入力してください。";
        resultElement.classList.add("error");
        return;
      }

      const number1 = Number(number1Text);
      const number2 = Number(number2Text);

      pyodide.globals.set("number1", number1);
      pyodide.globals.set("number2", number2);
      pyodide.globals.set("operator", operator);

      const pythonCode = `
def calculate(number1, number2, operator):
    if operator == "+":
        return number1 + number2
    if operator == "-":
        return number1 - number2
    if operator == "*":
        return number1 * number2
    if operator == "/":
        if number2 == 0:
            raise ValueError("0では割れません。")
        return number1 / number2
    raise ValueError("対応していない計算方法です。")


calculate(number1, number2, operator)
      `;

      try {
        const result = pyodide.runPython(pythonCode);
        resultElement.textContent = `計算結果：${result}`;
      } catch (error) {
        const message = error.message.includes("0では割れません")
          ? "0では割れません。"
          : "計算中にエラーが発生しました。";

        resultElement.textContent = message;
        resultElement.classList.add("error");
        console.error(error);
      } finally {
        pyodide.globals.delete("number1");
        pyodide.globals.delete("number2");
        pyodide.globals.delete("operator");
      }
    }

    calculateButton.addEventListener("click", calculate);
    initializePyodide();
  </script>
</body>
</html>

計算アプリを実行する

保存したindex.htmlをWebブラウザで開きます。

画面を開くと、最初は次のメッセージが表示されます。

Pythonを準備しています...

Pyodideの読み込みが完了すると、メッセージが変わり、「計算する」ボタンを押せるようになります。

Pythonの準備ができました。

初回は、PyodideのJavaScript、WebAssembly、Python標準ライブラリなどをCDNから取得するため、完了まで少し時間がかかる場合があります。

初期値の10と5で足し算を実行すると、次の結果が表示されます。

計算結果：15

割り算を選び、2つ目の数値へ0を入力すると、Python側でエラーを発生させ、画面には次のメッセージを表示します。

0では割れません。

ファイルを直接開いたときにブラウザのセキュリティ設定によって読み込めない場合は、index.htmlがあるフォルダで次のコマンドを実行してください。

python -m http.server 8000

その後、ブラウザでhttp://localhost:8000/を開きます。

Pyodideを読み込むコード

まず、PyodideのJavaScriptファイルをCDNから読み込みます。

<script src="https://cdn.jsdelivr.net/pyodide/v314.0.3/full/pyodide.js"></script>

サンプルではバージョン番号を明示しています。

latestや開発版を指定すると、将来の更新によって動作が変わる可能性があります。公開するアプリでは、動作確認したバージョンを固定すると管理しやすくなります。

次に、loadPyodide()で実行環境を準備します。

async function initializePyodide() {
  pyodide = await loadPyodide();
}

loadPyodide()は非同期処理です。

読み込みが終わる前にPythonコードを実行するとエラーになるため、awaitで完了を待ちます。

今回のコードでは、準備中に計算ボタンを無効にし、読み込みが完了してから有効にしています。

pyodide = await loadPyodide();
statusElement.textContent = "Pythonの準備ができました。";
calculateButton.disabled = false;

JavaScriptからPythonへ値を渡す

入力欄の値は、最初にJavaScriptで取得します。

const number1Text = document.getElementById("number1").value;
const number2Text = document.getElementById("number2").value;
const operator = document.getElementById("operator").value;

HTMLのinputから取得した値は文字列です。

そこで、未入力ではないことを確認してから、Number()で数値へ変換します。

const number1 = Number(number1Text);
const number2 = Number(number2Text);

変換した値は、pyodide.globals.set()を使ってPythonのグローバル変数へ渡します。

pyodide.globals.set("number1", number1);
pyodide.globals.set("number2", number2);
pyodide.globals.set("operator", operator);

この方法なら、利用者の入力文字列をPythonコードへ直接埋め込む必要がありません。

たとえば、次のように文字列を組み立てて実行する方法は避けましょう。

// 入力内容をPythonコードへ直接連結しない
const result = pyodide.runPython(number1Text + operator + number2Text);

今回の入力欄はtype="number"で、演算子も選択肢から選びますが、入力とコードを分ける習慣を付けることが重要です。

Pythonで四則演算を行う

計算処理は、Pythonのcalculate()関数へまとめています。

def calculate(number1, number2, operator):
    if operator == "+":
        return number1 + number2
    if operator == "-":
        return number1 - number2
    if operator == "*":
        return number1 * number2
    if operator == "/":
        if number2 == 0:
            raise ValueError("0では割れません。")
        return number1 / number2
    raise ValueError("対応していない計算方法です。")

演算子に応じて、足し算、引き算、掛け算、割り算を切り替えます。

割り算では、2つ目の数値が0かどうかを先に確認します。

if number2 == 0:
    raise ValueError("0では割れません。")

関数を定義した後、最後の行で実行します。

calculate(number1, number2, operator)

pyodide.runPython()は、Pythonコードの最後が式なら、その評価結果をJavaScript側へ返します。

const result = pyodide.runPython(pythonCode);
resultElement.textContent = `計算結果：${result}`;

今回の戻り値は数値なので、JavaScriptの値としてそのまま表示できます。

リスト、辞書、NumPy配列などを扱う場合は、Pythonオブジェクトのプロキシや型変換について追加の理解が必要です。今後の記事で詳しく解説します。

エラーを画面へ表示する

Pythonコードの実行部分は、JavaScriptのtry...catchで囲んでいます。

try {
  const result = pyodide.runPython(pythonCode);
  resultElement.textContent = `計算結果：${result}`;
} catch (error) {
  resultElement.textContent = "計算中にエラーが発生しました。";
}

Pythonで例外が発生すると、Pyodideを通してJavaScript側でもエラーとして受け取れます。

実際のアプリでは、詳しいエラー情報をそのまま利用者へ見せるのではなく、分かりやすいメッセージへ置き換えるとよいでしょう。

また、計算後は一時的に追加したグローバル変数を削除しています。

pyodide.globals.delete("number1");
pyodide.globals.delete("number2");
pyodide.globals.delete("operator");

この小さなアプリでは残しても大きな問題にはなりませんが、何度も異なる処理を実行するアプリでは、利用し終わった値を整理すると状態を管理しやすくなります。

Pyodideを利用するときの注意点

初回読み込みに時間がかかる

Pyodideでは、ブラウザがPython実行環境をダウンロードして初期化します。

JavaScriptだけで作った小さな計算機と比べると、初回の読み込みは重くなります。単純な足し算だけを本番で提供するなら、JavaScriptだけで実装したほうが軽量です。

今回あえてPythonで計算するのは、今後NumPy、pandas、Matplotlibなどを使うアプリへ発展させるための最小例だからです。

Pythonコードは利用者から見える

ブラウザへ配信したHTML、JavaScript、Pythonコードは、利用者が開発者ツールなどで確認できます。

次のような情報をコードへ書いてはいけません。

• APIキー
• データベースのパスワード
• 秘密鍵
• 管理者だけが知る認証情報
• 外部へ公開できない判定ロジック

秘密情報を使う処理はサーバー側で行い、ブラウザには必要最小限の結果だけを返します。

重い処理は画面を止めることがある

今回の計算は一瞬で終わるため、メインスレッドで実行しても問題ありません。

一方、大量データの集計や長時間のシミュレーションを同期的に実行すると、計算が終わるまでボタンやスクロールが反応しなくなる可能性があります。

重い処理では、PyodideをWeb Worker内で動かす構成を検討してください。

外部通信にはブラウザの制限がある

Pyodideから外部データを取得する場合も、通信はブラウザを通ります。

そのため、接続先サーバーのCORS設定など、通常のWebアプリと同じ制限を受けます。通常のPythonでrequestsが動くURLでも、Pyodideではブラウザによって通信を拒否される場合があります。

計算アプリを改善してみよう

完成したアプリは、次のように発展させられます。

• 余りを求める
• べき乗を計算する
• 平方根を計算する
• 計算履歴をリストで表示する
• Enterキーでも計算できるようにする
• Pythonコードを別ファイルへ分ける
• Web WorkerでPythonを実行する

たとえば、べき乗を追加する場合は、選択肢へ**を追加し、Python関数へ次の条件を加えます。

if operator == "**":
    return number1 ** number2

まずは表示する文章や色を変更し、自分のアプリとして作り替えてみてください。

まとめ

Pyodideは、CPythonをWebAssemblyとEmscriptenへ移植し、ブラウザやNode.jsでPythonを動かせるようにしたPythonディストリビューションです。

JavaScriptからloadPyodide()で実行環境を準備し、pyodide.runPython()へPythonコードを渡すことで、ブラウザ内で計算を実行できます。

今回作成したアプリでは、次の流れを実装しました。

1. HTMLの入力欄からJavaScriptで値を取得する
2. pyodide.globals.set()でPythonへ値を渡す
3. Pythonの関数で四則演算を行う
4. 戻り値をJavaScriptで受け取る
5. 計算結果またはエラーをHTMLへ表示する

Pyodideは、Python学習教材、データ分析ツール、統計シミュレーション、ファイル変換など、端末内で完結するアプリに向いています。

一方、秘密情報を扱う処理、共有データベース、決済、重いバックグラウンド処理などでは、サーバー側のPythonが必要です。

重要なのは、Pyodideとサーバーのどちらが優れているかではなく、処理するデータ、必要な安全性、実行時間、利用者の端末環境に合わせて選ぶことです。

ブラウザ内でPythonを実行できれば、これまでコマンドラインで動かしていた計算プログラムを、URLから利用できるWebアプリへ発展させられます。

参考にした公式情報

• Pyodide公式ドキュメント
• Pyodide：Getting started
• Pyodide：Loading packages
• Pyodide：Python compatibility
• Pyodide：Using Pyodide in a web worker
• PyScript公式ドキュメント：What is PyScript?
• MDN Web Docs：WebAssembly