うぇぶちぇんじろぐ2022part1

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

うぇぶちぇんじろぐ2022part1

ES2022 Core Web Vitalsがパソコン向け検索ランキングに適用 Google Analytics UAサポート終了 TypeScript公式のチートシート Vercelマルチテナントアプリケーション開発キットデザインシステム公開 (Vercel, AWS)ショップ公開 (Figma, Deno)SFCがGitHubからの移行発表 C++互換の新しい言語 Carbon

情報収集に役立つリソース

Google / Chrome / GitHub / AWS / その他

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>

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>