スポンサーリンク

HTMLファイルにPythonが書ける？！Webブラウザで動くPythonを解説

Python入門
2025.06.22
  1. はじめに｜PythonがHTMLに書けるってどういうこと？
  2. 1. PyScriptとは？仕組みと背景をやさしく解説
    1. PyScriptとは？
    2. PyScriptを動かしている裏側の仕組み
      1. ✔ Pyodideって何？
    3. なぜ今、PyScriptが注目されているのか？
    4. どんな場面で使えるの？
  3. 2. PyScriptの基本の使い方
    1. ステップ1：PyScriptを読み込もう
    2. ステップ2：Pythonコードを書いてみよう
      1. ① <py-script>タグを使う方法
      2. ② <script type="py">タグでもOK
    3. ステップ3：HTMLにPythonの出力を表示してみよう
    4. ちょっとした応用：HTMLと連携する
    5. ここまでのまとめ
  4. 3. 表示・出力するには？pyscript.display()を使おう
    1. print()とdisplay()の違いとは？
    2. 基本の使い方
    3. 実践！計算結果をHTMLに表示する例
    4. pyscript.write()との違いは？
    5. ポイントまとめ
  5. 4. 外部ライブラリや標準モジュールの使い方
    1. Pythonの標準モジュールはそのまま使える！
      1. 例：math モジュールを使った平方根の計算
    2. 外部ライブラリを使うには？
      1. 例：pandas を使ってデータを表示する
      2. 例：matplotlib でグラフを描画する
    3. 自作モジュールを読み込むには？
    4. 注意：すべてのライブラリが使えるわけではない
    5. まとめ：ライブラリを使いこなそう！
  6. 5. 対話型実行も可能！<py-repl>でJupyterのような環境
    1. <py-repl>ってなに？
    2. 実際に使ってみよう！
    3. PyScriptの関数も呼び出せる！
    4. 入力内容を制御したいときは？
    5. 注意点と活用アイデア
    6. まとめ：REPLで体験型コンテンツを作ろう！
  7. 6. PyScriptの注意点と制限
    1. 1. 読み込み速度が遅いことがある
      1. ✅ 対策のヒント
    2. 2. 利用できるライブラリに制限がある
      1. ✅ 対策のヒント
    3. 3. ファイルの読み書きには制限あり
      1. ✅ 対策のヒント
    4. 4. ブラウザによる互換性の違い
      1. ✅ 対策のヒント
    5. 5. セキュリティに関する注意点
      1. ✅ 対策のヒント
    6. まとめ｜PyScriptの制限を理解して上手に使おう！
  8. 7. まとめ｜PyScriptで広がるPythonの可能性
    1. PyScriptの魅力をふりかえろう
    2. PyScriptが活躍する場面
    3. ただし、過信は禁物！
    4. まずは、自分のPCでHTMLファイルを作って試してみよう！
    5. あわせて読みたい
  9. よくある質問（Q&A）
    1. 関連投稿:

はじめに｜PythonがHTMLに書けるってどういうこと？

「HTMLファイルにPythonが書ける？ しかもブラウザでそのまま動く？」

結論から言うと、できます。
しかも、特別な開発環境やサーバー構築は不要。HTMLファイルを開くだけで、PythonコードをWebブラウザ上で実行できる時代がすでに始まっています。

これまで「ブラウザで動く言語」といえばJavaScript一択でした。
HTMLと組み合わせて処理を書くなら、JavaScriptを学ぶのが当たり前──そう思っていた方も多いはずです。

しかし今は、PythonをそのままHTMLに書いて実行できる技術が登場しています。
その中心となっているのが PyScript（パイスクリプト） です。

PyScriptを使うと、次のようなことが可能になります。

  • HTMLファイル内にPythonコードを直接記述できる
  • ブラウザ上でPythonがそのまま実行される
  • ローカル環境構築やサーバー設定は不要
  • JavaScriptを書かずに、Pythonだけで簡単なWeb処理が作れる

たとえば、以下のようなコードを書くだけで、

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

ブラウザ上に 「こんにちは、世界！」 と表示されます。
まさに「PythonがWebの言語になった」ような感覚です。

