PyScriptとは?使ってみた感想とメリットデメリットを紹介

2022年4月末から5月頭に開催されたPyCon US 2022。

そこでAnaconda社が発表したPyScriptが今注目です。

現在公開されているのはalpha版(パイロット版)なので発展途上ですがPythonをやっている人にとっては、かなり注目の技術です。

今回はそんなPyScriptを早速試してみたので、使い方やメリット、デメリットを紹介したいと思います。

先に使ってみた感想を言うと、使い方は簡単ですが、処理速度が遅いです。

PyScriptとはどんなもの?
PyScriptを使ってみる
試してみて感じたこと
まとめ

PyScriptとはどんなもの?

PyScriptを一言でいうと

Webブラウザでpythonを動かすことができる仕組みです。

バックエンドで使われていたPythonをフロントエンドでも使えるようにする仕組みです。

PyScriptを使うメリット

PyScriptを使うメリットは、これに尽きると思います。

フロントエンドもバックエンドもほぼPythonのみで構築できる。(HTMLは必要ですが…)

バックエンド開発をPythonでやっていて、フロントエンド開発を今までやってなかった人や、JavaScriptが苦手な人にとっては、非常に使いやすいと思います。

Jupyter Labなどでデータサイエンス業務をメインでやっている人も、PyScriptならHTMLの知識が少しあれば、簡単にWebブラウザに表やグラフを表示することが可能になります。

また、JavaScriptとPyScriptは、HTML上で共存して両方使えるので、普段の処理はJavaScriptグラフ表示系の処理はPyScriptというように柔軟な対応もできます。

PyScriptのデメリット

あくまで現時点で考えられるデメリットとしては、

表示速度が遅い。
alpha版なので本番運用は、しないほうが良い。
まだ、リリースされて間がないので情報が少ない。

個人的には表示速度が遅いことが気になっています。製品版がリリースされる頃にはある程度表示速度が改善されていれば、かなり強力なScriptになると思います。

PyScriptの仕組み

PyScriptは、Webブラウザで動作するようにWebAssembly化されたおり、
Pyodide※(パイオダイド)という環境で動作します。

※Pyodideは、Webブラウザ上でPythonインタプリタのフル機能を動作実現させるために発足したMozillaの実験的プロジェクト

PyScriptを使ってみる

環境構築

PyScriptを使う準備は、非常に簡単です。以下のCDNをHTMLのヘッダータグにコピーして貼り付けるだけです。最新のCDNは以下の公式サイトから取得することが可能です。

2022年5月12時点では、HTML内に指定するCDN※情報は以下の通りです。
現在は試験的な運用でAlpha版での運用になっています。

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

※CDN　Content Delivery Network（コンテンツデリバリーネットワーク）」の略
ウェブコンテンツをスピーディーに配信する仕組み

PyScript公式サイト

Pyscript.net

PyScript is a platform for Python in the browser.

PyScriptサンプルソース

PyScript Examples - Redirecting

PyScriptで文字列を表示する

実際にHello PyScriptと表示されるプログラムを書いてみます。公式ページを見る限りでは、動作テストはすべてChromeでやっているのでブラウザはChromeが推奨されています。
※明確なサポートはされていませんがEdgeでも問題なく動作します。

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
      <h1>PyScriptを使ってみる</h1> 
      <py-script> print('Hello PyScript') </py-script> </body>
</html>

上のコードをtest.htmlに記述してダブルクリックするとprint文が実行され Hello PyScript と表示されます。

Hello PyScriptと表示するだけのプログラムですが、表示されるまで２秒程度かかります。

pythonコードは<py-script>を挟んで記述

実行したいpythonコードを<py-script>と</py-script>の間に記述します。

<py-script>print("Hello, world!")</py-script>

PyScriptで実行されるPythonのバージョンを確認する

PyScriptを実行時に動いているPythonのバージョンが気になったのでバージョンを表示してみます。

<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    </head>
    <body>
        <h1>PyScriptのバージョン</h1> 
        <div id="test"></div>
        <py-script output="test">
import sys
print(sys.version)
        </py-script>
</html>

私が実行したとき(2022/5/11時点)のpythonのバージョンは3.10.2となっていました。ここでもPythonのバージョンを表示するだけの処理ですが2～3秒程度かかります。

PyScriptでグラフを表示してみる

WEBブラウザでpythonを直接実行できる際の一番のメリットといっていいグラフ表示もやってみます。
今回はpandasでdataframeを作成してaltairで棒グラフを表示します。

<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
        <py-env>
            - altair
            - pandas
        </py-env>
    </head>
    <body>
        <h1>PyScriptでグラフ表示</h1>
        <div id="test"></div>
        <py-script output="test"> 
import altair as alt
import pandas as pd

source = pd.DataFrame({
    'a': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
    'b': [28, 55, 43, 91, 81, 53, 19, 87, 52]
})

alt.Chart(source).mark_bar().encode(
    x='a',
    y='b'
)
        </py-script>
</html>

以下のように棒グラフがきちんと表示されます。が先ほどよりさらに遅いです。体感でグラフが表示されるまで１０秒程度かかりました。

サードパーティ製のライブラリは<py-env>を挟んで記述

上記のグラフ表示では、Pythonの標準ライブラリではないサードパーティ製のライブラリを使用しています。pipコマンドなどでインストールしたサードパーティ製のライブラリを使用するときは以下のようにhtmlファイルのheadタグに<py-env></py-env>で囲って使います。

<py-env>
    - altair
    - pandas
 </py-env>

試してみて感じたこと

全体的に表示が遅い

上述しているグラフ表示などは表示までに１０秒程度かかりました。おそらく、pyodide環境で事前にコンパイルしているためだと思われます。まだ、実験的なバージョンなので今後に期待です。

Vscode上での補完やハイライト表示がイマイチ

HTMLファイルにPythonコードを直接記述しているのでVscode上での補完とハイライト表示がイマイチです。これもリリースされたばかりなのですぐに拡張機能が提供されることを期待しています。

2022/05/17 追記
Vscodeの拡張機能を確認したところ、【PyScript extension for Visual Studio Code】というコードハイライトが早くも出ていました。有効化するとなぜか、Emmet機能が使えなくなりますがハイライト表示がされるようになります。

簡単にグラフを表示させることができる

HTMLファイル内に、pythonコードを書くだけで簡単にグラフが表示できるのでHTMLの基本的な知識があれば簡単に表示できます。

インストールや環境構築不要

CDNを指定するだけで簡単にPyScriptが使えるので、環境構築しなくてもすぐに使えます。

表示速度が今より改善されれば、pythonをメインに開発している人にとっては、非常に強力なScriptになる可能性があると思います。また、pythonが得意な分析処理やグラフ表示などはPyscriptで記述してその他の処理はJavaScriptで書くといったようなPyScriptとJavaScriptの併用も可能なので今後が非常に楽しみです。

まとめ

PyScriptは、Webブラウザ（Chromeなど)でpythonを動かうことができる仕組み
JavaScriptを使わずに、HTMLとPythonだけでWEB開発ができるので便利
pythonコードは<py-script>を挟んで記述
サードパーティのライブラリーを使用するときは<py-env>で挟む
実行速度は、かなり遅い
リリースして間もなく、発展途上なので今後に期待

【Python】Pyscriptを使ってみた感想