2022年5月に「Pyscript」というフレームワークが公開されました。
これにより、HTML上にPytnonを記述することが可能になりました。
今まで、Pythonは通常のWebサーバーで動作しにく（Gitでないと動作しない）ため、Web上で使用するには少し厄介なところがありましたが、「Pyscript」の登場により、HTML上に記述して、簡単に実行することが可能となったのです。
"フレームワーク"という名前で、つい難しく聞こえますが、
ぶっちゃけ、５分でマスター出来るので、ぜひ下記のサンプルコードを参考に実験してみてください！
Matplotlibとnumpyでグラフを作成するサンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ここにページの概要が入ります。">
<title>PyScriptテスト</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- matplotlib
- numpy
</py-env>
<body>
<div id="mpl"></div>
<py-script output="mpl">
import matplotlib.pyplot as plt
from matplotlib import cm
from matplotlib.ticker import LinearLocator
import numpy as np
x = np.arange(-5,5,0.1)
y = np.sin(x)
plt.plot(x,y)
plt #グラフを描画 plt.show()のshow()は不要
</py-script>
</body>
</html>【実行結果】
解説
※ここでは、HTMLの知識とPythonの知識があることが前提のため、それらの解説は省略いたします。
10行目・11行目
Pyscriptはインストールを必要としません。<head>タグ内に下記の２行を記述して、読み込むだけです。
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>12行目～15行目
<py-env></py-env>内に必要なライブラリを読み込みます。
使用できる外部ライブラリは下記で確認することが出来ます。
https://pyodide.org/en/stable/usage/packages-in-pyodide.html
他にも有名なものだと、pandasやscikit-learnなども使えるようじゃ！
<py-env>
- matplotlib
- numpy
</py-env>18行目～29行目
ここからはいつも通りのPythonコードを記述していきます。
importは必要なので、忘れずに。
注意としては、28行目「plt」の部分のみです！
本来のPythonでは、plt.show() となりますが、Pyscriptの場合は、show()を省略します。
ほかのライブラリでも、描画のコードは変わっている場合があります。
PyScriptは非常にアルファ版であり、現時点では、PyScriptを本番環境で使用することはお勧めしません。
公式サイトに記載されておりますので、ご注意ください。