この記事では、

  • HTMLにPythonを書ける仕組み
  • PyScriptで何ができて、何ができないのか
  • 初心者が最初に知っておくべきポイント

を中心に、プログラミング初心者の方でも理解できるように解説していきます。

  • Pythonは触ったことがあるけど、Webはよく分からない
  • JavaScriptはできれば避けたい
  • Pythonで簡単なWebツールを作ってみたい

そんな方に向けた内容です。
ぜひ最後まで読んで、「Python × Web」の新しい選択肢を知ってください。



1. PyScriptとは？仕組みと背景をやさしく解説

「PyScriptってそもそも何なの？」
ここからは、そう思った方のために、PyScriptの基本的な仕組みと誕生の背景をやさしく説明していきます。

PyScriptとは？

**PyScript（パイスクリプト）**とは、HTMLファイルの中にPythonのコードを直接書いて、Webブラウザ上で実行できるようにする仕組みです。

つまり、PythonがJavaScriptのようにフロントエンドで動くんです。しかも、特別なソフトをインストールする必要はありません。必要なのは、インターネットに接続されたWebブラウザだけ。

実行環境を整える必要がなく、「コードを書いてそのまま動かす」ことができるので、学習用途やプロトタイピングにもとても向いています。

PyScriptを動かしている裏側の仕組み

PyScriptは「Pyodide（パイオダイド）」という技術の上に成り立っています。

✔ Pyodideって何？

Pyodideは、Pythonの実行環境（CPython）を**WebAssembly（Wasm）**という技術でブラウザ用に変換したものです。

  • WebAssemblyは、C言語やRustなどをブラウザで動かせるようにした新しい仕組み。
  • Pyodideは、PythonのコードをWebブラウザ内で実行できるように変換してくれるツール。
  • つまりPyScriptは「Pyodideを使って、HTMLタグでPythonを書けるようにしたフレームワーク」です。

少しややこしく聞こえるかもしれませんが、要するに「PythonをWebブラウザで動かす技術」がPyodideで、「それをHTMLの中に組み込めるようにしたのがPyScript」なんです。

なぜ今、PyScriptが注目されているのか？

理由はとてもシンプルです。

「Pythonは人気があるのに、Webでは使いにくかった」から。

Pythonは文法が読みやすく、初心者にもやさしい言語として、データ分析や自動化、AI分野では大活躍しています。
でも、フロントエンドのWebアプリケーションを作るには、どうしてもJavaScriptが必要でした。

そこに登場したのがPyScript。
この技術によって、PythonだけでWebアプリのようなことができるようになったのです。

どんな場面で使えるの？

  • 教育：インストール不要なので、学校や講座でPythonを教えるのに最適
  • 試作アプリ（プロトタイピング）：軽く動作確認したい時に便利
  • 簡単な計算ツール：個人向けのWebアプリとして手軽に公開可能

このように、PyScriptは「学びたい・試したい・すぐ動かしたい」という人にぴったりな選択肢です。



2. PyScriptの基本の使い方

ここからは、実際にPyScriptを使って、HTMLの中にPythonコードを書く方法を紹介していきます。とてもシンプルなので、手元にブラウザがあればすぐ試せますよ！

ステップ1：PyScriptを読み込もう

まずは、HTMLファイルの<head>タグ内にPyScriptのスタイルシート（CSS）とスクリプト（JavaScript）を読み込みます。

以下のコードをコピーして、自分のHTMLファイルに貼り付けてください：

<head>
  <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
  <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>

これで、PyScriptを使う準備が整いました。

ステップ2：Pythonコードを書いてみよう

HTMLの<body>タグ内にPythonのコードを埋め込んでみましょう。PyScriptでは、次の2つの方法でPythonコードを記述できます。

① <py-script>タグを使う方法

最も基本的な方法は、<py-script>タグの中に直接Pythonを書くことです。

<py-script>
  name = "PyScript"
  print(f"こんにちは、{name}！")
</py-script>

このコードを実行すると、ブラウザの画面に「こんにちは、PyScript！」と表示されます。まるでJupyter NotebookのようにPythonが動く感覚です。

