ゼロからはじめる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の計算式を計算したり、簡単なプログラムが実行したりできる。

手軽にPythonのプログラムを実行するツールを作ってみた

なんと、32行ほどの短いプログラムで、Pythonを手軽に実行できる対話ツールが作成できた。Pytyonの連載なのに、ほとんどJavaScriptなので恐縮だが、簡単に仕組みを解説しよう。

(＊1)ではPyodideを初期化する。そして、(＊2)ではテキストボックスでキーが押された時の処理を記述している。Enterキーが押されたらPythonのプログラムを実行する。それで、(＊3)では、Enterキーを押されたかどうかを判定し、それ以外のキーならそれ以降の処理を実行しないようにしている。そして、(＊4)でテキストボックスに入力したPythonのプログラムを実行し、プログラムと実行結果をHTMLに追記する。その際、エラーがあれば(＊5)にてダイアログに表示するようにした。

本家Pyodideに用意されているPython対話環境

なお、より本格的な対話環境を使いたい場合には、本家Pyodideに用意されている対話環境が役立つだろう。こちらにブラウザでアクセスすると、最新のPyodideでPythonを試すことが可能だ。

Pyodide本家によるPython実行環境

ただ、Pythonのコードを確認したいだけなら、上記サイトを利用すると便利だろう。とは言え、Pyodideを使うと、手軽に自サイトにもPythonプログラムの実行環境を用意できることが分かったことだろう。

まとめ

以上、今回はブラウザで手軽にPythonが実行できるPyodideを使ってみた。本家Pythonの速度と比べると3倍から5倍ほど遅いとのことだが、ちょっとPythonで計算してみたいとか、処理を試してみたいというレベルであれば、わざわざPythonをインストールすることなく、ブラウザ上でも試せるようになったのは大きい。

なお、Pyodide本体のWebAssemblyは、執筆時最新バージョン0.22.1で、約7.5MBだった。もちろん小さいとは言えないサイズであるが、1度ダウンロードしてしまえばブラウザにキャッシュされるので初回のみと思えば、それほど負担になるサイズではないだろう。また、開発サイトを確認すると分かるが、Pyodideは頻繁に開発されており、より小サイズでより高速に動かせるように改良が続けられている。今後が楽しみなプロジェクトだ。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユーススーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。