Python

この記事では「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ブラウザ上で直接実行できるようにするためのツールおよびフレームワークです。

Table Of Contents

表記の変更（<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 を前提にしている」と言い切れる方が、トラブル時の切り分けや保守が圧倒的に楽になります。

使用例

定番の「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>

Python

from js import document

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

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

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

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

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