Clever Geek Handbook

Brython：フロントエンドでJavaScriptをPythonに置き換える

こんにちは、Habr！



私たちの読者の満足のいくように、私たちの仕事はPythonの本を更新し 続けています。しかし、検索はこの方向に進んでいます-そして今日はBrythonに言及したいと思います-ブラウザ用のPython。記事は短く、少し遊び心があり、探偵です。私たちは作者のスタイルを維持しようとしました。



この記事では、フロントエンド（ブラウザ）開発用のPython実装であるBrythonの操作について簡単に紹介し ます。



プロジェクト全体がここに掲載されてい ます。



前書き



JavaScriptプログラマーの成功をうらやましく、Pythonの共謀者たちは秘密裏に集まり、この終末論的な世界におけるPythonの未来について話し合いました。JavaScriptはいたるところにあり、Pythonのクリアを使い果たしています。Node.jsを 装備したJavaScriptは、Pythonの領域に侵入し、以前はRubyに匹敵していた最愛のサーバー側言語としての支配的な役割を失いました（ 当時を覚えていますか？）。次に、JavaScript領域の中心であるブラウザに進出します。



あなたの話を忘れないでください（そして未来を覚えておいてください）



このジレンマは、前述の共謀者に限定されていませんでした。Transcryptの作者である別のマントと短剣の騎士がい ました。彼は、コードをJavaScriptに直接コンパイルするPython用のコンパイラーを作成することを決定しました。優れた毒殺者として、彼はPythonの痕跡を残しませんでした。それは有望に見えた。



他の人は歴史のレッスンを利用することを好みました。家族全員で移住するだけです。少なくとも、Pyodideの作成者はそう考えました 。彼らは、Pythonコードを実行できる完全なPythonインタープリターを使用して、JavaScript側にエンクレーブを作成しようとしていました。したがって、任意のPythonコードをそこで実行できます。 、C言語へのバインドがあるデータサイエンススタックのほとんどを含みます（例：Numpy、Pandas）。



また、非常に有望に見えます。しかし、Pyodideの作者が行った最初の怠惰なテストでは、最初はページの読み込みが少し遅いことが示されました。



次に、共謀者は優れた共謀者の精神に忠実に取り組みました。PythonをJavaScriptに変換する別のコンパイラを作成しましたが、今回はページの読み込み時にJavaScriptにコンパイルします（コードを事前にJavaScriptにコンパイルするTranscryptとは異なります）。このようにして、ブライトン同胞団が結成されました。それらすべてを支配する1匹のヘビ。



こんにちは世界



伝統的な「ハローワールド」を書いてみましょう



そしてこれがブライトントルーパーです（私はコンパイラについて話している）。 



<script type="text/javascript"
       src="https://cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js">
</script>
    
<body onload="brython()">
...
</body>


body



上記のタグ では、Brythonでコードを記述しています。 



<script type="text/python">
from browser import document

document <= "Hello World"
</script>


要素にHelloWorldを追加するだけ document



です。うーん。非常に簡単。



完全に-以下。 



<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/brython@3.8.8/brython.min.js">
    </script>
</head>

<body onload="brython()">

<script type="text/python">
from browser import document

document <= "Hello World"
</script>
</body>
</html>


この場合、ページには「HelloWorld」という挨拶が表示されます。



電卓



ブライトンで計算機を書いてみましょう。彼のコードはすべてここに掲載されてい ます。







はい、ご想像のとおり、テーブルが必要です。やってみましょう。 



from browser import document, html
calc = html.TABLE()


最初の行だけを追加しましょう。つまり、番号のフィールド（これを呼びましょう result



）とCキーを表示します。 



calc <= html.TR(html.TH(html.DIV("0", id="result"), colspan=3) +
                html.TD("C"))


はい、どちらの場合もこの構文についてはよくわかりません <=



。しかし、あなた自身で判断してください、そのようなクールなライブラリ、それで私はそれに同意します。



それでは、キーボードを追加しましょう 



lines = ["789/", "456*", "123-", "0.=+"]
calc <= (html.TR(html.TD(x) for x in line) for line in lines)


最後に、に追加 calc



し document



ます。 



document <= calc


だから、これまでのところとても良い。これらすべてをどのように機能させるのですか？まず、キーが押されたときに結果要素への参照を取得して操作する必要があります。 



result = document["result"] #       id


次に、result



キーボードの要素が押されるたびに更新する必要があり ます。このために、イベントハンドラーを作成しましょう。Brython開発者に信頼を置き、このコードが機能することを確認しましょう。result



押したボタンに応じた操作に注意して ください。 



def action(event):
    """  "click"     ."""
    # ,  ,   "target" 
    #  event 
    element = event.target
    # ,   ,    "text" 
    value = element.text
    if value not in "=C":
        #    
        if result.text in ["0", "error"]:
            result.text = value
        else:
            result.text = result.text + value
    elif value == "C":
        # 
        result.text = "0"
    elif value == "=":
        #      
        try:
            result.text = eval(result.text)
        except:
            result.text = "error"


最後に、上記のイベントハンドラーをclick



すべてのボタンのイベントにバインドし ます。 



for button in document.select("td"):
    button.bind("click", action)


とてもシンプルだったことがわかります。しかし、真剣に、Brythonは私にはエンジニアリングの傑作であり、おそらくPython言語に対する私の愛の最高の例証であるように思われます。開発者をサポートし、 Githubリポジトリでアスタリスクを付けてください 。


More articles:


All Articles