Brython - 基本的な使い方

2018-07-31 07:27:45 2602

はじめに

この世には面白いことを考える人がたくさんいて、これもその一つ。

僕らのようにひたすらpythonだけを触っていたいという人たち向けのフレームワーク。

しかも、フロントエンドで動かすために!

それが、Brython。

最終的にはJSに替わるのが目標!というイカれた(イカした)コンセプトのBrython。

ダウンロード


こちら から最近のパッケージをダウンロードします。

  • brython.js

  • brython_stdlib.js
  • の2つが重要なファイルになります。そうなんです。BrythonはPython3のフロントエンドシステムなんですが、結局JSにコンパイルしてます。

    というわけで適当な場所に放り込んでインポートしましょう。

    基本設定


    まずはボディタグにブライソンを使うよー宣言します

    index.html
    <html>
    <head>
    <script src="/brython.js"></script>
    <script src="/brython_stdlib.js"></script>
    </head>
    <body onload="brython()">
    <script type="text/python">
    </script>
    </body>
    </html>
    type=text/python

    という部分が、pythonを記述する箇所になります。

    もちろん、.pyファイルで読み込むこともできます。これまでのインポード通り.jsを.pyに置き換えるだけです。

    モジュールのインポート

    基本的にはDOM操作がメインになりますが、ほとんどすべてのことがJacascriptに置き換えて行うことができます。

    まずは要素の探索から。

    DOM操作


    brython.py
    from browser import document
    
    #要素を取得
    document['hoge'] #id="hoge"の要素を取得
    document.get(selector='.hoge') #class="hoge"の要素をリスト形式で取得
    document.get(name='hoge') #name="hoge"の要素をリスト形式で取得

    こんな感じで簡単に要素を取得することができます。

    jQueryで言うところの下記に対応

    多分

    jQuery
    $('#hoge')
    $('.hoge')
    $('[name=hoge]')

    関連記事