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

皆さん、こんにちは！

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

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

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

📢 Did you hear the news from PyCon!? We are thrilled to introduce PyScript, a framework that allows users to create rich Python applications IN THE BROWSER using a mix of Python with standard HTML! Head to https://t.co/n4OoeBD46z for more information. 🧠 💥
— Anaconda (@anacondainc) April 30, 2022

Contents

1 PyScriptとは？
2 PyScriptの使い方
3 PyScriptでHollo World
4 PyScriptでMatplotlibのグラフを表示してみる
5 今後期待すること
6 参考文献

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>