はじめに

2022年5月に発表されたWebブラウザ上で動くPyScriptですが、その後も高速化などの改善が行われ、いつのまにかMicroPythonの実行もできるようになっていたので、紹介しておきます。

Pyodide (WebAssembly 用にコンパイルされた CPython)に比べて、まだまだサポートが弱そうですが、ランタイムが170KB程度と小さいので、DOM操作程度であればMicroPythonを用いたほうが高速に処理できるでしょう。

PyScriptのテンプレート

PyScript

基本は、HTMLの <head> タグのコンテンツとして次の１行を加えるだけで PyScript が使えるようになります(本記事の執筆時点)。

<script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>

実際は charset や関連のCSSも指定することが推奨されているので、まとめると
次のテンプレートのようになります。この中の <body> タグのコンテンツ内に PyScript を書いていくことになります。

<!doctype html>
<html>
    <head>
        <!-- Recommended meta tags -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!-- PyScript CSS -->
        <link rel="stylesheet" href="https://pyscript.net/releases/2023.11.2/core.css">
        <!-- This script tag bootstraps PyScript -->
        <script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
    </head>
    <body>
        <!-- your code goes here... -->
    </body>
</html>

MicroPython タグ

MicroPython スクリプトは <mpy-script> タグか <script type="mpy"> タグに記載します。たとえば、次のように記載します。

<mpy-script>
    from pyscript import display
    display("Hello, world(1)!")
</mpy-script>
<script type="mpy">
    from pyscript import display
    display("Hello, world(2)!")
</script>

※　print() 関数では表示できなかったので pyscript.display() 関数を使って表示しています。

Webブラウザで表示すると、次のようになります。

DOM の操作

簡単な DOM 操作の例を示します。ボタンを押すと、<div> タグのコンテンツとして MicroPython バージョンの情報を挿入するものです。

<button mpy-click="display_mpy_version">Display MPY Version</button>
<div id="output"></div>
<script type="mpy" config='{ "packages": ["arrr"] }'>
    import sys
    from pyscript import document

    def display_mpy_version(event):
        output_div = document.querySelector("#output")
        output_div.innerText = str(sys.implementation)
</script>

Webブラウザにロードして、ボタンを押すと次のように表示されます。

PyScriptの　MicroPython は現状、バージョン 1.20.0 の WebAssembly版がベースになっているようです。