PyScriptで出来る事

やかん

2024年8月4日 23:36

1. Pythonコードの埋め込み

HTML内に直接Pythonコードを埋め込み、Webページ上でPythonを実行できるようになった。
従来はサーバーサイドでPythonを実行し、結果をクライアントに送信する必要があったが、Pyscriptによりクライアントサイドで直接実行可能に。

2. Pythonパッケージの利用

NumPyやPandas、Matplotlibなどの一般的なPythonライブラリをWebブラウザ上で使用できるようになった。
従来はJavaScriptのライブラリを使わなければならなかったが、Pythonの豊富なエコシステムをそのまま利用可能に。

3. 双方向データバインディング

HTML要素とPython変数の間でリアルタイムにデータを同期できるようになった。
従来のJavaScriptフレームワーク（ReactやVue.js）に似た動的なデータ更新が可能。

4. イベントハンドリング

HTMLイベント（例：クリック、入力変更）にPython関数をバインドできるようになった。
従来はJavaScriptでイベント処理を行う必要があったが、Pythonで同様の操作が可能に。

5. データの可視化

MatplotlibやPlotlyを使用してブラウザ上でデータを可視化できるようになった。
従来はJavaScriptのD3.jsやChart.jsを使用する必要があったが、Pythonのビジュアル化ツールが利用可能に。

6. インタラクティブなWebアプリケーションの作成

フォームやボタンなどのユーザーインターフェース要素をPythonで制御できるようになった。
従来のフロントエンド開発手法に比べて、PythonだけでフルスタックのWebアプリケーションを構築可能に。

使用例

以下に、Pyscriptの基本的な使用例を示します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PyScript Example</title>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css">
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <h1>Hello, PyScript!</h1>
    <py-script>
        from datetime import datetime

        now = datetime.now()
        display_time = now.strftime("%Y-%m-%d %H:%M:%S")
        print(f"Current time: {display_time}")
    </py-script>
</body>
</html>

このコードでは、HTMLページ内にPythonコードを埋め込んで現在の日時を表示しています。PyScriptを使うために必要なスタイルシートとJavaScriptファイルを読み込むことも示しています。

実用例

1. データの可視化

Pyscriptを使用すると、データの可視化をWebブラウザ上で直接行えます。以下は、Matplotlibを使ったグラフの描画例です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PyScript Data Visualization</title>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css">
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <h2>Data Visualization with PyScript</h2>
    <py-script>
        import matplotlib.pyplot as plt

        plt.plot([1, 2, 3, 4], [10, 20, 25, 30])
        plt.xlabel('X Axis')
        plt.ylabel('Y Axis')
        plt.title('Simple Line Plot')
        plt.show()
    </py-script>
</body>
</html>

2. インタラクティブなフォーム

ユーザーの入力を受け取って処理する簡単なフォームの例です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Interactive Form with PyScript</title>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css">
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <h2>Interactive Form</h2>
    <form>
        <label for="name">Enter your name:</label>
        <input type="text" id="name" name="name">
        <button type="button" onclick="greet()">Submit</button>
    </form>
    <py-script>
        def greet():
            import js
            name = js.document.getElementById("name").value
            print(f"Hello, {name}!")
    </py-script>
</body>
</html>

このフォームでは、ユーザーの名前を入力してボタンを押すと、Pythonの関数が呼び出されて挨拶メッセージが表示されます。

まとめ

Pyscriptは、Web開発においてPythonをクライアントサイドで活用できる強力なツールです。これにより、Webアプリケーションの開発が容易になり、Pythonの豊富なライブラリをWebブラウザ上で直接利用できるようになります。