309
268

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptを捨ててPythonでWebフロントエンドを書いてみよう!

Last updated at Posted at 2017-02-24

どうも、オリィ研究所 (http://orylab.com) の ryo_grid こと神林です。

さて、皆さん! JavaScript書いてますか! 私も書いてます。
しかしながら、C, Java, Ruby, Python なんかでコードを書いてきた時間の方が長いために、どうも JavaScript の言語仕様に馴染めないでいる私がいます。

そこで、Webフロントエンドで、JS以外の言語を使う選択肢がないか探してみたところ、BrythonというブラウザJSで実装された (= ブラウザ内で動作する) Python処理系を見つけたので、試してみました。

Brython - A Python 3 implementation for client-side web programming

とにかく試してみる

ネットの海をさまよいつつ、書いてみました。
お題はプログラミング初学者向けの課題でよくあるBMI計算です。

HTMLはこんな感じで書けるようです。

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>BrythonでBMIを計算する</title>
        <meta charset="utf-8">
        <script src="static/brython.js"></script>
        <script src="static/brython_stdlib.js"></script>	
    </head>
    <body onload="brython()">
     <script type="text/python" src="static/bmi.py"></script>
        <h1>BrythonでBMIを計算する</h1>

        <p>身長(メートル)
        <input type="text" id="height" />
        <p>体重(キログラム)
        <input type="text" id="weight" />
        <br><button id="execute">計算だ!</button>

        <div id="result"></div>
    </body>
</html>

処理系に対応するbrython.jsとPythonの標準ライブラリに対応するのであろうbrython_stdlib.jsをheadセクションでロードします。
そして、bodyセクションのonloadでbrython()メソッドを呼ぶようにしてあげます。
あとは入力フォームとボタンを置いて、DOM操作で結果を表示するための "result" という id の divタグを置いておきます。

Pythonのコードは別ファイルに書いて type="text/python" なscriptタグでロードしてあげます。
なお、ここでは別ファイルにしていますが、HTML内にJSをベタ書きするように、Pythonコードを書くこともできるようです。

上でロードしたPythonファイルは下のようになっています。
文法的にはそのままPythonです。

bmi.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-

from browser import document

def calc_bmi(e):
    weight = float(document["weight"].value)
    height = float(document["height"].value)
    
    bmi = str(weight/(height*height))
    rslt = document["result"]
    rslt.text = bmi
    
execute_btn = document["execute"]
execute_btn.bind("click", calc_bmi)

やっている処理は、"execute"というidを振っておいたボタンのDOMをexecute_btn変数に格納して、それを介してcalc_bmi関数を"click"イベント時に発火させる処理として登録しています。
DOMはbrowserパッケージのdocumentモジュールで取得できるようです。

calc_bmi関数では、フォームから入力値を取得し、BMIを計算して、結果を id="result" な divタグのところに設定しています。

そして、これを動かすと、
brython.jpg

こんな感じになります。
ちゃんと動きました!

今回のコードは https://github.com/ryogrid/LearnBrython に一式置いておきました。
Webサーバ機能を提供する app.py も同梱しておいたので、python環境があれば、以下ですぐに動かすことができます。

git clone https://github.com/ryogrid/LearnBrython.git
cd LearnBrython
pip install flask
python app.py
=> Let's access http://localhost:5000/

なんかPythonぽくないぞ?

上で書いたコードはいまいちPythonぽくないですが、公式によればPythonのシンタックスは全てサポートされているようです。

標準ライブラリも結構な量、サポートされているようです。
すごいですね。

パフォーマンスでないんじゃないの?

公式の Gallery を見てもらうとよいと思いますが、

Gallery

重そうな処理もちゃんと動いているように見えます。
ので、よほどパフォーマンスを気にするようなアプリケーションでなければ大丈夫なのかな、という気がします。

また、FAQの冒頭でも言及されているので、詳細を知りたい方はそちらをあたるとよいかと思います。

実装はどうなっているんだろう

github上のBrythonの実装を眺めてみると、インタプリタではなくて、JSにJITコンパイル(トランスレーション)をした上で動かしているようです。
力技!

コンパイルするなら!

最近では、ブラウザ向けアセンブラとでも呼べば良いような、asm.js や WebAssembly というものが出てきています。
これらで実行コードを生成することで、ネイティブコードにコンパイルした場合に近い性能が出るようです。

低水準言語asm.jsとWebAssembly詳解

Brythonもいずれ、こういったものに対応していくのかもしれませんね。
今後も目が離せません。

#おわりに
JavaScriptの代わりのWebフロントエンド実装言語としてPython(Brython)を試してみました。
また、Brythonについて少し深掘りしてみました。

商用プロダクトでの採用が可能かどうかは判断に困りますが、皆さんも趣味プロなどで試してみてはいかがでしょうか。
Let's enjoy!

PS:
今回は触れませんでしたが、Brython以外にもブラウザJSでのPython実装というのはあるようなので、興味がある方は以下をご参照下さい。

309
268
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
309
268

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?