② <script type="py">タグでもOK

別の書き方として、HTML標準の<script>タグにtype="py"を付けてもPythonを実行できます：

<script type="py">
  print("これは script タグで書いたPythonです")
</script>

どちらの方法でも動作はほぼ同じですが、公式では<py-script>の使用が推奨されています。

ステップ3：HTMLにPythonの出力を表示してみよう

Pythonの結果をHTML内の特定の場所に表示したいときは、pyscript.write()やpyscript.display()を使います。

<h2 id="output-area"></h2>

<py-script>
  from pyscript import display

  message = "これはPythonで作ったメッセージです"
  display(message, target="output-area")
</py-script>

上の例では、id="output-area"の<h2>タグにPythonで作った文字列を表示しています。

ちょっとした応用：HTMLと連携する

HTMLのボタンと連携して、ボタンクリック時にPythonコードを実行することもできます。

<button py-click="say_hello()">あいさつする</button>
<py-script>
  def say_hello():
      print("こんにちは！ボタンがクリックされました。")
</py-script>

これはJavaScriptのonclickのように、ボタンクリックでPythonの関数を呼び出す例です。

ここまでのまとめ

やりたいことPyScriptの書き方
Pythonコードを書く<py-script>タグを使う
出力を画面に表示display()を使って表示先を指定
イベントと連携py-clickなどの属性を使う

次は、さらに一歩進んで「外部ライブラリを使ってみたい！」という方に向けて、matplotlibやpandasなど人気ライブラリの使い方を解説していきます。



3. 表示・出力するには？pyscript.display()を使おう

前の章では、PyScriptを使ってPythonコードをHTMLに書けることを紹介しました。
でも、「print()だけじゃ、どこに表示されるの？」と疑問に思った方もいるのではないでしょうか？

実はPyScriptでは、Pythonの実行結果をHTMLの好きな場所に表示できる便利な仕組みがあります。それが pyscript.display() 関数です。

print()とdisplay()の違いとは？

まず簡単に違いを整理してみましょう。

関数表示される場所用途
print()PyScriptが用意したログエリア（ブラウザ上に出るコンソール）動作確認などに便利
display()任意のHTML要素内に出力ユーザーに結果を見せたいときに便利

「ちゃんと画面に表示したい」場合は、display()を使うのがベストです！

基本の使い方

まずは基本形を見てみましょう：

<h2 id="output-area"></h2>

<py-script>
  from pyscript import display

  message = "こんにちは、PyScriptユーザー！"
  display(message, target="output-area")
</py-script>

このコードでは、<h2>タグにid="output-area"を付けておき、そこにPythonの文字列を表示しています。

出力内容は 第1引数、表示先の要素IDは target引数 で指定します。

実践！計算結果をHTMLに表示する例

たとえば、ユーザーが入力した数値を使って簡単な計算を行い、結果を画面に表示することもできます：

<p>半径（cm）: <input id="radius" type="number" /></p>
<button py-click="calc_area()">円の面積を計算</button>
<p id="result"></p>

<py-script>
  from pyscript import display

  def calc_area():
      r = float(Element("radius").element.value)
      area = 3.14159 * r * r
      display(f"面積は {area:.2f} cm² です", target="result")
</py-script>

このコードでは、

  • ユーザーが入力した半径を取得し、
  • 円の面積を計算して、
  • <p id="result"> の中に結果を表示しています。

インタラクティブなアプリがとても簡単に作れちゃいますね！

pyscript.write()との違いは？

似たような関数に pyscript.write() というものもありますが、これは要素の内容を上書きするのに使われます。一方 display() は「結果の追加表示」にも柔軟で、内部的にDOM操作も自動でやってくれる便利ツールです。

ポイントまとめ

✅ display()を使えば、HTMLの好きな場所にPythonの結果を出力できる
✅ target="id名"で出力先を指定できる
✅ 入力フォームやボタンと組み合わせて使うと便利！

れで、PyScriptを使った実用的な画面出力の方法がわかりましたね。

次はさらに一歩進んで、「Pythonの外部ライブラリ（matplotlibやpandasなど）」を使う方法を紹介します。



