PyScriptのすすめ

HTMLに直接Pythonが書ける画期的で革命的なライブラリのPyScriptについての情報を纏めます。

## 導入方法

ヘッダでJSライブラリをロードするだけです。

```html
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js">
```

## できること

* Python標準ライブラリを用いてコーディングできます。
* 外部パッケージのインストールと利用
  * py-envタグの値に名称を入力することで外部パッケージをインストール可能です。
* FlaskなどPythonのWEB開発ライブラリと組み合わせることも可能です。
* ボタン、コンテナなどのUIコンポーネントの利用
  * Elementオブジェクトを用いてHTMLElementを取得
  * pyscript.write()を用いて、HTMLElementに書き込み
  * pyscript用のUIコンポーネントやbuttonなどにイベントコールバックを指定できる属性があります。
    * 現在はアルファ版でバグにより一部機能していない模様。
* Pythonファイルをソースとしてロード
  * py-scryptタグのsrc属性にソースの相対パスを入力すればいいです。
* REPLを配置してPythonスクリプトをインタラクティブ実行

## メリット

* 環境構築コストの軽減
* 開発言語をPythonに統一可能

## デメリット

* 一部、読み込みや動作が遅い

## 活用

* ビジュアライズ
  * Pythonで比較的簡単にGUI開発ができます。
    * Javaや.NETのようにGUI開発環境が充実しているとは言えないPythonで、GUIを作りたいといった場合は大抵WEBアプリを開発することになりますが、PyScriptを使えば今までJavaScriptで書いていた部分の大半をPythonで代替できて開発難度が下がリます。
  * グラフなど描画に関連するPythonライブラリを利用でき、データを簡単に可視化できます。
* プロトタイピング
  * 導入が簡単で、オンラインエディタといったマルチなプラットフォームで公開できるので、WEBアプリのプロトタイプを開発する上で有用です。
* サーバーレス開発
  * フロントエンドでPythonの豊富なライブラリを活用してロジックを組めるので、バックエンドの実装を減らせます。
  * サーバーレスでPythonの外部パッケージを利用するには複雑な手順が必要だったりしますが、PyScriptでは導入の難度も工数も最小限で済みます。

## CODEPENサンプルコード

CDNで導入できるのでCODEPENのようなオンラインエディタでもPyScriptを書けるということで、公式サンプルから引用しつつ、動作を確認しました。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdxZorG" data-user="method-inside-a-class-of-method" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/method-inside-a-class-of-method/pen/mdxZorG">
  HelloPyscript</a> by method-inside-a-class-of-method (<a href="https://codepen.io/method-inside-a-class-of-method">@method-inside-a-class-of-method</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## PyScriptタグ

| タグ      | 内容                                                                                                                                                            |
| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| py-script | valueにPythonスクリプトを書ける。outputで出力先、srcでソースファイルを指定可能                                                                                  |
| py-repl   | ブラウザにREPLを表示して、Pythonをインタラクティブ実行可能                                                                                                  |
| py-env    | YAML書式で名称を指定することで、pandasやnumpyなどの外部パッケージをインストール可能`paths:`というキーワードを用いると、ローカルのPythonファイルもロード可能 |
| py-config | 基底runtimeであるpyodideのバージョンなど、PyScriptに関する設定を行う。YAML書式。                                                                                |

## PyScript UIコンポーネント

PyScript用にカスタマイズされたUIコンポーネント

| タグ        | 内容                                                           |
| ----------- | -------------------------------------------------------------- |
| py-inputbox | テキスト入力ボックス                                           |
| py-box      | 内部に複数のUIコンポーネントを配置して表示するためのコンテナ   |
| py-button   | ボタン。クリックやフォーカスなどのイベントをハンドリング可能 |
| py-title    | タイトルラベル                                                 |

## PyScriptオブジェクト

| 名称     | 内容                                                              |
| -------- | ----------------------------------------------------------------- |
| pyscript | writeメソッドなど、HTMLエレメントを操作する関数にアクセス可能 |
| Element  | IDを引数に入れてHTMLエレメントをオブジェクトとして取得可能    |