Python

Pyscript is a tool and framework that simplifies the development of interactive web applications by allowing Python code to be executed directly in the web browser.

Pyscript

Pyscriptは、Pythonを Webブラウザ上で直接実行できるようにするためのツールおよびフレームワークです。

表記の変更（<py-script> → <script type="py">）

古い PyScript の記事では <py-script> タグが使われていることがありますが、現在の PyScript では <script type="py"> を使う書き方が基本です（このページのデモもこの方式で統一しています）。

何が変わった？

以前は Python 用の専用タグとして <py-script> が用意されていましたが、現在は HTML の <script> 要素に type="py" を指定して Python を埋め込む方式が中心になりました。

なぜ変わった？（初心者が迷いにくくするための要点）
  • <script> を使う方が HTML として自然で、見通しが良い
  • エディタの補助や構文ハイライトなど、周辺ツールと相性が良い
  • 古い情報と混ざったときも「どれが今の書き方か」判断しやすい
覚え方（このページの結論）

これから書くなら <script type="py"> を使います。検索で見つけたサンプルが <py-script> だった場合は「古い例の可能性が高い」と疑い、公式ドキュメントやリリース表記を確認してください。

HTML

<!-- 現在の基本（推奨） -->
<script type="py">
	print("Hello, PyScript!")
</script>

<!-- 古い例で見かける（非推奨） -->
<py-script>
	print("Hello, PyScript!")
</py-script>

実務メモ：社内Wikiや古いブログの手順をなぞって動かないときは、まず <py-script> を <script type="py"> に置き換え、さらに読み込んでいる PyScript の URL（latest か releases 固定か）も確認すると切り分けが早くなります。

主な特徴

HTML統合
Pyscriptを使用すると、HTMLファイル内で Pythonコードを直接書くことができます。JavaScriptのように Pythonコードを HTMLタグで囲むことで、ブラウザ上で実行できます。

Python

<script type="py">
	print("Hello, PyScript!")
</script>
Pythonのエコシステム
Pyscriptは、PythonのライブラリをWebブラウザで使用することを可能にします。例えば、NumPyや Pandasなどの科学計算ライブラリも利用可能です。
インタラクティブ性
ユーザーは、Webページ上でインタラクティブな Pythonアプリケーションを作成できます。フォームやボタンを使用して Pythonコードの実行結果をリアルタイムで反映させることができます。
WebAssembly (Wasm)
Pyscriptは、Pythonの実行エンジンとして WebAssemblyを使用します。これにより、高速で効率的なコード実行が可能になります。

利点

学習コストの削減
Pythonを既に知っているユーザーにとって、Web開発のために新たにJavaScriptを学ぶ必要がなくなります。
迅速なプロトタイピング
アイデアをすぐに試すことができ、簡単に共有できるWebアプリケーションを作成するのに適しています。
Pythonの利点を活かす
データ分析や機械学習のライブラリを使って、ブラウザ上で高度な計算や分析を行うことができます。

PyScript の読み込みURL（latest と releases 固定の違い）

PyScript は、core.css と core.js を CDN から読み込むことで利用しますが、 読み込みURLには latest と releases 固定の 2 種類があります。

latest（常に最新版を指す）

https://pyscript.net/latest/ を使うと、常に最新の PyScript が読み込まれます。 URLを書き換えなくてよい反面、将来の更新によって挙動が変わる可能性があります。

  • 一時的な検証や個人の実験には便利
  • ある日突然、以前のコードが動かなくなることがある

HTML

<!-- PyScript：latest（常に最新版） -->
<link rel="stylesheet" href="https://pyscript.net/latest/core.css">
<script type="module" src="https://pyscript.net/latest/core.js"></script>
releases 固定（バージョン指定）

https://pyscript.net/releases/2025.11.2/ のように バージョンを明示すると、そのバージョンの PyScript が固定で読み込まれます。

  • 挙動が変わらず、再現性が高い
  • 教材・リファレンス・実務ページに向いている

HTML

<!-- PyScript：バージョン固定（再現性重視） -->
<link rel="stylesheet" href="https://pyscript.net/releases/2025.11.2/core.css">
<script type="module" src="https://pyscript.net/releases/2025.11.2/core.js"></script>

このページでは、将来読み返したときにも同じ結果が得られるよう、 releases 固定の URL を使用しています。

実務メモ：
「最新版を使っている」よりも 「このページは PyScript 2025.11.2 を前提にしている」 と言い切れる方が、トラブル時の切り分けや保守が圧倒的に楽になります。

PyScript のバージョン番号はどこで確認する？

releases 固定で使うバージョン番号（例：2026.1.1）は、公式ドキュメント（PyScript Docs）から確認できます。

  1. まず、PyScript の公式ドキュメントを開きます（このページが公式の案内元です）。

    https://docs.pyscript.net/

    ドキュメントは /2025.11.2/ のように「バージョン付きURL」で提供されており、どの版の説明を読んでいるかが URL で分かります。

  2. 「いまの最新リリース番号」を手早く知りたいときは、公式サイト側の表示も使えます。

    • https://pyscript.net/ には “The latest version is ...” の形で最新番号が表示されます。
    • https://pyscript.net/latest/ を開くと “PyScript version: ...” が表示され、その番号の releases/XXXX.XX.X の読み込み例も確認できます。

  3. 確認した番号を使って、core.css と core.js を releases 固定で読み込みます（このページの方針）。

    HTML

    <!-- バージョン固定（例） -->
<link rel="stylesheet" href="https://pyscript.net/releases/2026.1.1/core.css">
<script type="module" src="https://pyscript.net/releases/2026.1.1/core.js"></script>

実務メモ：
「latest で動かない／挙動が変わった」と感じたら、まず releases 固定に切り替えてください。 バージョンが固定されるだけで、切り分けが一気に楽になります。

補足：なぜ公式ドキュメント（docs）を優先するのか
PyScript は更新が比較的速いため、ブログ記事やサンプルコードは情報が古くなりがちです。 公式ドキュメントは「そのバージョンで正しい情報」を前提に書かれているため、まず最初に確認する基準として最も信頼できます。

使用例

ここでは、releases 固定で読み込んだ PyScript を使い、定番の「Hello Pyscript!」を表示してみます。

まず、事前準備として、ページの上部にある headタグ内に次のコードを記述し、PyScriptのスタイルシートと JavaScriptファイルをインクルードしています。

HTML

<head>
	<link rel="stylesheet" href="https://pyscript.net/releases/2025.11.2/core.css">
	<script type="module" src="https://pyscript.net/releases/2025.11.2/core.js"></script>
</head>

<body>タグ内の文字列（Hello Pyscript!）を表示したい場所に <div>タグ（id="out"）を配置しています。

HTML

<!-- ここに文字列を表示する -->
<div id="out"></div>

<script type="py">
	# Python code here
</script>

<script type="py">タグ内で Pythonコードを記述し、JavaScriptの documentオブジェクトを使って HTML要素を取得し、文字列「Hello Pyscript!」をその要素に設定しています。

Python

from js import document

# 表示したい文字列
message = "Hello Pyscript!"

# 表示する場所の要素を取得
container = document.getElementById('out')

# 文字列を設定
container.innerHTML = message

これで任意の場所に文字列（Hello Pyscript!）を表示することができました。ただ、ページの更新などをすると読み込みに時間がかかるようなので、その点は注意が必要かもしれません。

Loading...

私は、このページの編集中は head要素内に書いた core.js の読み込み部をコメントアウトしておきました。Pyscriptは機能しなくなりますが、ページの読み込みは早くなりました。