Written by Billy

PyScriptの使い方【コピペでOK】

Programming 未分類

話題になっている【PyScript(パイスクリプト)】の使い方をまとめました。

本日の内容

  • PyScriptってなに?
  • 今はお試し版が試用運転中(2022年5月)
  • PyScriptの使い方【コピペでOK】
  • 実例紹介

PyScriptってなに?

PyScript 使い方

【PyScript(パイスクリプト)】
何となく名前的に、「Python+Javascript」な感じがしますが、
まさにその通りでして。

PyScriptとは

  • Python(パイソン)を
  • JavaScript(ジャヴァスクリプト)のように
  • HTML内に記述して
  • Webブラウザ上で実行できる
  • プログラミング言語です。

今はお試し版が試用運転中

(2022年5月現在)アルファ版がリリースされている状態で、
正式リリースではまだない状態です。

公式サイトでも、

現時点では、本番環境で使用することはお勧めしません。

と書かれています。

PyScriptの使い方【コピペでOK】

PyScript 使い方

使い方はかんたんです。

HTMLファイルのhead内に、下記コードを記述するだけです。

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

コピペでOKです。
不安な方は公式サイトから持ってきてもらっても大丈夫です。https://pyscript.net/

下の画像の通りに入れれば問題ありません。

PyScript 使い方

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

PyScript使用例の紹介

PyScript 使い方

実際の使い方を紹介します。

基本的にはPythonのコードをbody内に記述していく形になります。

1.同じ文章を3回呼び出してみます。

See the Pen Untitled by yuuki (@yoshiyuu0214) on CodePen.

(エラーが出た場合は、右下のReturnを押してみてください。)

2.現在の時刻を表示してみます。

See the Pen Untitled by yuuki (@yoshiyuu0214) on CodePen.

(エラーが出た場合は、右下のReturnを押してみてください。)

3.外部ライブラリを使ってグラフを表示してみます。

See the Pen Untitled by yuuki (@yoshiyuu0214) on CodePen.

(エラーが出た場合は、右下のReturnを押してみてください。)

PyScriptの説明をまとめました。

PyScript 使い方

PyScriptの使い方をまとめました。

  • head内に読み込み用のコードを2つ記述
  • body内にPythonコードを記述
  • 正式リリースまで

正式に実装されると、かなり便利な機能だと思います。

うまく取り入れていきましょう!