Zenn
ThinkingsテックブログPublicationへの投稿
📑

フロントエンドでPythonを活用！PyScriptの魅力と使い方

まろん
2024/12/26に公開
Python
pyscript
tech

はじめに

皆さん、はじめまして。Thinkings株式会社でプロダクトエンジニアとして働いている、まろんです！

突然ですが、皆さんは「Python」をご存じでしょうか？
「空飛ぶモンティ・パイソン」というコメディ番組が由来で、今や非常に人気のあるプログラミング言語です。

Pythonはそのシンプルな文法と豊富なライブラリによって、データ分析や機械学習、バックエンド開発など、幅広い分野で活躍しています。技術系情報共有サイト（Qiitaなど）でも、常に人気上位に入る言語です。

しかし、Webアプリケーションを開発するとき、バックエンドはPython、フロントエンドはReactなどの別言語で開発することが一般的ですよね。言語が分かれることで、初心者は「なぜフロントとバックエンドで異なる言語を覚えなきゃならないの？」と苦労することもあるでしょう。

そんな方にご紹介したいのが、2022年4月にAnaconda社から発表された「PyScript」です！
本記事では、PyScriptの魅力とその基本的な使い方を紹介していきます。

PyScriptとは

PyScriptは2022年4月にAnaconda社から発表された、HTML内に直接Pythonコードを書いてブラウザ上で実行可能にする革新的なフレームワークです。

例えば、下記のようにmatplotlibを利用してデータを可視化することも簡単にできます。
こちらで実際のサイトを確認可能です。

PyScriptの例

PyScriptの基本的な使い方

参考資料

環境構築

まずは環境構築です。PyScriptには無料で試せるオンライン環境があり、アカウント登録後にログインすると、NewProjectから新規プロジェクトを作成できます。
ダッシュボード
プロジェクトを作成すると、以下のような画面が表示されます。
プロジェクト
FILESにindex.html、main.py、pyscript.tomlといったファイルを配置すると、PREVIEWエリアに結果が表示されます。これらを用意することで、ここまで説明したチュートリアルを一通り試すことができます。

基本的な使い方

下記はpy-scriptタグ、<script type="py">タグを使った直接コード記述や、外部Pythonファイルを読み込む例です。

<!doctype html>
<html>
    <head>
        <!-- 公式おすすめmeta tags -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">

        <!-- PyScript CSS -->
        <link rel="stylesheet" href="https://pyscript.net/releases/2024.11.1/core.css">

        <!-- PyScriptの読み込み -->
        <script type="module" src="https://pyscript.net/releases/2024.11.1/core.js"></script>

        <!-- Pythonが読み込まれるまでLoadingを表示 -->
        <style>
            #loading { outline: none; border: none; background: transparent }
        </style>
        <script type="module">
            const loading = document.getElementById('loading');
            addEventListener('py:ready', () => loading.close());
            loading.showModal();
        </script>

        <title>PyScript Hello World</title>
    </head>
    <body>
        <dialog id="loading">
            <h1>Loading...</h1>
        </dialog>
        <py-script>
            from pyscript import display
            print("Hello, PyScript!")
            display("Hello, PyScript!")
        </py-script>
        <script type="py">
            from pyscript import display
            from datetime import datetime
            now = datetime.now()
            display("Hello World")
            display(now.strftime("%m/%d/%Y, %H:%M:%S"))
        </script>
        <script type="py" src="./main.py" config="./pyscript.toml" terminal></script>
    </body>
</html>

必須設定

PyScriptを使うには、HTMLファイルの<head>内で以下のコードを記述する必要があります。

 <!-- PyScript CSS -->
<link rel="stylesheet" href="https://pyscript.net/releases/2024.11.1/core.css">

<!-- PyScriptの読み込み -->
<script type="module" src="https://pyscript.net/releases/2024.11.1/core.js"></script>

その他、metaタグやLoading表示は推奨ですが必須ではありません。

Pythonコードの書き方

<body>内でPythonを動かす方法は主に2つあります。

  1. <script type="py">タグ内に直接Pythonコードを書く方法
<body>
  <ul>
    <li>現在の時刻は<b><span id="now">取得中...</span></b>です。</li>
  </ul>
  <script type="py">
    from pyscript import display
    from datetime import datetime
    now = datetime.now()
    display(f"{now:%Y年%m月%d日 %H:%M:%S}", target="now")
  </script>
</body>

このとき、PyScriptでHTML要素に結果を表示する際はdisplay関数を使用します。
display("表示したい文字列", target="要素ID")で特定要素内に表示可能です。
example | display
また引数にappend=Falseを指定すれば既存テキストを上書きできます。

<body>
  <ul>
    <li>現在の時刻は<b><span id="now">取得中...</span></b>です。</li>
  </ul>
  <script type="py">
    from pyscript import display
    from datetime import datetime
    now = datetime.now()
    display(f"{now:%Y年%m月%d日 %H:%M:%S}", target="now", append=False)
  </script>
</body>

example | display | append
2. py-scriptタグを使う方法

<py-script>
    print("Hello, PyScript!")
</py-script>

こちらはpy-scriptというカスタムタグで、タグ内にPythonコードを書くと自動的に実行されます。

外部ファイルの利用

<script type="py" src="./main.py" config="./pyscript.toml">のように、外部ファイルからPythonコードを読み込むこともできます。

