ゼロからはじめるPython(99) ブラウザでも気軽にPythonが動かせる時代になった！Pyodideを試してみよう

Web惣明期からブラウザで使えるプログラミング言語はJavaScriptと決まっていたが、最近はWebAssemblyが普及し、いろいろな言語がブラウザ上で動かせるようになってきた。今回は、ブラウザでPythonを動かしてみよう。

ブラウザでPythonが動くってどういうこと？

一般的にPythonはPCにインストールして使うのが一般的だ。本連載でも多くのプログラムを紹介したが、いずれも自分のPCに保存したプログラムを実行するものだった。しかし、Pyodideを使うと、ブラウザ上でPythonのプログラムを動かすことができる。別途サーバーを用意したり、アプリをインストールしたりすることなく、Pythonのプログラムが動かせる。今回は、このPyodideについて紹介しよう。

PyodideのWebサイト

Pyodideはどういう仕組みで動いているのか？

昨今のWebアプリ、Webサービスでは、高度なプログラムが利用されていることがほとんどだ。当初、WebブラウザはHTMLで書かれたドキュメントを見るだけだったのだが、そこに簡易プログラミング言語のJavaScriptが実装され、ドキュメントに動的な要素を付け加えることができるようになった。そして、JavaScriptはどんどん改良され機能が増えていった。単に見るだけでなく、ブラウザ上でゲームを遊んだり、動画を見たり、高度なアプリを動かせるようになった。

とは言え、JavaScriptも万能ではない。その言語仕様的にC/C++言語ほど高速に動かすことはできない。そこで、安全に高速なプログラムを動かす仕組みがブラウザに実装された。それが、WebAssemblyという技術だ。これは名前の通り、ブラウザ上で動かすアセンブリ言語だ。それでも、抽象度の高いコードとなっており、様々な仮想マシン上で実行されることを想定されて設計されている。JavaScriptよりも高速であり、C/C++言語やRust、Goなどのコンパイラ言語を使ってブラウザで実行可能なバイナリを生成できる。

そして、ここ数年でWebAssemblyが一気に利用されるようになってきた。これまで、ブラウザ上ではJavaScriptしか動かすことができなかったのだが、WebAssemblyに対応したC/C++、Rust、Goなどの多くの言語で作ったアプリがブラウザで動くようになった。

そして、Pyodideが登場する。そもそもPythonはC言語で開発されているため、PythonをWebAssembly(略称WASM)にコンパイルしてブラウザで動くようにしたものが、Pyodideというわけだ。

Pyodideが動く仕組み

しかしながら、現在のところ、Pythonのプログラムを動かすことはできるが、Pythonプログラム自体がWebAssemblyにコンパイルされているわけではないというのがポイントだ。つまり速度はそれほど期待できない。しかし、今やプログラミング言語で一番人気のPythonを使ってブラウザで動くプログラムを作れるというのは大きなアドバンテージだ。

ブラウザでPythonを動かしてみよう

それでは、さっそくPythonをブラウザで動かしてみよう。まずは、テキストエディタに以下のようなコードを記述して「hello_python.html」という名前で保存しよう。

<!doctype html><html><body>
<!-- Pyodideが使えるようにライブラリを取り込む --- (*1) -->
<script src="https://cdn.jsdelivr.net/pyodide/v0.22.1/full/pyodide.js"></script>
<!-- JavaScriptからPythonを実行する --- (*2) -->
<script>
(async () => {
    // Pyodideを読み込む --- (*3)
    const pyodide = await loadPyodide();
    // JavaScriptのalertをPythonで使えるように登録 --- (*4)
    pyodide.globals.set("alert", alert);
    // Pythonのプログラムを実行 --- (*5)
    pyodide.runPython("alert('Hello, world!')");
})();
</script>
</body></html>

このHTMLをブラウザにドラッグ＆ドロップすると次のようにPythonのプログラムが動く。もちろん、今回のプログラムの大半は、Pythonのプログラムを実行するためのもので、プログラム(＊5)の文字列の中だけがPythonのプログラムだ。

Pythonのプログラムがブラウザでも動いた

HTMLで何が行われているかを確認してみよう。(＊1)ではPyodideのライブラリを読み込んでいる。このように、WebAssemblyのプログラムは、URLを貼り付けるだけで読み込むことができて非常に便利だ。

(＊2)以降ではJavaScriptのプログラムを記述している。内容を詳しく見てみよう。(＊3)ではPyodideが使えるように読み込みを行う。そして、(＊4)では、JavaScriptのalert関数をPythonで使えるように登録処理を行う。それから(＊5)でPythonのプログラムを実行する。ここで指定しているのは、Pythonのプログラムは「Hello, world!」という文字列を、alert関数に与えて呼び出すというものだ。

このように、Pyodideを使うとPythonのプログラムを動かせるだけでなく、JavaScriptと手軽に連携して実行させることができる。もちろん、Pyodideのランタイムが初回にブラウザにダウンロードされるので、初回は実行に時間がかかるのが欠点だが、

手軽に使えるPython対話実行環境を作ってみよう

Pyodideを使えば思ったよりも簡単にPythonのプログラムが実行できる実行環境を作ることができそうだ。そこで、IDLEのように手軽にPythonのプログラムを実行できる対話ツールをブラウザ上に作ってみよう。以下のプログラムを「idele.html」という名前で保存しよう。

<!doctype html><html><meta charset="utf-8"><body>
    <div><div id="display"></div>
        <div>→<input id="code" type="text" style="width:80%"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.22.1/full/pyodide.js"></script>
    <script>
    (async () => {
        // Pyodideを初期化 --- (*1)
        const pyodide = await loadPyodide();
        const display = document.querySelector('#display');
        const code = document.querySelector('#code');
        pyodide.globals.set("alert", alert);
        // キーを押した時Pythonのコードを実行する --- (*2)
        code.onkeypress = (e) => {
            if (e.keyCode !== 13) { return; } // Enter以外のキーを除外 --- (*3)
            try {
                const res = pyodide.runPython(code.value); // Pythonを実行 --- (*4)
                display.innerHTML += '→' + esc(code.value) + '<br>';
                if (res) {
                    display.innerHTML += 
                        '<span style="color:blue;">' + esc(res) + '</span><br>';
                }
                code.value = '';
            } catch (err) { alert(err); } // エラーを表示 --- (*5)
        }
    })();
    function esc(s) { // HTMLに変換
        return ('' + s).replace(/&/g, '&amp;')
            .replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }
    </script>
</body></html>

上記のHTMLをブラウザにドラッグ＆ドロップしてみよう。「→」と表示されるので、そこにPythonのプログラムを記述して[Enter]キーを押すとプログラムが実行される。IDLEのようにPythonの計算式を計算したり、簡単なプログラムが実行したりできる。