Zenn
🤙

今話題のPy Script

2023/04/13に公開
HTML
Python
初心者
tech

今回は今話題のPy Scriptを使ってみます！！

Py Scriptとは

Py ScriptとはなんとhtmlにPythonを埋め込めるというものなのです！！ある日JavaScriptについて調べていたら出てきたので、以前も紹介した我が友人staff roi君に教えたら「そんなの機能が少ないぜ」と言われました。それからずっと忘れていたのですが、ふと思いついて調べてみたらこれがすごい！！Pythonは本当に少ししかかじっていないので簡単な例を紹介します。

実際に使ってみた

なんと結構簡単にこれが使えるんですよ。インストールの必要がなく、headタグ内に

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

の二行を書き、bodyタグ内の最下部に

<py-script>
	//ここにpythonを書く
</py-script>

これだけでできます。しかし処理が遅く、公式ホームページにも実践での使用はおすすめしないと書かれていました。楽しむ程度でやりましょう。

文字列の表示

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <title>PyScript Yeah</title>
  </head>
  <body>
    <main class="py-5 grid gap-y-4 grid-cols-1 place-items-center">
      <p id="title" class="text-center text-7xl"></p>
      </div>
    </main>

    <py-script output="title">
print("Hello,world!")
    </py-script>
  </body>

</html>

色々な理由で実行結果が載せられません。すいません。

早いけどまとめ

こんな感じでpythonをHTMLで動かすことができました。私はpythonで計算くらいしかできないので、記事の内容がちょっと薄かったのですが、皆さんもぜひ使ってみてください。

Discussion