【Python】PyScriptとは?HTMLにPythonを記述・実行する(最新情報)

時計 2022.05.14 / 時計

【Python】PyScriptとは?HTMLにPythonを記述・実行する(最新情報)

本記事ではPyScriptについて詳しく解説していきます。

PyScriptは直接HTMLPythonを記述して実行できる最新のフレームワークです。現在はまだ開発途中のため速度など問題が多いです。しかしJavaScriptのようにHTMLでPythonを使えるため、かなり革新的な技術になると考えています。

ぜひ本記事を通してPyScriptについて理解を深めてください。

PyScriptに関する最新情報は随時更新していきます。

PyScript

PyScriptとは

PyScript

PyCon US 2022でAnaconda社がPyScriptについて発表がありました。
PyScriptとはブラウザ上でHTMLに書き込んだPythonを実行するフレームワークです。

まさにJavaScriptのようにPythonをHTML(ブラウザ上)で動かすことができるのです。

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 demos

PyScriptの使用方法

PyScriptのダウンロード

PyScriptを使用するためにpyscriptのCSSファイルとJSファイルをダウンロードする必要があります。ダウンロード方法は以下の2種類です。

  • 公式サイトからダウンロードする
  • HTMLのheadタグ内にCDNを記述する

公式サイトからダウンロードする

PyScriptの公式サイトからpyscript.cssとpyscript.jsをダウンロードできます。

PyScript – 公式サイト

ダウンロードした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>
IT用語の確認

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のwrite()メソッド

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業界では大きな革新となるでしょう。

今現在は速度がかなり遅くて、使い物にはなりませんが今後に期待しましょう。