PyScript入門ガイド｜PythonだけでWebアプリを作る新しい方法とは？

プログラミング
記事内に広告が含まれています。
スポンサーリンク

PyScriptとは何か？

brian
brian

PythonだけでWebアプリを作ってみたい方に！このガイドでは、PyScriptを使ってブラウザ上でPythonを動かす方法を初心者向けにわかりやすく解説しています。気軽にWeb開発を始めたい方はぜひチェックしてみてください！

Pythonがブラウザで動く時代へ

これまで、Webブラウザ上で動作するプログラミング言語といえば、ほぼJavaScript一択でした。ですが、Pythonを学んでいる方の中には「PythonでWebアプリが作れたらいいのに」と感じたことがある人も多いのではないでしょうか？

そんな願いをかなえてくれるのが**PyScript（パイスクリプト）**です。

PyScriptは、PythonのコードをそのままHTMLの中に埋め込んで実行できるようにする、非常に革新的なプロジェクトです。つまり、Pythonだけでブラウザ上の動的なWebアプリを作ることが可能になります。

誰が作っているの？

PyScriptは、Anaconda社（Pythonの有名なディストリビューションを開発している企業）によって開発されました。2022年に初めて公開され、Python界隈で大きな注目を集めました。

PyScriptの基本的な仕組み

PyScriptは、内部的には**WebAssembly（ウェブアセンブリ）**と呼ばれる技術を活用しています。具体的には、「Pyodide」というPythonランタイムをブラウザ上で動かしており、これによってPythonのコードがリアルタイムで実行できるようになっています。

どんなことができるの？

例えば以下のようなことが、Pythonの知識だけで実現できます：

  • ボタンをクリックしたら処理を実行する
  • 入力フォームに文字を入れて、計算や判定を行う
  • Pythonのライブラリを使ってグラフを描く

つまり、Pythonを使ってインタラクティブなWeb体験を作ることができるのです。

なぜ注目されているのか？

Pythonは初心者にも学びやすく、教育用途やデータ分析の分野では圧倒的な人気があります。しかし、これまでは「Webアプリ＝JavaScript」が常識でした。

PyScriptは、Pythonの強みとWebの世界をつなぐ架け橋になる存在として、多くの開発者から期待を集めています。

スポンサーリンク

PyScriptの主な特徴

HTMLの中にPythonコードを書ける

PyScriptの最大の魅力は、HTMLファイルの中に直接Pythonコードが書けるという点です。たとえば、次のように書くだけでPythonが実行されます。

HTML
<py-script>
    name = "PyScript"
    print(f"Hello, {name}!")
</py-script>

このコードをブラウザで開くだけで、Pythonの出力が画面に表示されるんです。まるでJavaScriptを書くようにPythonが書けるというのは、とても新鮮な体験です。

Pythonのパッケージが使える

PyScriptでは、一部のPythonライブラリも使うことができます。特に「NumPy」や「pandas」、「matplotlib」といったデータ分析に強いライブラリが利用できるのは大きなメリットです。

以下のようにHTML内で<py-env>タグを使うことで、必要なライブラリを宣言できます。

HTML
<py-env>
    - numpy
    - matplotlib
</py-env>

ただし、すべてのPythonパッケージが使えるわけではなく、純粋なPythonで書かれたものが中心です（C言語で作られたライブラリは未対応のものが多いです）。

仮想ファイルシステムを備えている

PyScriptは**仮想的なファイルシステム（in-browser filesystem）**を持っており、ブラウザの中でファイルを作ったり読み込んだりすることができます。たとえば、ユーザーがアップロードしたCSVファイルをPythonで読み込んで、解析結果を表示するようなことも可能です。

JavaScriptとの連携ができる

PyScriptはJavaScriptと共存できる設計になっており、JavaScriptとデータのやり取りをすることも可能です。これにより、たとえばブラウザのAPI（ジオロケーションやWebカメラなど）をJavaScriptで呼び出し、その結果をPythonで処理する、というような柔軟な連携ができます。

インタラクティブなUIコンポーネント

PyScriptにはボタンや入力欄など、簡単なUIをHTML上に設置して動かす機能も備わっています。ユーザーがボタンを押したときにPythonコードを実行する、といったことが手軽にできるようになっています。

このように、PyScriptは単に「Pythonをブラウザで動かす」だけではなく、Web開発に必要な機能をしっかりとサポートしています。

スポンサーリンク

PyScriptを始める準備

必要なものはたったこれだけ

PyScriptを使い始めるのに、特別なソフトウェアをインストールする必要はありません。インターネットに接続されたブラウザと、HTMLファイルを編集できるテキストエディタさえあればOKです。

