Brython入門ガイド

2022.09.25

Webアプリケーションを開発するとき、私たちはいくつかの技術や言語を使うのが一般的です。

バックエンドはJava（Spring Boot）、Python（DjangoやFlask）、JavaScript（Node.js）などで簡単に構築できますが、フロントエンドはJavaScript（React、Angularなど）で行うことが一般的です。

また、サーバーサイドでレンダリングしたページを、Reactなどのフロントエンドフレームワークで最終調整するというハイブリッドなアプローチを取ることもあります。

長年にわたり、ウェブでの普及に伴い、JavaScript コミュニティは、フロントエンドを含め、JavaScript を使用したバックエンドを実現するために、当初の機能を拡張してきました。

JavaScriptでWebアプリケーションをコーディングする最も一般的な方法は、MEANスタックを使用することです。

MongoDBデータベース、Node.jsとExpress.jsをバックエンドに、Angular（または最近ではReact）をフロントエンドに使用します。

しかし、本当にPythonを使ってアプリを開発したい場合はどうすればいいのでしょうか？言語はツールであり、ひとつのツールに固執すると柔軟性が失われます。

Brythonはその解決策になるかもしれません。

Brythonは、ブラウザの中でPythonのコードを実行できるJavaScriptライブラリです。

Brythonは、ブラウザ内でPythonのコードを実行できるJavaScriptライブラリです。

Brythonは、Browser Pythonの略です。

という意味です。

Brythonの主な目的は、その名前が示すように、JavaScriptを置き換えて、PythonをWebブラウザの主要なスクリプト言語として、あなたのアプリケーションに押し上げることです。

<html
<head
<script src="/brython.js"</script
</head
<body onload="brython()"
<script type="text/python"
            import browser
            browser.document <= "Hello world!"
         </script
</body
</html

通常 text/python 型をサポートしない <script は、私たちが書いた Python コードを解釈することができます。

ここでは、JavaScriptの document に相当する browser.document に、Hello Worldのメッセージを表示しています。

このBrython入門ガイドでは、Brythonのインストール方法、Brythonプロジェクトの初期化方法、ページのスタイル設定方法、そしていくつかの代替品との比較について見ていきます。

Brythonのインストール方法

コンテンツデリバリーネットワークの活用について

おそらく Brython をインストールする最も便利な方法は、実際にはまったくインストールしないことです。

ローカルにインストールする必要がなく、静的なWebページで読み込んでページに動的な機能を追加するだけなら、単に外部リソースをインポートすることを検討すべきです。

このアイデアは、HTMLページの <head セクションで brython.js ライブラリをロードすることです。

この方法では、クライアントはHTMLページがPCに読み込まれるのと同時にライブラリをダウンロードすることになります。

この動作を実現するために、Brythonの最新の安定版をオンラインでホストしているいくつかのCDN（Content Delivery Networks）からライブラリをロードすることにします。

コンテンツデリバリーネットワークとは、基本的には、あるデータ（コード、ビデオコンテンツ、画像など）をホストしている分散型サーバーのグループです。

この種のネットワークは信頼性が高く、ダウンタイムがほとんどありません。

そのため、コードライブラリのホスティングに最適です。

CDNはいくつかあり、その中から選ぶことができますが、人気のある3つのCDNを紹介します。

<!-- Option 1 : jsDelivr CDN --
<script src="https://cdn.jsdelivr.net/npm/brython@3.9.1/brython.min.js"</script
<script src="https://cdn.jsdelivr.net/npm/brython@3.9.1/brython_stdlib.js"</script
<!-- Option 2: CloudFlare CDN --
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.1/brython.min.js"</script
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.1/brython_stdlib.min.js"</script
<!-- Option 3: GitHub as the CDN --
<!-- Choose this option if you want to use the latest developement version --
<script src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js"</script
<script src="https://raw.githack.com/brython-dev/brython/master/www/src/brython_stdlib.js"</script

PipによるBrythonのインストール

Brythonをより柔軟に使いたい場合は、ローカルにインストールすることができます。

$ pip3 install brython

