PyScript①（Hello, World!を表示）

PyScript

PyScriptを使うと、Htmlの中でPythonのコードを実行することができます。

インストール等は必要ありませんが、HTML読み込み時にランライムのロードやコンポーネントの初期化処理があるため数秒待つ必要があります。

サンプルコード

「Hello, World!」を表示するサンプルを作成します。

PyScriptを実行するためには、HTMLのヘッダー部に次の２行を追加します。

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

Pythonコードは、py-scriptタグの間に記載します。（7～9行目）

[ソースコード]

helloworld.html
1
2
3
4
5
6
7
8
9
10
11
<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>
  <body>
    <py-script>
        print('Hello, World!')
    </py-script>
  </body>
</html>

[ブラウザ表示]

ブラウザ上に、Pythonコードのprintで表示した文字列‘Hello, World!’を表示することができました。