おすすめの環境：

  • ブラウザ：Google Chrome、Firefox、Edge などモダンブラウザ
  • エディタ：VSCode、Sublime Text、またはメモ帳でも可

本格的な開発には、VSCodeのようなコード補完機能があるエディタが便利です。

PyScriptを読み込むHTMLテンプレート

まず、PyScriptを使うためにはHTMLに特定のCDNリンクを読み込む必要があります。以下は、基本的なテンプレートです。

HTML
<!DOCTYPE html>
<html>
<head>
  <title>My First PyScript</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 from PyScript</h1>

  <py-script>
    print("こんにちは、PyScriptの世界へ！")
  </py-script>

</body>
</html>

このコードを .html ファイルとして保存し、ブラウザで開くだけで、Pythonのコードが実行されて「こんにちは、PyScriptの世界へ！」と表示されます。

ポイント解説：

  • <link>タグ：PyScriptのCSSを読み込むことで、基本的なスタイルが適用されます
  • <script>タグ：PyScript本体のJavaScriptファイルを読み込みます（非同期で読み込み）
  • <py-script>タグ：この中にPythonのコードを書くことで実行されます

ローカル環境でもオンラインでもOK

PyScriptはローカルファイルでも動作しますが、ファイルをブラウザで開いたときにJavaScriptのセキュリティ制限がかかる場合があります。そのため、簡単なローカルサーバーを立てるとより安定して動作します。

Pythonでサーバーを立てる例（コマンド）：

Bash
python -m http.server

このコマンドを実行すれば、現在のフォルダがWebサーバーとして公開され、http://localhost:8000でアクセスできます。

これでPyScriptの開発環境が整いました！
次の章では、実際に「簡単なWebアプリを作ってみる」体験を通して、PyScriptの使い方を学んでいきます。

スポンサーリンク

PyScriptで簡単なWebアプリを作ってみよう

まずは「Hello, World!」から

プログラミングの世界ではおなじみの「Hello, World!」をPyScriptで表示してみましょう。以下のコードをHTMLファイルとして保存し、ブラウザで開いてみてください。

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Hello PyScript</title>
  <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
  <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>

  <h1>PyScriptでWebアプリ体験</h1>

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

</body>
</html>

表示されたページには、Pythonで書いた「Hello, World!」が出力されます。
これだけでも「おおっ！」と感じる方も多いのではないでしょうか。

ユーザーからの入力を受け取ってみよう

次に、ユーザーの入力を受け取り、それをPythonで処理して表示する簡単なフォームを作ってみましょう。

HTML
<!DOCTYPE html>
<html>
<head>
  <title>入力フォームの例</title>
  <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
  <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>

  <h2>名前を入力してください：</h2>
  <input id="name_input" type="text" />
  <button id="btn">送信</button>

  <py-script>
from pyscript import Element

def greet():
    name = Element("name_input").value
    Element("output").write(f"こんにちは、{name}さん！")

  </py-script>

  <div id="output"></div>

  <py-script>
from js import document
document.getElementById("btn").addEventListener("click", lambda e: greet())
  </py-script>

</body>
</html>

解説：

  • Element("name_input").value：HTMLの入力フォームから値を取得します
  • Element("output").write(...)：指定したHTML要素にテキストを書き込みます
  • document.getElementById("btn").addEventListener(...)：ボタンがクリックされたときに関数を呼び出します

このように、JavaScriptをまったく書かずに、Pythonだけでインタラクティブな動作が可能になります。

応用編：簡単な足し算アプリを作る

最後に、ちょっとしたロジックを加えた「足し算アプリ」を作ってみましょう。

HTML
<!DOCTYPE html>
<html>
<head>
  <title>足し算アプリ</title>
  <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
  <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>

  <h2>2つの数を入力して足し算しましょう</h2>
  <input id="num1" type="number" />
  <input id="num2" type="number" />
  <button id="add_btn">計算</button>

  <div id="result"></div>

  <py-script>
from pyscript import Element

def add_numbers():
    try:
        n1 = float(Element("num1").value)
        n2 = float(Element("num2").value)
        result = n1 + n2
        Element("result").write(f"結果: {result}")
    except ValueError:
        Element("result").write("正しい数字を入力してください。")
  </py-script>

  <py-script>
from js import document
document.getElementById("add_btn").addEventListener("click", lambda e: add_numbers())
  </py-script>

</body>
</html>

実行結果：

  • 数字を2つ入力し、「計算」ボタンを押すと、足し算の結果がその下に表示されます。
  • 入力が数字でなかった場合のエラーメッセージもPythonで処理しています。

