pyScriptとは？

PyScriptの一般的な概念と使い方のチュートリアル

By /

近年、Pythonはウェブ開発やデータ分析、機械学習といった分野で広く使われていますが、最近ではウェブページ上で簡単にPythonコードを実行できるようになりました。つまり、今までJavaScriptでやっていたようなことをPythonで書けるようになったと言うことです。この記事では、PyScriptの基本的な概念と、その使い方について初心者向けにわかりやすく解説します。

PyScriptとは？

pyScriptの画像

PyScriptは、Pythonコードをウェブブラウザ上で実行できるようにするフレームワークです。従来のJavaScriptの代わりにPythonを使うことができ、HTMLファイル内に直接Pythonコードを書いて、ブラウザ上で即座に実行できます。

PyScriptは、JavaScriptとの互換性が高く、Pythonの豊富なライブラリやツールをウェブ開発に応用できるのが大きなメリットです。例えば、科学計算用のNumPyやデータ分析用のPandasなど、通常はバックエンドで使用されるライブラリも、PyScriptを通じてクライアント側で動作させることが可能です。

PyScriptの利点

  • Pythonの簡単さと強力さ：Pythonはそのシンプルさと直感的な構文で知られており、PyScriptを使うことでその強力な機能をWebアプリケーションにも活用できます。
  • JavaScriptとの連携：PyScriptはJavaScriptと共存可能で、既存のWebプロジェクトにも導入しやすいです。
  • インタラクティブなUI開発：PyScriptを使えば、ユーザー入力に基づいたインタラクティブなWebアプリケーションを構築できます。

PyScriptの基本的な使い方

それでは、PyScriptを実際に使ってみましょう。まず、PyScriptを使用するために必要なファイルのセットアップ方法と、基本的なコード例を紹介します。

1. HTMLファイルのセットアップ

PyScriptを使うには、まずHTMLファイルを作成し、その中に必要なスクリプトを読み込みます。以下のような基本的なHTMLテンプレートを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PyScriptのサンプル</title>
    <!-- PyScriptのライブラリを読み込む -->
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <h1>PyScriptの基本例</h1>
    <!-- Pythonコードをここに記述 -->
    <py-script>
        print("PyScriptでPythonを実行しています！")
    </py-script>
</body>
</html>

このテンプレートでは、PyScriptのCSSとJavaScriptファイルを読み込み、<py-script>タグ内にPythonコードを記述しています。これだけで、ブラウザ上でPythonコードを実行する準備が整います。

2. PyScriptで簡単な計算をしてみる

次に、簡単な計算を行ってみましょう。例えば、2つの数を足すコードを実装します。

<py-script>
    a = 5
    b = 3
    result = a + b
    print(f"{a} + {b} = {result}")
</py-script>

このコードを実行すると、ブラウザのコンソールに「5 + 3 = 8」という結果が表示されます。Pythonの変数や算術演算子をそのまま使える点が、PyScriptの魅力の一つです。

PyScriptで外部ライブラリを使う

次に、Pythonの強力な外部ライブラリをPyScriptで使用する方法を見てみましょう。例えば、データ分析に広く使われるPandasを使って簡単なデータ処理を行います。

<py-script>
    import pandas as pd

    # サンプルデータの作成
    data = {'名前': ['太郎', '花子', '次郎'],
            '年齢': [23, 25, 30]}

    df = pd.DataFrame(data)

    # データフレームの表示
    print(df)
</py-script>

この例では、Pandasを使ってサンプルデータを作成し、それをデータフレーム形式で表示しています。通常はサーバーサイドで行う処理を、PyScriptを使うことでクライアントサイドで行えるようになる点が大きな利点です。

外部ライブラリの読み込み方法

Pandasのようなライブラリを使用する場合、<py-env>タグを使ってライブラリを指定する必要があります。以下は、その例です。

<py-env>
    - pandas
</py-env>

このタグ内にライブラリ名を記述することで、PyScriptが自動的にそのライブラリを読み込みます。

PyScriptを使った簡単なWebアプリケーションの作成

次に、PyScriptを使ってユーザーインタラクションを含む簡単なWebアプリケーションを作成してみましょう。例えば、ユーザーからの入力を受け取って、その結果を計算して表示するアプリケーションです。

<h2>数の足し算</h2>

<!-- ユーザーからの入力フォーム -->
<input type="number" id="num1" placeholder="数1">
<input type="number" id="num2" placeholder="数2">
<button id="calculate">計算する</button>

<!-- 計算結果を表示する場所 -->
<p id="result"></p>

<py-script>
    def calculate():
        num1 = int(Element("num1").element.value)
        num2 = int(Element("num2").element.value)
        result = num1 + num2
        Element("result").element.innerText = f"結果: {result}"

    # ボタンがクリックされたら計算を実行
    Element("calculate").element.onclick = calculate
</py-script>

このコードは、2つの数を入力してボタンを押すと、その合計を計算して結果を表示する簡単なアプリケーションです。Element()を使ってHTML要素にアクセスし、ユーザーの入力値を取得したり、結果を表示したりします。

まとめ

PyScriptを使えば、Pythonの簡潔さと強力さをウェブ開発に活用することができます。特に、データ処理や科学計算をクライアントサイドで行いたい場合に非常に有用です。また、JavaScriptとの互換性も高く、既存のウェブアプリケーションに容易に統合できます。

この記事では、PyScriptの基本的な概念と、その使い方について解説しましたが、PyScriptは日々進化しており、さらに多くの機能が追加されています。是非、実際に試してみて、その可能性を感じてみてください！

上部へスクロール