【PyScript】ブラウザでpythonを扱う
世間ではAI関連の記事が多いですが、その中心的な言語pythonをブラウザで扱えるようにするPyScriptはご存知でしょうか？
基本的なコードを書いてみる
ブラウザでpythonを動かすために必要なコードはこれだけです。
スタイルシートとJavaScriptを読み込むだけで、pythonが動作します。
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>次のコードは画面にsin波を書くコードです。
構成としては、
htmlのヘッダー（cssとJavaScriptの読み込み）
実際に描画される場所のhtml（sine_plot）
外部ライブラリの読み込み（py-config）
実際のpythonコード（py-script）
という単純な流れです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sine Wave Plot</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<!-- HTML描画部分 -->
<div id="sine_plot"></div>
<!-- ライブラリの読み込み -->
<py-config>
packages = ["numpy", "matplotlib"]
</py-config>
<!-- Python Script -->
<py-script>
import numpy as np
import matplotlib.pyplot as plt
x = np.linspace(0, 2 * np.pi, 100)
y = np.sin(x)
fig, ax = plt.subplots()
ax.plot(x, y)
plt.title('Sine Wave')
pyscript.write('sine_plot', fig)
</py-script>
</body>
</html>
大切なのはライブラリの読み込みです。
元々はheadの部分に書く仕様だったのですが、最新版では<py-config>で書くことになっています。
<py-config>
packages = ["numpy", "matplotlib"]
</py-config>このように、カンマ区切りでライブラリ名を箇条書きをします。その後、通常のpythonのようにimport文を書きます。
<py-script>
import numpy as np
import matplotlib.pyplot as plt
</py-script>動作する外部ライブラリ
動作する外部ライブラリはまだ多くありません。時間が解決してくれることを待ちましょう。
まとめ
テキストエディタで書かれたhtmlだけで気軽にpythonが動作し、ブラウザで表示できる環境は素晴らしく簡単です。
最初の読み込みに時間がかかるところは、まだまだ改善の余地がありますが一度ぜひ遊んでみてください。