このように、PyScriptを使えば、Pythonだけで簡単なWebアプリケーションを素早く作ることができます。学んだPythonの知識を、すぐに実践で使えるのは嬉しいですね。

スポンサーリンク

PyScriptのメリット・デメリット

メリット：PythonだけでWebアプリが作れる

PyScriptの最大の強みは、PythonだけでインタラクティブなWebアプリケーションが作れることです。これにより、以下のような利点があります。

学習コストが低い

  • JavaScriptを学ばなくてもOK
  • すでにPythonを学んでいる人にとっては「すぐ試せる」

Webアプリへの応用が広がる

  • フォーム、ボタン、表示などの基本機能を簡単に実装できる
  • データ解析、グラフ表示などもPythonのライブラリで対応可能

オフライン開発にも対応

  • PyScriptはローカルファイルとして動作可能（簡単なサーバー環境があれば）

デメリット：開発段階での制限も多い

ただし、PyScriptはまだ開発途上のプロジェクトであり、いくつか注意点もあります。

実行速度の問題

  • WebAssemblyを使っているため、ネイティブのPythonと比べて遅いことがあります
  • 初期の読み込み時に時間がかかることがある（特にライブラリ使用時）

使えるライブラリに制限がある

  • numpyやmatplotlibなどは使えますが、C拡張が必要なライブラリは動作しないことも
  • requestsなどのネットワークライブラリも一部制限あり（代替手段はあり）

ブラウザ依存の動作やバグ

  • 一部の機能が特定のブラウザでうまく動かないことがある
  • モバイル端末では正しく動作しない場合も

本番運用には慎重さが必要

  • 大規模アプリや商用サービスでの利用は、まだ検証や試験が必要
  • セキュリティやパフォーマンス面での最適化は今後に期待

それでもPyScriptが面白い理由

PyScriptは、まだ「完成されたプロダクト」ではありません。
しかし、学習用や試作（プロトタイピング）、個人のツール作成には非常に魅力的です。

「PythonでWebが作れる」という体験自体がとても新しく、技術者にとっても刺激的です。
今後のバージョンアップにも大きな期待が寄せられています。

次は、より実践的な活用例として「教育ツール」や「データビジュアライゼーション」などのケースを紹介します。そして、そのあとに少し複雑なアプリにも挑戦できるよう導いていきます。

スポンサーリンク

実践的な活用例

PyScriptは、単なる「お試しツール」にとどまりません。アイデア次第でさまざまな用途に活用することができます。ここでは、特に活用が進んでいる3つの分野を紹介します。

教育用ツールとしてのPyScript

Pythonはもともと教育分野での人気が高い言語です。PyScriptを使えば、インストール不要ですぐにコードが実行できる環境を提供できるため、特に初学者にとって大きなメリットがあります。

具体的な活用例：

  • Webブラウザ上で学べる「Python入門サイト」
  • 先生が作成したHTML教材に、生徒が自分のコードを書いて実行できる
  • ブロックごとの課題形式で学べるインタラクティブなチュートリアル

メリット：

  • 教室のPCにPythonをインストールする必要なし
  • Webベースなので、タブレットやChromebookでも動作する

プロトタイピング用途

「ちょっとしたアイデアを試したい」「ユーザーに動作を見せたい」というとき、PyScriptは非常に便利です。

利用シーン：

  • Pythonで作った計算ロジックをWebアプリとして試す
  • ユーザー入力 → 計算処理 → 結果表示、という流れを即座に再現
  • Web APIを叩いて結果を表示するインターフェースの試作

メリット：

  • デザイナーやクライアントとイメージを共有しやすい
  • 短時間で実装できるため、フィードバックをもとにすぐ改善できる

データビジュアライゼーション（可視化）

Pythonの強みのひとつが、データ処理と可視化です。PyScriptを使えば、matplotlibやpandasなどをWeb上でそのまま使うことができます。

活用例：

  • ブラウザ上でCSVファイルを読み込み、グラフ化する
  • データをフィルタリングしてインタラクティブに表示するツール
  • グラフ付きのダッシュボードを、Pythonだけで構築する

使用上の注意：

  • ライブラリ読み込みに時間がかかる場合があるため、読み込み中の表示（ローディング）を工夫すると親切
  • モバイルでは表示が崩れやすいため、PC前提の設計が無難

その他の応用アイデア

  • 単語学習や計算練習などのシンプルな教育ゲーム
  • アンケートフォームや診断チェックのWebウィジェット
  • 小規模な業務支援ツール（例：請求書の計算やチェックリスト）

PyScriptは、ちょっとしたスクリプトをWebに載せたいときに非常に適しています。
使い方によっては、普段の業務効率化にも一役買うかもしれません。