pip` はあなたのローカルマシンに汗をかかずにパッケージをダウンロードし、インストールします。

Brythonが正常にインストールされたことを確認しましょう。

$ pip show brython

これはバージョンと、Brythonパッケージの基本的な情報を出力します。

Name: brython
Version: 3.9.2
Summary: Brython is an implementation of Python 3 running in the browser
Home-page: http://brython.info
Author: Pierre Quentel
Author-email: quentel.pierre@orange.fr
License: BSD

Brythonプロジェクトの初期化方法

Brythonをインストールした後、明らかな次のステップは、その機能をテストするために簡単なプロジェクトを作成することです。

プロジェクトを作成するには、新しいフォルダを作成し、その中に移動します。

$ mkdir brython-project
$ cd brython-project

次のコマンドを実行して、Brythonプロジェクトを初期化することができます。

$ brython-cli --install

これは、開始プロジェクトディレクトリとファイル階層を含む、Brythonプロジェクトを作成し、初期化します。

brython-project
    | brython.js
    | brython_stdlib.js
    | demo.html
    | index.html
    | README.md
    | unicode.txt

まず、これらのファイルが何のためにあるのかを説明します。

  • brython.js – Brythonのコアエンジンで、browser, browser.html, javascript…などの最もよく使われるモジュールが含まれています。このファイルは、Brythonをローカルにインストールしない場合、HTMLページに <script タグを使用してインクルードされます。
  • brython_stdlib.js – Python標準ライブラリのうち、Brythonがサポートしているすべてのパッケージとモジュールから構成されています。
  • demo.html – Brythonが動作するシンプルなHTMLページで、静的なHTMLページを変更するためにBrythonを利用する方法の興味深い使用例と実例をいくつか紹介します。

  • index.html – シンプルな Hello World HTMLページです。

  • index.html – シンプルな Hello World HTML ページです。

    シンプルなウェブブラウザを使って demo.html を開くことができますが、この方法には制限があるので、まずローカルホストサーバを起動することをお勧めします。

もし、まだ http モジュールをインストールしていない場合は、pip を使ってインストールすることもできる。

$ pip3 install http

インストールが完了したら、サーバーを立ち上げます。

$ python3 -m http.server

これで、ローカルホストが(デフォルトの)ポート8000で起動し、任意のウェブブラウザのアドレスバーから http://localhost:8000/demo.html (または http://0.0.0.0:8000/demo.html) に移動して demo.html ページにアクセスできるようになるはずである。

もし、8000番ポートが他のプロセスで使われている場合は、別のポート(例えば8080番)を定義する必要があります。

$ python3 -m http.server 8080

Pythonを実行できる新しいHTMLページを作成するには、ファイルの head セクションで brython.js と brython_stdlib.js ファイルをインポートすればよいのです。

そして、HTMLファイル自体にPythonを記述する作業に移ります。

<script src="brython.js"</script
<script src="brython_stdlib.js.js"</script

Brythonの仕組み

Brython は Python コードを JavaScript にトランスパイルすることで、ブラウザ上で Python コードを書き、実行することを可能にします。

Brythonはサポートされていない新しい構文でJavaScriptを生成することを意図的に避けているので、このコードはJavaScriptをサポートしているすべてのモダンブラウザで実行することができます。

というのも、Brythonはサポートされていない新しい構文を含むJavaScriptの生成を意図的に避けているからです。

トランスパイルは、コンパイルのサブセットと考えることができます。

コンパイルのプロセスは、通常、ある高級プログラミング言語（例えばC言語）で書かれたソースコードを、ある低級言語（例えばマシンコード）に変換するものです。

一方、トランスパイルというのは、ある高級言語を別の高級言語に変換する処理です（例：PythonからJavaScript）。

Brythonにおけるトランスパイルは、HTMLページが読み込まれると同時に行われます。

ここでは、HTML文書の body タグの中で brython() 関数を呼び出しています。

<body onload="brython()"

brython()関数は、HTML ドキュメントのタグ内に記述された Python コードの変換を実行します。

すべてのPythonコードは` タグで囲まなければなりません。

<script type="text/python"
    <!-- Python code --
</script

