【Python×JavaScript？】少し話題になったPyScriptの使い方とチュートリアル

皆さん、こんにちは！

今回は、5月1日にリリースされたPyScriptを紹介してきます。

何やら、PythonをJavaScriptのように使うことが出来るらしく、個人的に大注目の発表です。

この記事の執筆次点ではAlpha版（まだ本リリースではない）の状態ですので、仕様が変わる可能性があることにご留意ください。

PyScriptとは？

Pythonの主要なディストリビューション「Anaconda」などを提供している米Anaconda社は、HTML文書の中にJavaScriptと同じようにPythonのコードを記述し、実行可能にする「PyScript」をオープンソースで公開しました。

JupyterNotebookなどとは異なり、HTMLの中にPythonコードが入って動作する、JavaScriptのPython版のようなイメージです。

PyScriptでは、WebAssembly化されたPythonインタプリタによってWebブラウザ上で実行されます。

クライアント側はもちろん、サーバー側にも特別な仕組みが不要のまさにJavaScriptのPython版と呼べるような代物です。

ちなみにPyScriptのデモページも用意されており、Pythonからプログラミングデビューした私にとっては非常に魅力的でした。

Hello Worldや、ToDoアプリなどグラフ表示、機械学習アプリケーションが用意されています。

これまでは、PythonのStreamlitやFlask、Djangoなど専用のライブラリを使ってでしか実現できなかったようなアプリケーションをHTMLファイルのみで作成することができそうです。

ただし、一度アクセスしてもらうとわかると思いますが、”結構重い”です。

簡単なHello Worldでも遅さを体感できるレベルなので、上記に示した地図アプリやK-Meansアプリを開くのには数秒はかかります。

大規模なデータを読み込ませて、描画しようと思うと、平気で数十秒待たされる激重サイトが出来上がりそうです…。

現在はまだまだAlpha版ということで、今後のアップデートでより軽量化される可能性もありますし、適用できる範囲も増えることに期待しましょう。

PyScriptの使い方

PyScriptの実行には何かインストールするなど環境構築は必要ありません。

JavaScriptや、CSSのBootStrapのように、HTMLファイルの<head>にリンクを張り付ければ勝手に読み込んで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> <py-script> print('Hello, PyScript!') </py-script> </body>
</html>

いちおう、先ほどのPyScriptの公式サイトでは、PyScript用の関連ファイルをZipファイルでダウンロードしてダウンロードして使うことも可能ですが、まあ、headに書くのが分かりやすく、メンテナンスしやすくてオススメです。

PyScriptでHollo World

それでは次にPyScriptを使ってHello PyScriptを実行してみましょう。

以下のコードをお持ちのエディタに入力し、「.html」形式で保存して、実行。

<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, PyScript!') </py-script> </body>
</html>

すると、以下のように、ブラウザ上に、Print関数内に入力した文字列が表示されていることがわかります。

※たったこれだけで数秒は待たされました…

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

Hello PyScriptだけっでは、少々さみしいので、外部ライブラリであるMatplotlibを使ってグラフ表示をしてみたいと思います。

外部ライブラリを使いたい場合、head に py-env を記述します。

今回はMatplotlibとNumpyをインポートします。

<head>
   <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
   <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
   <py-env>
      - numpy
      - matplotlib
   </py-env>
</head>

グラフ描画には、該当するPythonコードの部分を<py-script>で囲めばOKです。

アウトプット形式として、 plot を指定することで、描画できます。

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - numpy
        - matplotlib
      </py-env>
    </head>

  <body>
    <h1>Plotting a histogram of Standard Normal distribution</h1>
    <div id="plot"></div>
    <py-script output="plot">
import matplotlib.pyplot as plt
import numpy as np

np.random.seed(42)

rv = np.random.standard_normal(1000)

fig, ax = plt.subplots()
ax.hist(rv, bins=30)
fig

    </py-script>
  </body>
</html>

また、現在はHTMLファイルにPythonコードもベタ打ちしていますが、CSSを別ファイルに記述するのと同じように、任意のPythonファイルを別のフォルダに置いておいて、そこから呼び出して実行することも可能です。

<pyscript src = "/test.py"></pyscript>

今後期待すること

以上、簡単にですが、PyScriptを試してみました。

PyScriptと言いますが、実態はほとんどPythonのお話で、既に作成してある描画のコードなどを用いて簡単にフロントエンドを作れてしまいそうです。

今後はオリジナルのデータを使って、ダッシュボード的なものの作成に挑戦してみたいと思います。

まだまだやってみたいことが山盛りですが、普段からPyrhonに慣れている方は、Webアプリなどフロントエンド開発の敷居を大きく下げてくれる手段になりそうです。

データ処理が得意なPythonと、読み込みが致命的に遅いPyScriptのシナジーは正直あまり良くないと思われますが、今後のアップデートなどで、スピードアップなどが図られることを期待しています！！

参考文献

  • PyScriptの公式ページ

https://pyscript.net/

  • AnacondaのPyScript紹介ページ

https://anaconda.cloud/pyscript-python-in-the-browser

  • PyScriptのサンプルページ

https://pyscript.net/examples/

  • PyScriptのサンプルページ

https://gist.github.com/erykml

  • Pyodideの公式ぺ―ジ

https://pyodide.org/en/stable/index.html