HTMLに直接Pythonが書ける画期的で革命的なライブラリのPyScriptについての情報を纏めます。

導入方法

ヘッダでJSライブラリをロードするだけです。

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js">

できること

Python標準ライブラリを用いてコーディングできます。
外部パッケージのインストールと利用
- py-envタグの値に名称を入力することで外部パッケージをインストール可能です。
FlaskなどPythonのWEB開発ライブラリと組み合わせることも可能です。
ボタン、コンテナなどのUIコンポーネントの利用
- Elementオブジェクトを用いてHTMLElementを取得
- pyscript.write()を用いて、HTMLElementに書き込み
- pyscript用のUIコンポーネントやbuttonなどにイベントコールバックを指定できる属性があります。
  - 現在はアルファ版でバグにより一部機能していない模様。
Pythonファイルをソースとしてロード
- py-scryptタグのsrc属性にソースの相対パスを入力すればいいです。
REPLを配置してPythonスクリプトをインタラクティブ実行

ビジュアライズ
- Pythonで比較的簡単にGUI開発ができます。
  - Javaや.NETのようにGUI開発環境が充実しているとは言えないPythonで、GUIを作りたいといった場合は大抵WEBアプリを開発することになりますが、PyScriptを使えば今までJavaScriptで書いていた部分の大半をPythonで代替できて開発難度が下がリます。
- グラフなど描画に関連するPythonライブラリを利用でき、データを簡単に可視化できます。
プロトタイピング
- 導入が簡単で、オンラインエディタといったマルチなプラットフォームで公開できるので、WEBアプリのプロトタイプを開発する上で有用です。
サーバーレス開発
- フロントエンドでPythonの豊富なライブラリを活用してロジックを組めるので、バックエンドの実装を減らせます。
- サーバーレスでPythonの外部パッケージを利用するには複雑な手順が必要だったりしますが、PyScriptでは導入の難度も工数も最小限で済みます。

CDNで導入できるのでCODEPENのようなオンラインエディタでもPyScriptを書けるということで、公式サンプルから引用しつつ、動作を確認しました。

See the Pen HelloPyscript by method-inside-a-class-of-method (@method-inside-a-class-of-method) on CodePen.

タグ	内容
py-script	valueにPythonスクリプトを書ける。outputで出力先、srcでソースファイルを指定可能
py-repl	ブラウザにREPLを表示して、Pythonをインタラクティブ実行可能
py-env	YAML書式で名称を指定することで、pandasやnumpyなどの外部パッケージをインストール可能`paths:`というキーワードを用いると、ローカルのPythonファイルもロード可能
py-config	基底runtimeであるpyodideのバージョンなど、PyScriptに関する設定を行う。YAML書式。

PyScript用にカスタマイズされたUIコンポーネント

タグ	内容
py-inputbox	テキスト入力ボックス
py-box	内部に複数のUIコンポーネントを配置して表示するためのコンテナ
py-button	ボタン。クリックやフォーカスなどのイベントをハンドリング可能
py-title	タイトルラベル

名称	内容
pyscript	writeメソッドなど、HTMLエレメントを操作する関数にアクセス可能
Element	IDを引数に入れてHTMLエレメントをオブジェクトとして取得可能