また、以下のコマンドで外部のPythonコードをHTMLドキュメントに読み込むこともできます。

<script src="test.py" type="text/python"</script

最近のウェブブラウザはすべて、メインのスクリプト言語としてJavaScriptをサポートしていますが、Pythonはサポートしていません。

したがって、すべてのPythonコードはJavaScriptに変換され、HTMLページを読み込む時間の中で実行される必要があります。

まず、brython()関数は、text/pythonという型を持つすべてのスクリプトを検査して、HTMLページ内のすべてのPythonコードを検索し、そのコードをすべてJavaScriptに翻訳します。

この変換の結果は、JavaScriptのコードを単純な文字列で表現したものです。

この文字列は、ブラウザでJavaScriptのコードとして実行されなければなりません。

BrythonはJavaScriptの eval() 関数を用いて、翻訳されたコードをすべて実行します。

あるいは、JavaScriptのコマンド new Function(function_name, source)(module) を利用して、いくつかのブラウザでコードを実行することもできます。

これは、JavaScriptを実行する上で好ましい方法ではありません。

eval()を使うと、潜在的に悪意のあるサードパーティのコードにアプリケーションをさらす可能性があるため、危険な場合があります。

また、eval()`は他の方法と比べるとかなり遅いです。

Pythonコードが <script src="url" type="text/python" によってHTMLドキュメントに読み込まれた場合、Brythonは読み込まれたファイルの内容を取得するためにAjax呼び出しを実行します。

そのコードはJavaScriptに変換され、上で説明したのと同じように実行されます。

Brythonを使った作業 - 例

さて、Brythonがどのように動作し、何ができるかを理解するために、いくつかの簡単な例について説明します。

Hello World

<html
    <head
        <script src="/brython.js"</script

<body onload="brython()"
<script type="text/python"
            import browser
            browser.document <= "Hello world!"
        </script
</body

ここでは、<script type="text/python"</script タグの間のPythonコードに注目します。

  • import browser は browser パッケージをスクリプトに読み込みます。これは、Brython固有の名前やモジュールをグループ化したパッケージで、主にJavaScriptで使用されるDOM要素やイベントを表現するために使用されます。
  • browser.document は、現在表示されている HTML ドキュメントを表すオブジェクトです。
  • browser.document &lt;= "Hello world!" - = の代わりに &lt;= 表記を使用しています。文字列 Hello world! を含む新しい要素を document が「受け取ります」。別の方法として、次のような構文を使用することもできます。browser.document.attach("Hello world!").

クライアントサイドでは、このコードがレンダリングされると、次のような結果になります。

<html
<head
<script src="/brython.js"</script
</head
<body onload="brython()"
        Hello world!
    </body
</html

要素・属性の追加

Let's modify the previous example and add some paragraphs and text formatting to it. The browser interface provide us with the html module, which exposes HTML tags which we can use to dynamically create a HTML structure from Python code. The syntax to create an object is:

browser.html.TAG("content", [attributes])

Which outputs:

<tag [attributes]=""content</tag
  • browser.html.H2("Hello world!") wraps the Hello world string with the <h2 tag.
  • browser.html.A("link", href="stackabuse.com") creates an <a href="stackabuse.com" tag.

Nesting is also possible with this kind of syntax, simply by including an html.element within another element. Let's add a few elements to our page:

<html
<head
<script src="/brython.js"</script
</head
<body onload="brython()"
<script type="text/python"
            import browser

            title = browser.html.H2("Hello world!")


bold = browser.html.B("bold text")
            url = browser.html.A("link", href="stackabuse.com")
            paragraph = browser.html.P("This is a paragraph. This is " + bold + ", and this is a " + url)


browser.document <= title
            browser.document <= paragraph         
        </script
</body
</html

Alternatively, instead of creating an object with arguments like url = browser.html.A("link", href="stackabuse.com"), you could create it without any arguments and build it up:

# Creating an <a</a tag
url = browser.html.A()


# Adding content between created tags
# <aUrl Text</a
url &lt;= "Url Text"
# Adding href attribute
# <a href="stackabuse.com"Url Text</a
url.href = "stackabuse.com"

When we're finished with the Python code and open the page in a browser - the generated HTML page should look like this:

<html
<head
<script src="/brython.js"</script
</head
<body onload="brython()"
<h2Hello world!</h2
<p
            This is a paragraph. This is <bbold text</b, and this is a 
            <a href="stackabuse.com"link</a.
        </p
</body
</html

We've got a <p element, inside of which we've used a <b and <a element, constructed beforehand.

Brythonでテーブルを作成する###Brythonでテーブルを作成する

テーブルの作成は、これまでとほぼ同じロジックで行うことができます。

table = browser.html.TABLE()

では、いくつかのモックデータでいくつかの行を作成し、tableに追加してみましょう。

# Creating the row
row = browser.html.TR()
# Adding header cells
row &lt;= browser.html.TH("Header1")
row &lt;= browser.html.TH("Header2")
# Appending the row to the table
table &lt;= row


# Adding a first row
row = browser.html.TR()
row &lt;= browser.html.TD("Data 1")
row &lt;= browser.html.TD("Data 2")
table &lt;= row

最後に、HTMLページに作成したバンク <div id="table-zone" 要素にテーブルを表示します。

tableZone = browser.document["table-zone"] 
tableZone &lt;= table

この結果、HTMLページにテーブルが表示されます。

<div id="table-zone"
<table
<thead
<tr
<thHeader 1</th
<thHeader 2</th
</tr
</thead
<tbody
<tr
<tdData 1</td
<tdData 2</td
</tr
</tbody
</table
</div

既存の要素にスタイルを追加する

では、<div id="table-zone" と table 要素にスタイリングを追加してみましょう。

tableZone.style = {
            "background-color": "#dedfdd",
            "width": "50%",
            "min-height": "100px",
            "margin": "auto"
            }

table.style = {
            "border": "1px solid #333",
            "margin": "auto"
            }

この結果、style属性が追加されたHTMLタグが修正されます。

<div id="table-zone" style="background-color: rgb(222, 223, 221); width: 50%; min-height: 100px; margin: auto;"
<table style="border: 1px solid rgb(51, 51, 51); margin: auto;"

アクションのバインディングと要素からのコンテンツ読み込み

Webページはデータを表示するためだけでなく、データを取得するためのものでもあります。

フォームは、ユーザーにデータを送信するように促す最も基本的な方法の1つです。

Brython でフォームを作ってみましょう。

FORM()関数と、INPUT()やLABEL()` といった他の HTML 要素を使います。