4. 外部ライブラリや標準モジュールの使い方

PyScriptの魅力は、ただPythonコードがブラウザ上で動くだけじゃありません。
なんと、Pythonの標準モジュールや人気の外部ライブラリまで使えるんです！

ここでは、math や random といった標準モジュールの利用から、pandas や matplotlib などの外部ライブラリを使う方法まで、わかりやすく紹介します。

Pythonの標準モジュールはそのまま使える！

PyScriptでは、import math や import random といった標準のPythonモジュールは、普段と同じように使えます。

例：math モジュールを使った平方根の計算

<py-script>
  import math

  x = 25
  print(f"{x}の平方根は {math.sqrt(x)}")
</py-script>

これはローカルのPythonコードとまったく同じ書き方ですよね。しかもこれがそのままブラウザで動くというのがすごいところ。

外部ライブラリを使うには？

外部ライブラリ（pandasやmatplotlibなど）を使いたい場合は、HTMLの<head>タグ内に**<py-env>タグ**を追加する必要があります。

このタグの中に必要なライブラリを列挙するだけで、PyScriptが自動で読み込んでくれます。

例：pandas を使ってデータを表示する

<head>
  <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
  <script defer src="https://pyscript.net/latest/pyscript.js"></script>

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

<body>
  <py-script>
    import pandas as pd
    from pyscript import display

    data = {"名前": ["たろう", "はなこ"], "点数": [85, 92]}
    df = pd.DataFrame(data)

    display(df)
  </py-script>
</body>

このコードでは、pandasで作成したデータフレームをそのまま画面に表示しています。Jupyter Notebookとそっくりな体験が、なんとHTMLファイルだけで実現できるんです！

例：matplotlib でグラフを描画する

<py-env>
  - matplotlib
</py-env>

<py-script>
  import matplotlib.pyplot as plt
  import numpy as np

  x = np.linspace(0, 10, 100)
  y = np.sin(x)

  plt.plot(x, y)
  plt.title("Sine Wave")
  plt.show()
</py-script>

これも通常のPythonと同じコードです。PyScriptは内部でグラフをHTMLにレンダリングしてくれるため、特別な処理は不要です。

自作モジュールを読み込むには？

自分で作成したPythonファイル（例：mymodule.py）を読み込みたいときは、同じく <py-env> タグでファイル名を指定しておきます。

<py-env>
  - ./mymodule.py
</py-env>

<py-script>
  import mymodule
  mymodule.hello()
</py-script>

※ファイルはHTMLと同じフォルダ内に置く必要があります。

注意：すべてのライブラリが使えるわけではない

PyScriptは便利ですが、すべてのPythonライブラリが対応しているわけではありません。以下の点にご注意ください：

  • 対応しているのは、Pyodideにビルドされているライブラリのみ
  • ネイティブC拡張に依存する一部ライブラリ（例：OpenCVなど）は使えません

対応ライブラリの一覧はPyodide公式サイトで確認できます。

まとめ：ライブラリを使いこなそう！

やりたいこと方法
標準モジュールを使うそのまま import するだけ
外部ライブラリを使う<py-env> タグにライブラリ名を追加
自作モジュールを読み込む<py-env> にファイル名を記述して import

次は、PyScriptのさらなる魅力である「対話型Python実行環境」について解説します。
Jupyter Notebookのような操作がブラウザだけで可能になるんです！



5. 対話型実行も可能！<py-repl>でJupyterのような環境

ここまでで、PyScriptを使えばHTMLの中にPythonを書いて、結果を画面に表示できることがわかりました。
でも、「その場でPythonコードを打ち込んで試せたらもっと便利なのに…」と思った方、いませんか？

その願い、PyScriptならすでに叶っています。

PyScriptには、まるでJupyter Notebookのようにコードを打ち込んでその場で実行できる入力欄を提供するタグがあります。
それが <py-repl>（パイリプル） です！

<py-repl>ってなに？

<py-repl> は、ブラウザ上にPythonのコード入力欄と実行ボタンを表示するタグです。
ユーザーはそこに自由にPythonコードを書き、実行ボタンを押すだけで、すぐに結果が表示されます。

