【Python】PyScriptとは？HTMLにPythonを記述・実行する（最新情報）
2022.05.14 / 
本記事ではPyScriptについて詳しく解説していきます。
PyScriptは直接HTMLにPythonを記述して実行できる最新のフレームワークです。現在はまだ開発途中のため速度など問題が多いです。しかしJavaScriptのようにHTMLでPythonを使えるため、かなり革新的な技術になると考えています。
ぜひ本記事を通してPyScriptについて理解を深めてください。
PyScriptに関する最新情報は随時更新していきます。
PyScript
PyScriptとは
PyCon US 2022でAnaconda社がPyScriptについて発表がありました。
PyScriptとはブラウザ上でHTMLに書き込んだPythonを実行するフレームワークです。
まさにJavaScriptのようにPythonをHTML（ブラウザ上）で動かすことができるのです。
Pythonについて詳しくは以下記事をご参照ください。
【Python】Pythonの特徴と他のプログラミング言語との違い
PyScriptは現在まだアルファ版（2022年5月現在）であり、開発途中のフレームワークです。そのため頻繁に中身が変わる可能性もありますし、読み込み時間など様々な問題を抱えています。
今の段階では本番環境で利用することはお勧めできません。
PyScriptによるPythonの実行は、WebAssemlby化されたインタプリタ（Pyodide：パイオダイド）によってブラウザ上で実行される仕組みです。
PyScriptを使用するブラウザはChromeが推奨されています。
どのように利用する？
まだまだPyScriptは発展途上なので、今度どのような機能が備わってくるかは未知数です。現段階で考えられるメリットは以下の通りです。
- サーバー側に特別な仕組みは必要ない（サーバー構成に依存しない）
- HTMLとPythonのみでWebアプリケーション開発が可能（JavaScriptなし）
- ページ上にPythonでグラフを書き込める
- Pythonで計算した結果を簡単に表示できる
- 様々なパッケージ（NumPy、Pandas、scikit-learnなど）が実行可能
あまりJavaScriptが得意でない人は、HTMLとPythonだけでも優れたWebアプリケーションを開発できる可能性が秘められています。
実際に使ってみるとわかりますが、Pythonの実行は非常に時間がかかります。まだ開発途中なので仕方ありませんが、この速度では本番環境では使い物にはならないレベルです。
PyScriptでどのようなWebアプリケーションが作成できるかは、デモサイトが用意されているので確認してみてください。
PyScriptの使用方法
PyScriptのダウンロード
PyScriptを使用するためにpyscriptのCSSファイルとJSファイルをダウンロードする必要があります。ダウンロード方法は以下の2種類です。
- 公式サイトからダウンロードする
- HTMLのheadタグ内にCDNを記述する
公式サイトからダウンロードする
PyScriptの公式サイトからpyscript.cssとpyscript.jsをダウンロードできます。
ダウンロードしたCSSファイル、JSファイルをheadタグで指定します。
HTMLのheadタグ内にCDNを記述する
最も簡単な方法がCDNを記述することです。headタグ内に以下のコードを記述します。
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
CDN（Content Delivery Network）とは、Webコンテンツをインターネット経由で配信する仕組みです
py-scriptタグ
PyScriptで使用できるpy-scriptタグには実行したいPythonコードを記述します。
以下サンプルはHello, Office54を画面上に表示します。
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-script>
print('Hello, Office54!')
</py-script>
</body>
</html>
py-envタグ
PyScriptでは多くのサードパーティのscikit-learnやNumPy、matplotlib、Pandasといったライブラリも利用できます。
それらを利用するにはHTMLのheadタグ内にpy-envタグを記述して、ライブラリ名を指定します。
<py-env>
- numpy
- matplotlib
</py-env>
pyscriptモジュール
py-scriptタグ内ではpyscriptモジュールで提供されているメソッドが利用できます。
write()メソッド
pyscriptモジュールのwrite()メソッドを利用することで、id="xxx"で使用した要素にpythonで求めた値やテキストを表示できます。
pyscript.write(idを指定, 値)
以下にwrite()メソッドを使用したサンプルコードを記します。
<div id="test" style="background:red;"></div>
<py-script>
import sys
pyscript.write('test', sys.version)
</py-script>
PyScriptで実行されるPythonのバージョン
PyScriptで実行されるPythonのバージョンを以下コードで確認してみます。
<py-script>
import sys
print(sys.version)
</py-script>
3.10.2 (main, Apr 9 2022, 20:52:01) [Clang 14.0.0 (https://github.com/llvm/llvm-project
これより最新の3.10.2が動いていることがわかりました。
まとめ
本記事「【Python】PyScriptとは？HTMLにPythonを記述・実行する（最新情報）」はいかがでしたか。
PyScriptに関しては、ここ最近のニュースで最も驚いたことでした。
HTML内でPythonが書き込めることはとても便利です。今後開発が進んで、本番環境でも問題なく利用できるようになると、Web業界では大きな革新となるでしょう。
今現在は速度がかなり遅くて、使い物にはなりませんが今後に期待しましょう。
関連記事