# Create a <div id="form-div" element as a container for a new form
formDiv = browser.html.DIV(id="form-div")
# Create a <form element 
form = browser.html.FORM()


# Create the <input type="text"/ field wit the label and add it to the form
input = browser.html.INPUT()
input.type = "text"
input.id = "input-name"
# Add label and to the form
form &lt;= browser.html.LABEL("Enter your name: ") + input


# Create the submit button and add it to the form
button = browser.html.INPUT()
button.type = "button"
button.value = "Submit"
button.id = "submit-button"
form &lt;= button


# Add form to the container <div element
formDiv &lt;= form
# Add the <h4 id="form-response" to show the value from the form
formDiv &lt;= browser.html.H4("Your name is: ", id="form-response")
# Display the div element containing form on the page
browser.document &lt;= formDiv

何もしないフォームではあまり意味がありません。

Brythonの中でもカスタム関数を使うことができます。

submitボタンをクリックしたときに呼び出されるPython関数を作ってみましょう。

` 要素の値を更新します。 def onSubmit(ev): # Get the value of the <input id="input-name"/ field name = browser.document["input-name"].value # Append the stored value to the content in the <h4 id="form-response" tag browser.document["form-response"] &lt;= name # Alert the user that the button has been clicked browser.alert("The Submit Button is Clicked")

最後に、submit-button の click イベントを、作成した onSubmit() 関数にバインドして、ボタンがクリックされたときに期待通りの動作になるようにします。

browser.document["submit-button"].bind("click", onSubmit)

Brythonと代替品の比較

WebブラウザでPythonコードを実行するソリューションはBrython以外にもいくつかありますが、どれを選ぶべきでしょうか？

| システム｜コンパイル時｜実行メカニズム｜｜｜など
| --- | --- | --- |
| Brython｜ページロード時｜PythonをJavaScriptにトランスパイルする｜｜｜｜｜｜｜｜｜｜｜｜｜｜｜｜｜｜Brython
| Transcrypt｜Ahead-of-Time｜Transpiles Python to JavaScript｜Python から JavaScript への変換
| Batavia | アヘッドオブタイム | ブラウザでのPythonランタイム
| Skulpt｜ページロード後｜PythonからJavaScriptへ変換｜Batavia｜Ahead-of-time｜ブラウザでのPythonランタイム
| PyPy.js｜ ページロード後｜ ブラウザでPythonを実行｜ Pyodide｜ PythonからJavaScriptへ変換
| Pyodide｜ページロード後｜ブラウザでPythonを実行｜PyPy.jp

これらの中には、JavaScriptを完全に置き換える傾向のあるものもあれば、JavaScriptの代替となり得るものとして、Webブラウザのための便利なPython環境を作成するだけのものもあります。

対照的に、Brython、Sculpt、Transcryptのように、PythonのコードをJavaScriptにトランスパイルするソリューションもある。

コンパイルの時間に関しては、HTMLドキュメントを読み込む前、後、またはその時に実行されます。

ブラウザでのPythonコードの実行速度をベンチマークすると、Brythonは一般に速いほうに属する。

PythonをJavaScriptにコンパイル（トランスパイル）するソリューションの高速実行と、「先読み」アプローチでスクリプトを実行するためにクライアントが（ダウン）ロードしなければならない翻訳コードを含む大きなファイルとの間で妥協する傾向があるのです。

Brythonは、そのスイートスポットに非常に近いと思われます。

ベンチマークは、実行されるコードによって結果が異なるため、常に実世界の状況を代表するものではありませんが、異なるソリューションの性能を比較することは可能です。

注：定義上、Brythonは同じコードでJavaScriptを使用するよりも常に遅くなります。

これはトランスパイルのステップが追加されるためで、完全に0msになることはなく、その後にJavaScriptのコードが実行されます。

結論

もしあなたがウェブ用のスクリプト言語としてJavaScriptに代わるものを探していて、パフォーマンスをあまり気にしないのであれば、Brythonはかなり良い解決策になるかもしれません。

実行速度とライブラリのロードに必要な過剰なメモリ使用量の間の避けられないトレードオフに対するバランスの取れたアプローチは、ブラウザでPythonを実行するための最もパフォーマンスの良いソリューションの1つになっています。

一方、Brythonは巨大なコミュニティを持たず、広く受け入れられ、使われているわけではありません。

学習リソースは非常に限られており、主に公式のドキュメントを参照することになりますが、実際の大規模プロジェクトはあまりありません。

結局のところ、JavaScriptを置き換える価値があるかどうかが一番の問題です。

小規模なBrythonプロジェクトでさえ、JavaScriptで書かれた全く同じプロジェクトと比較して、実行速度が最大2倍遅くなることがあります。

Brythonとは異なり、JavaScriptには巨大な開発者コミュニティと膨大なリソースがあり、実際のプロジェクトでその可能性を存分に発揮しています。

JavaScriptのフレームワークのすべてを忘れてはいけません。

彼らはJavaScriptの人気を支えるバックボーンです。

フレームワークの助けがなければ、JavaScript は静的な HTML ページの内容を動的に変更する機能を提供する、単なるスクリプト言語のひとつになっていたでしょう。

例えば、複雑なサーバーサイドのロジックを純粋なJavaScriptでコーディングすることを想像してみてください。

Unfortunately, Brython has no frameworks developed for it, so you are restricted to pure Python code, which isn't reasonable for anything other than simple use cases. You likely won't be able to create some complex one-page web application using Brython, as you could using JavaScript and Angular. Brython's a great tool for developers who want to use only Python for both server-side and client-side programming, but it is likely a long way off from replacing JavaScript.

タイトルとURLをコピーしました