pyscript.tomlファイルでは次のような設定が可能です。

  • Pythonインタープリターのバージョン指定: 特定のPythonバージョンを指定できます
interpreter = "0.23.4"
  • 必要なパッケージの指定: PyPIからインストールするパッケージをリストで指定できます
packages = ["numpy", "pandas"]
  • 外部ファイルの取得設定: URLからファイルをダウンロードし、仮想ファイルシステム上のパスに配置できます
[files]
"https://example.com/data.csv" = "./data.csv"
  • JavaScriptモジュールの指定: Pythonコード内で使用するJavaScriptモジュールを指定できます
[js_modules]
main = ["https://example.com/module.js"]

ここまでがPyScriptの基本的な使い方です。
PyScriptを使えば、HTMLとPythonを組み合わせて、フロントエンドからバックエンド的な処理まで、同じ言語で実装しやすくなります。

実際に作ってみた

コード自体はこちらからも確認できますが以下のようになっています。

<!doctype html>

<html>
    <head>
        <!-- Recommended meta tags -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">

        <!-- PyScript CSS -->
        <link rel="stylesheet" href="https://pyscript.net/releases/2024.1.1/core.css">

        <!-- This script tag bootstraps PyScript -->
        <script type="module" src="https://pyscript.net/releases/2024.1.1/core.js"></script>

        <style>
            #loading { outline: none; border: none; background: transparent }
        </style>
        <script type="module">
            const loading = document.getElementById('loading');
            addEventListener('py:ready', () => loading.close());
            loading.showModal();
        </script>

        <title>>PyScriptでFour Keysの可視化</title>
        <style>
           .grid-container {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
                width: 90%;
                margin: auto;
                padding: 20px;
            }
            .chart-container {
                width: 100%;
                height: auto;
            }
        </style>
    </head>

    <body>
        <dialog id="loading">
            <h1>Loading...</h1>
        </dialog>
        
        <h1>Four Keys 指標の可視化</h1>
        <div class="grid-container">
            <div class="chart-container" id="deploy-frequency"></div>
            <div class="chart-container" id="lead-time"></div>
            <div class="chart-container" id="change-failure-rate"></div>
            <div class="chart-container" id="time-to-restore"></div>
        </div>

        <script type="py" src="./main.py" config="./pyscript.toml"></script>
       

    </body>

</html>

from pyscript import display
import matplotlib.pyplot as plt
from datetime import datetime

# サンプルデータの作成
dates = [datetime(2023, i, 1) for i in range(1, 13)]
deploy_frequency = [5, 7, 6, 8, 7, 9, 10, 12, 11, 13, 14, 15]
lead_time = [2.5, 2.0, 1.8, 1.5, 1.7, 1.4, 1.3, 1.2, 1.1, 1.0, 0.9, 0.8]
change_failure_rate = [0.05, 0.04, 0.06, 0.05, 0.04, 0.03, 0.02, 0.03, 0.02, 0.01, 0.01, 0.01]
time_to_restore = [30, 28, 25, 20, 18, 15, 14, 12, 10, 8, 7, 5]

# グラフ描画関数
def plot_metric(dates, values, title, xlabel, ylabel, target_id, color='blue'):
    fig, ax = plt.subplots(figsize=(6, 4))  # グラフサイズを指定
    ax.plot(dates, values, marker='o', color=color)
    ax.set_title(title)
    ax.set_xlabel(xlabel)
    ax.set_ylabel(ylabel)
    ax.grid(True)
    plt.xticks(rotation=45)
    plt.tight_layout()
    display(fig, target=target_id)

# Plot each metric
plot_metric(dates, deploy_frequency, 'Deployment Frequency', 'Date', 'Number of Deployments', 'deploy-frequency')
plot_metric(dates, lead_time, 'Lead Time for Changes', 'Date', 'Lead Time (Days)', 'lead-time', color='orange')
plot_metric(dates, change_failure_rate, 'Change Failure Rate', 'Date', 'Failure Rate', 'change-failure-rate', color='red')
plot_metric(dates, time_to_restore, 'Time to Restore Service', 'Date', 'Recovery Time (Minutes)', 'time-to-restore', color='green')

これを実行させると以下のように表示されます。
result

これらはPyScriptの基本的な使い方とPythonの知識さえあれば作れるものになっています。
PyScriptとして使っているのは、<script type="py" src="./main.py" config="./pyscript.toml"></script>で外部ファイルを用いて実行しており、HTMLの表示はdisplay関数使ってるのみです。
あとは、Pythonで仮のデータを作ってmatplotlibを使ってグラフを描画しているだけです。

このように、PyScriptはフロントで簡単にPythonを使えるようになるので、Pythonを使って何か小さなアプリケーションを作りたい場合は、選択肢の１つとして考えてみるのも良いかもしれません。

さいごに

以上が、PyScriptの魅力と使い方でした。PyScriptは今なお開発が進んでいるプロジェクトのため、これから先もっとよくなることが期待できるので、定期的にチェックしてみてはいかがでしょうか。
以上になります。ここまで読んでくださりありがとうございました！

Thinkingsテックブログ
ThinkingsテックブログPublication

sonar ATSで採用担当者の皆さまを支援する、Thinkings株式会社のエンジニアによるテックブログです。

Discussion