実際に使ってみよう！

以下のコードをHTMLに貼ってみてください：

<py-repl auto-generate="true" />

たったこれだけで、下記のようなJupyter風の実行環境が出現します👇

>>> print("こんにちは、PyScript！")
こんにちは、PyScript！

auto-generate="true" を指定すると、PyScriptがコードエリアと実行ボタンを自動でセットアップしてくれます。

PyScriptの関数も呼び出せる！

<py-script>内で定義した関数は、<py-repl>からも呼び出すことができます。

<py-script>
  def greet(name):
      return f"こんにちは、{name}さん！"
</py-script>

<py-repl auto-generate="true" />

この場合、greet("はなこ") と入力すれば「こんにちは、はなこさん！」という結果が表示されます。
ユーザー自身がコードを書いて遊べるので、教育用途やチュートリアルにもぴったりです！

入力内容を制御したいときは？

例えば、入力欄のサイズをカスタマイズしたり、初期表示のコードを設定したりすることも可能です：

<py-repl auto-generate="true" rows="8" cols="80">
print("はじめてのREPL！")
</py-repl>

こうすれば、より見やすく・わかりやすいUIを提供できます。

注意点と活用アイデア

注意点

  • ブラウザ上で実行されるため、大量の計算処理やファイル操作には不向き
  • 入力内容に制限をかけられないので、セキュリティには注意（公開環境では特に）

活用アイデア

  • Python入門者向けの「体験サイト」に
  • 自作の関数やライブラリのお試し実行エリアとして
  • オンライン教材やブログでの実行付きチュートリアルに

まとめ：REPLで体験型コンテンツを作ろう！

特徴内容
実行エリアの表示<py-repl auto-generate="true" /> だけでOK
関数呼び出し<py-script>内の関数も使える
カスタマイズサイズや初期コードも変更可能
活用シーン学習・デモ・体験サイトなど



6. PyScriptの注意点と制限

PyScriptは、HTMLファイルにPythonを直接書けるという画期的な仕組みです。
とても便利で面白い技術ですが、実際に使ってみると「おや？」と思う点もいくつか出てきます。

ここでは、PyScriptを使う上で知っておきたい制限や注意点をまとめて紹介します。

1. 読み込み速度が遅いことがある

PyScriptの仕組み上、最初に読み込むデータ量が多くなるため、表示までに時間がかかる場合があります。

特に以下のようなケースでは顕著です：

  • 複数の外部ライブラリ（pandas、matplotlibなど）を使用している
  • 大量のコードを1ページにまとめている
  • モバイル回線など通信速度が遅い環境でアクセスしている

✅ 対策のヒント

  • ページの構成をシンプルに保つ
  • 必要なライブラリだけを<py-env>で読み込む
  • サンプルコードは短く区切って表示する

2. 利用できるライブラリに制限がある

PyScriptはPyodideの上に成り立っています。つまり、Pyodideに組み込まれていないライブラリは使えません。

たとえば、次のようなライブラリは使えないことがあります：

使えない例理由
OpenCVC++のネイティブコード依存でWebAssemblyに変換できない
TensorFlowサイズが大きく、WASM対応も不完全
GUI系ライブラリ（Tkinterなど）そもそもブラウザでは動作しない

✅ 対策のヒント

3. ファイルの読み書きには制限あり

ブラウザ内で動作するため、ローカルファイルへの直接の読み書きは基本的にできません。

たとえば以下のような処理は制限されます：

  • open("example.txt") でローカルファイルを読み込む
  • ローカルにファイルを保存する（保存用の仕組みは工夫が必要）

✅ 対策のヒント

  • 入出力にはHTMLの<input type="file">や、Blob URLのダウンロードなどを使う
  • Web API経由でのやりとりに切り替える

4. ブラウザによる互換性の違い

基本的には主要なブラウザ（Chrome、Edge、Firefoxなど）で動作しますが、古いバージョンや一部のブラウザでは動かないこともあります。

✅ 対策のヒント

  • 開発中はできるだけ複数ブラウザで動作確認をする
  • ユーザー向けには「最新版のChrome推奨」などの案内を表示する

