【Python】PyScriptで、HTMLにPythonを書き込む

# はじめに
AnacondaがリリースしたPyScriptというフレームワークはHTMLにPythonを書き込むことができます。
この記事ではちょっとだけ試してみたいと思います。

# 1. PyScriptをインポートする
```html
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
```
二行のコードだけでPyScriptが使えるようになります。

# 2. 基本の使い方
Pythonを書き込むために、
```html
<py-script> </py-script>
```
というタグが必要です。

それでは、簡単に定番のHello World!をやってみましょう。
```html:helloWorld.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, World!') </py-script> </body>
</html>
```
実行すると、
![截圖 2022-05-08 23.48.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067829/6e466266-f119-9b8a-e40b-11981467d0c0.png)
本当にWebページに文字列が表示されました。
(補足: Chromeは推奨だそうで、Safariなどのブラウザはうまく実行できないかもしれません)

# 3. HTMLにグラフを描いてみる
グラフを描く前に、もう少しPyscriptの書き方を紹介します。
## 1. Pythonのように、何らかのライブラリーをインポートしたい時、
```html
<py-env> </py-env>
```
というタグが必要です。
## 2. pyscript.write()
pyscript.write()を使うと、特定のidに書き込めます。
```html
pyscript.write(arg1, arg2)
arg1: id
arg2: 書き込みたい情報
```
```html:pyWrite.html
<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    </head>

  <body>
    <div id="blue" class="alert alert-primary"></div>
    <div id="red" class="alert alert-danger"></div>
    <py-script>
pyscript.write('blue', "In blue.")
pyscript.write('red', "In red.")
    </py-script>
  </body>
</html>
``` 
これを実行すると、
![截圖 2022-05-09 00.12.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067829/59fedecc-7a7b-dd49-0c8a-fb901575d935.png)
In blueはちゃんとid="blue"のdivに入ってます。(In redも同じです)

それではmatplotlibを使って、グラフを描きましょう！
```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>
```
PyScript、numpyとmatplotlibをインポートします。

```html
<body>
  <h1>二次関数図を描こう</h1>
  <div id="quad"></div>
  <py-script output="quad">
import matplotlib.pyplot as plt
import numpy as np

x = x = np.arange(-10, 10, 0.1)
y = x*x

fig, ax = plt.subplots()
ax.plot(x, y)
fig
  </py-script>
</body>
```
まず、普通にpythonコードが書けるようになります!
そして見て欲しいのはこちらのコード↓
```html
<py-script output="quad">
```
この書き方はグラフの結果をid=quadのdivに書き込むという意味です。
↓と一緒です！

```html
pyscript.write('quad', fig)
```


フルコード
```html:plot.html
<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>二次関数図を描こう</h1>
    　<div id="quad"></div>
    　<py-script output="quad">
import matplotlib.pyplot as plt
import numpy as np

x = x = np.arange(-10, 10, 0.1)
y = x*x

fig, ax = plt.subplots()
ax.plot(x, y)
fig
    　</py-script>
  　</body>
</html>
```
実行すると、
![截圖 2022-05-09 00.46.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067829/05ca13ba-42ad-d364-1936-727cb7fc534d.png)

# おわりに
Pythonが直接HTMLに書き込めることはとても便利です。
これからも機械学習などに応用できればいいと思います。

# 参考
1. https://github.com/pyscript/pyscript/blob/main/GETTING-STARTED.md
2. https://pyscript.net/