近年、Pythonはウェブ開発やデータ分析、機械学習といった分野で広く使われていますが、最近ではウェブページ上で簡単にPythonコードを実行できるようになりました。つまり、今までJavaScriptでやっていたようなことをPythonで書けるようになったと言うことです。この記事では、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は日々進化しており、さらに多くの機能が追加されています。是非、実際に試してみて、その可能性を感じてみてください！
PyScriptのような新しい技術は、Pythonとフロントエンドの基礎があるかどうかで理解の速さが変わります。その土台を先に固めておきたい方に向いているのがSiiDです。
AIプログラミングスクール「SiiD」について
AIプログラミングスクール「SiiD」は、未経験からITエンジニア転職を目指す方向けのオンラインスクールです。
SiiDの特徴
- 現役エンジニアでYouTube登録者約13万人の「セイト先生」が代表兼主任講師
- 採用側の実務知見（2,000人以上の選考・150名以上のエンジニア採用）にもとづく指導
- 生成AIを取り入れた学習設計と、実務レベルのフルスタックWeb開発スキル
- Workship CAREER（株式会社GIG）と連携した無料の転職伴走支援
- 経済産業省認定のReスキル講座で、給付金の条件を満たせば実質105,600円〜
- 学割あり（35%オフ）
こんな方におすすめ
- 未経験・文系・社会人からITエンジニア転職を本気で目指したい方
- 独学に限界を感じている方
- 費用を抑えながら実務スキルと転職サポートを両立したい方
「未経験だから」とあきらめる必要はありません。採用する側を知り尽くしたプロが、給付金で負担を抑えながら内定まで伴走します。