5. セキュリティに関する注意点

<py-repl>などでユーザーが自由にPythonコードを実行できるようにすると、セキュリティリスクが生じる可能性があります。

  • 実行コードが意図しない処理を行うかもしれない
  • 内部データや関数にアクセスされるかもしれない

✅ 対策のヒント

  • 教材やデモなど、限定された用途に絞って使う
  • 本番サービスでの業務ロジックには使わない

まとめ｜PyScriptの制限を理解して上手に使おう！

注意点内容
表示が遅いライブラリ数やコード量に注意
対応ライブラリに制限Pyodideで使えるものだけ
ファイル操作制限ブラウザで直接読み書きできない
互換性ブラウザによっては動作に差
セキュリティ自由入力には注意が必要

PyScriptは「教育用」「デモ用」「体験用」にぴったりな技術です。
これらの制限を理解して使えば、Pythonの新しい可能性を大きく広げてくれます！



7. まとめ｜PyScriptで広がるPythonの可能性

ここまで読んで、「PyScriptって思ったよりすごい！」と感じた方も多いのではないでしょうか？

PyScriptは、これまでWebの世界で難しいとされていた**「Pythonでフロントエンド開発」**を、誰でもカンタンに試せる形で実現してくれます。

PyScriptの魅力をふりかえろう

項目内容
HTMLにPythonが書ける<py-script>タグで直接記述OK
ブラウザだけで動くインストール不要、すぐ試せる
外部ライブラリも対応pandas・matplotlibなども使える
対話型REPLありJupyterのようにコードを入力して実行できる
教育・デモに最適学習サイトや体験ツールに向いている

PyScriptが活躍する場面

  • 📚 教育現場やオンライン教材
    「インストール不要」でそのまま学べる！
  • 🔧 プロトタイピングやデモ
    作ったPythonコードをそのまま見せられる！
  • 🧪 コード付きブログやチュートリアル
    実行ボタン付きの解説が簡単に作れる！
  • 🖥️ デスクトップアプリのHTMLベース試作
    将来的なWeb展開にも対応しやすい！

ただし、過信は禁物！

もちろん、PyScriptにも「遅い・使えないライブラリがある・セキュリティに注意が必要」などの制約はあります。

でもそれを踏まえて使えば、PythonとWebの可能性をぐんと広げてくれる面白い技術であることは間違いありません。

まずは、自分のPCでHTMLファイルを作って試してみよう！

たった数行のコードから、あなたの「Python×Web」の冒険が始まります。
この記事をきっかけに、ぜひPyScriptで新しい体験をしてみてください！

あわせて読みたい

以下の記事もあわせて読むことで、さらに理解が深まります👇

よくある質問（Q&A）

Q
PyScriptはスマホでも動きますか？
A

はい、基本的にスマホでも動作しますが、処理が重いためPC環境の方が快適です。

Q
ローカルに保存されたPythonファイルを読み込めますか？
A

ブラウザ上で直接ファイルを開くことはできませんが、<input type="file">タグを使ってアップロードする方法があります。

Q
FlaskやDjangoのようなWebアプリフレームワークとは何が違いますか？
A

PyScriptはあくまでクライアントサイド専用です。FlaskやDjangoはサーバーサイドのWebアプリを構築するフレームワークなので、目的が異なります。

関連投稿:

Python初心者が「import地獄」に陥る理由｜循環参照・sys.path・正しいモジュール設計 【Python入門】NumPyの基本と使い方をやさしく解説｜配列・計算・統計処理がこれ1本で！ Pydanticとは？Pythonで安全なデータバリデーションを簡単に実装する方法【初心者向け】 Pythonのパターンマッチとは？基本から実践まで初心者向けに解説！

※当サイトはアフィリエイト広告を利用しています。リンクを経由して商品を購入された場合、当サイトに報酬が発生することがあります。

※本記事に記載しているAmazon商品情報（価格、在庫状況、割引、配送条件など）は、執筆時点のAmazon.co.jp上の情報に基づいています。
最新の価格・在庫・配送条件などの詳細は、Amazonの商品ページをご確認ください。

スポンサーリンク