このページ内容は2022年9月9日以降、再調査・再検証してません。実際に扱う際は最新の情報にアクセスしてください。

link
PyScript

PyScriptはブラウザ上でPythonを動かすためのフレームワークですpyscript。PyScriptはCPythonをWebAssemblyに移植したPyodideという基盤の上に構築しており、HTMLやJavaScriptの資産と組み合わせてPythonを動かすことができます。

動かし方はheadでPyScriptを読み込み、py-scriptタグ内にpythonのコードを書いて実行します。以下ではπの近似値を求めるコードですpyscript_sample1。py-scriptタグ内はPythonと同じ文法になるため、インデントも気をつける必要があります。

1
<!-- index.html -->
2
<html lang='ja'>
3
<head>
4
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
5
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
6
</head>
7
<body>
8
<py-script>
9
print("Let's compute π:")
10
def wallis(n):
11
pi = 2
12
for i in range(1,n):
13
pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
14
return pi
15
16
pi = wallis(100000)
17
s = f"π is approximately {pi:.3f}"
18
print(s)
19
</py-script>
20
</body>
21
</html>
Pythonでπの近似値を計算し表示する例

Pythonでπの近似値を計算し表示する例

py-envタグで外部ライブラリを指定でき、NumPyやMatplotlibなどの機械学習・グラフプロットで使うライブラリも利用できますpyscript_sample2

1
<!-- index.html -->
2
<html lang='ja'>
3
<head>
4
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
5
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
6
<py-env>
7
- numpy
8
- matplotlib
9
</py-env>
10
</head>
11
12
<body>
13
<h1>Let's plot random numbers</h1>
14
<div id="plot"></div>
15
<py-script output="plot">
16
import matplotlib.pyplot as plt
17
import numpy as np
18
19
x = np.random.randn(1000)
20
y = np.random.randn(1000)
21
22
fig, ax = plt.subplots()
23
ax.scatter(x, y)
24
fig
25
</py-script>
26
</body>
27
</html>
Pythonでランダムな数値の組からなるグラフを表示する例

Pythonでランダムな数値の組からなるグラフを表示する例

他にもJavaScriptと連携したサンプルなども公開されてます[^pyscript_demo][^pyscript_sample_code]


自己紹介
はじめまして Pilefortです。
東京でエソジニアをしてます。
興味のあるスタックは、JavaScript (React, Vue), TypeScript, Rust, WebAssembly, AWS, Pulumi, Serverless Frameworkです。
このブログでは、普段の業務や趣味で気になったことをまとめたり、フロントやAWS, GitHubやTwitterで見かけた面白い記事やニュースをまとめるためのものです。少しでも何かの役に立てば幸いです。
最近の活動
技術書典13 (2022.9.10 - 2022.9.25) で本を出しました。
2022年の1月から8月ぐらいまでに登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。
うぇぶちぇんじろぐ2023part1
XMind8ファイルをMarkdownファイルに変換するツールを作りました。
公式のxmind-sdk-jsのバージョンを下げて作ってます (最新版だと一部メソッドが削除されてるため)。
技術書典12 (2022.1.22 - 2022.1.30) で本を出しました。
2021年に登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。
うぇぶちぇんじろぐ2022
サイトマップ
Notes
業務や趣味での気づき・メモ
Scraps
雑記。ネットで見つけた面白い記事やニュース
Snippets
記事にするまでもないけど、便利なコマンドや豆知識
Works
同人誌一覧