ここまでで、PyScriptがどのような場面で実際に活用されているかイメージが湧いたかと思います。
次の章では、PyScriptの今後の展望と、導入時の注意点について解説します。

スポンサーリンク

PyScriptの今後と注意点

PyScriptは、非常に魅力的なツールでありながら、まだ新しいプロジェクトです。これから使っていく上で、どんな進化が期待できるのか、そしてどのような点に注意すべきかをあらかじめ知っておくことはとても大切です。

開発は今も進行中

PyScriptは2022年に発表されたばかりで、まだ「完成形」ではありません。現在もオープンソースとして開発が進められており、GitHubで誰でも最新情報やコードを見ることができます。

期待される今後の改善ポイント：

  • 読み込み速度の向上（初期表示の高速化）
  • より多くのPythonライブラリへの対応
  • JavaScriptとの連携強化（双方向のやりとり）
  • UIコンポーネントの拡充（フォーム、グラフ、アニメーションなど）

つまり、今後のバージョンアップによって、より実用的な開発が可能になる可能性があります。

実用化に向けた課題

とはいえ、すぐに本番のWebサービスに導入するのは慎重になるべきです。以下の点は特に注意が必要です。

パフォーマンスの問題

  • WebAssembly上で動くため、大規模な処理や高速レスポンスが求められる場面には不向き
  • 複雑なUIや大量データ処理には、やや動作が重くなることがある

セキュリティの課題

  • ブラウザ上でPythonを実行する性質上、コードの内容はユーザーから丸見え
  • ログインや個人情報処理などの用途には慎重な設計が必要

ライブラリやバージョンの互換性

  • ライブラリによってはPyScriptで動かない場合がある
  • バージョンアップ時にコードの書き換えが必要になることもある

利用時のおすすめ方針

小規模・個人向けプロジェクトから始める

  • ツールや教材、実験的なアプリには最適
  • 本格的な商用利用には、まずは試験導入から検討

常に最新版を確認する

  • https://pyscript.net 公式サイトや GitHub で変更点をチェック
  • PyScriptはまだ仕様が変わりやすいため、公式ドキュメントの確認が重要

エラーハンドリングを丁寧に

  • Pythonエラーが画面にそのまま出ることがあるため、try-exceptなどでユーザーにやさしい表示を心がける

今後の可能性に期待！

PyScriptは、PythonとWeb開発の融合という新しいジャンルを切り開く存在です。今後の開発次第では、PythonがWeb開発の現場でもっと身近な存在になるかもしれません。

スポンサーリンク

まとめ

ここまで、PyScriptの基本から実践的な活用例、メリット・デメリット、そして今後の可能性について紹介してきました。Pythonを学んでいる方や、Web開発に興味のある方にとって、PyScriptはまさに**「PythonのままWebに踏み出せる新しい選択肢」**です。

PyScriptでできることを振り返ってみましょう

  • PythonのコードをHTMLに直接書いて実行できる
  • ボタンやフォームなどのWeb UIとPythonロジックが連携できる
  • numpyやmatplotlibなどのデータ処理・可視化ライブラリも利用可能
  • JavaScriptを知らなくても、Pythonだけで簡単なWebアプリが作れる

PyScriptの活用アイデア

  • 教育ツールやチュートリアルの実装
  • 業務効率化ツールのプロトタイプ
  • データビジュアライゼーションやインタラクティブな分析

ただし、注意点も忘れずに

  • 実行速度や対応ライブラリに制限があるため、本番導入は慎重に
  • バージョンアップによる仕様変更に注意
  • コードの安全性やエラーハンドリングも重要

今後に向けて

PyScriptはまだ新しい技術ですが、そのポテンシャルは非常に高く、Python愛好家や教育関係者、プロトタイプ開発者にとって大きな武器となるはずです。

「Pythonしか知らないからWebは無理」とあきらめていた方も、
「PyScriptがあるなら、ちょっと試してみようかな」と感じていただけたなら、この記事の目的は達成です。

ぜひ、自分なりの小さなアプリから、PyScriptの世界を体験してみてください。


🎥 Udemy講座
実際に動画を見て勉強したい方には今回は特に以下の講座がオススメですよ！
以下のリンクからぜひ内容を確認してみてくださいね。

brian
brian

ここまで読んでいただきありがとうございます！

UdemyのPythonコースにはオンラインで学習ができる動画コンテンツがたくさんあります。

当ブログのような文章メインの説明では足りない箇所を補えると思うので、もっと詳しく勉強したいという方はぜひチェックしてみてください！

コメント

タイトルとURLをコピーしました