Brython初心者のための覚え書き

# Introduction

## きっかけ
PythonのWebアプリケーションを作成しようとしたのですが、BottleやDjangoといったフレームワークを使おうにも完全にJavaScriptの使い方を忘れてしまいました。そこで、フロントエンドで簡単にPythonを使う方法がないかと思い、Googleで検索してみたところ[Brython](https://brython.info/)というJavaScriptのモジュールを見つけました。忘れっぽいので使い方など備忘録としてまとめておきます。

## 自己紹介
![smile.jpg](https://qiita-image-store.s3.amazonaws.com/0/262742/71ecb16a-0d75-8c36-9324-43303d7fc2a7.jpeg)

[自己紹介ページ](https://qiita.com/Senple/items/b47374e68e4d8d26d0cb)

```
環境情報
Python 3.6.5 |Anaconda, Inc.|
Windows10
```



## 問題点
参考情報が古いものばかりですね。BottleやFlask、DjangoといったPythonのフレームワークが使える人には必要ないですからね…。

>20190208
また上記のフレームワークとくらべて圧倒的にトラブルに対する情報量が少ないです。
僕はあきらめました。(理由後述)


### 対象者
・Python3系を使っているユーザー(Anacondaでインストール)
・Brythonの初心者の方
・1を聞いて10を理解できるエンジニア
・**Windows**の人

### 非対象者
・Bottle, Djangoなどのフレームワークが自分の手足のように使える人~~(教えてください)~~
・JavaScriptを使い慣れている人
・説明下手な筆者を攻撃しようとするエンジニア
・**Mac**の人


# Let's Start
こちらの[参照サイト](https://githubja.com/brython-dev/brython)にお世話になりました。
上記のサイトを軸にわからないとこなどで適宜調べたもの、エラー対処などをまとめておきます。
それでは張り切ってまいりましょう。

## 1.Brythonとは？
PythonをWebブラウザ上で動かすことができるようにするJavaScriptのライブラリだそうです。
開発自体はだいぶ前ですが、Python3にも対応しています。

[ダウンロードはこちら](https://github.com/brython-dev/brython/releases)
上のページがよくわからない場合は[こちら](https://brython.info/)

Cf)
[GitHubからのダウンロードについて](https://qiita.com/Senple/items/66b83757ef73c774a8a6#git%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A7%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%9F%E3%81%8420190206)

大事なのは、

```
brython.js
brython_stdlib.js
```

の二つのファイルだそうです。
~~でもbrython_stdlib.jsの使い道はよくわかっていません。~~

### Sample Code

```Sample.html
<html>
    <head>
        <script type="text/javascript" src="brython\www\src\brython.js"></script>
      </head>
    <body onload="brython()">
      <script type="text/python" >
        from browser import document, alert

        def echo(event):
           alert(document["zone"].value)

        document["mybutton"].bind("click", echo)
         </script>
       <input id="zone">
       <button id="mybutton">click !</button>
      </body>
  </html>

```

これを「Sample.html」というファイル名で保存すればweb上でPythonが動く姿を目の当たりにできます。
上から7行目のbrowserというモジュールはBrython特有のモジュールらしいです。

## 2.Brythonでの応用

**最初に断っておきますが、僕は失敗しました。**

### ファイルの分割方法
課題：
可読性の高さが、Pythonの良さなので可読性を上げるためにも、PythonのファイルとHTMLのファイルを分割します。もちろん以下のような理由でも、分割したかったです。

>
20190208
AtomというEditorでコードを書いていますが、Htmlファイル内のPythonはコメントアウトが、Python式のコメントアウトになるので、そのまま保存してしまうと、Htmlファイルの実行時にエラーが生じる点は地味ですが面倒な問題ですね。
解決策としては、Pythonファイルを外部から取得する形？したほうがいいですね。


Sampleコードの場合で説明しますと、以下のような二つのファイルで作成します。

```
Sample.html
Sample.py
```


「Sample.html」のscriptの部分を外部ファイルで置き換えます。

```Sample.html
<html>
    <head>
        <script type="text/javascript" src="brython\www\src\brython.js"></script>
      </head>
    <body onload="brython()">
      <script type="text/python" src="Sample.py">
         </script>
       <input id="zone">
       <button id="mybutton">click !</button>
      </body>
  </html>
```

```Python:Sample.py
from browser import document, alert
def echo(event):
    alert(document["zone"].value)

document["mybutton"].bind("click", echo)
```

再度述べますが、この部分で失敗しました。
[こちらのサイト](http://blog.livedoor.jp/hamu_nbr/archives/43114283.html)では成功しているようです。

```
Access to XMLHttpRequest at 'ローカルファイルのPath' from origin 'null' has been blocked by CORS policy: 
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
```

CORSという問題があるようです。
調べたところローカルファイルにアクセスするには、「http, data, chrome, chrome-extension, https」という方法でのみやり取りできるようです。
つまりローカルファイル同士で、値のやり取りをすることができないようです。
~~このあたりでBrythonが面倒になってきました。~~

Cf)CORSに関連する情報(結局よくわからなかった)
[Qiita記事](https://qiita.com/rooooomania/items/4d0f6275372f413765de)
[英語のDocument](https://www.html5rocks.com/en/tutorials/cors/)

Cf)CORSに関連したBrython情報(結局よくわからなかった)
[作者への質問](https://github.com/brython-dev/brython/issues/359)
[BrythonのDocument](https://www.brython.info/static_doc/en/html.html)


## 3.結論 (またの章名をあきらめた理由ともいう)
### サーバーの問題
もともとのきっかけとしてローカルサーバーを立てるのが、面倒でBrythonを始めましたが、CORSの問題に対処していろいろ調べているうちに、サーバーを立てる必要が出てきました。サーバーの詳細は先ほど紹介した[こちらのサイト](http://blog.livedoor.jp/hamu_nbr/archives/43114283.html)の中で記述されています。
しかし「server.py」の格納位置やディレクトリの構造などを考えていたら、Bottleなどのフレームワークで実装したほうが簡単と思いました。

### 拡張性に対する不安
Brythonによる実装で使おうとしていた分野が、Brython上で実装できるほどの技術力が自分にはないためです。
[あきらめを決めたサイト](https://teratail.com/questions/26270)から以下引用

>例えば、BrythonはJavaScript実行環境で動きますし、JythonはJava環境、IronPythonは.NET系ですね。ただし、実装具合はあまり期待しないほうが良いでしょう。 
以下にイメージを書きます。
上ほど簡単、下ほど難しい
・Pythonの基本的文法の実装
・標準ライブラリの基本的なものだけ実装
・標準ライブラリの応用的なものも実装
・外部ライブラリの基本的なものなら動く実装
・外部ライブラリの応用的なものも動く実装
最下段ともなると、C言語でのPython実装（つまり普通のPython実装）以外にはないでしょう。なぜなら、大抵の応用的な大規模な外部ライブラリは、一部にC言語による拡張が使われており、これを他のプラットフォームで工数をかけずにそのまま動作させるのは至難だからです。 
仮にピュアPythonで書かれたライブラリであっても、その内部で色々な標準ライブラリを必要としていると、そのどこかの中で「まだ実装されていない」例外が飛ぶ可能性が高いからです。
とはいえ、JythonやIronPythonあたりはある程度まともに動くようになってきたので、モノ好き連中がいろいろ試しているようです。


やりたいことが自然言語処理分野だったのですが、上の5つの中でいうと、一番難しいものです。
そこで普通にBottleをはじめとしたフレームワークを使おうと思いました。
今回BrythonをいじっているうちにそれなりにJavaScriptを思い出してきたので…

Brythonでは、外部Scriptを使うような実装は向かないです。
あくまでPythonの既存ライブラリのみをJavaScript上で動かしたいときは強い破壊力を秘めています。
今後Brythonを使う人にとって少しでも参考になればと思い、記録しておきます。



# その他参照サイト
http://blog.livedoor.jp/hamu_nbr/archives/43114283.html
https://hitoribucho.com/post/20170623180316
https://tech-joho.info/python%E5%85%A5%E9%96%80%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E3%81%8A%E4%BE%9B%E3%81%ABbrython/



Cf.)QiitaのBrython関係のサイトはほとんど古いものばかりですが、参考までに載せておきます。
https://qiita.com/ryo_grid/items/5e34220ed48f4580126d
https://qiita.com/jack-low/items/8e17b26030440217c18c
https://qiita.com/n_0r2/items/90d1d61b14c6a2865289
https://qiita.com/SaitoTsutomu/items/32a89fa45b1aad41da5d