修行の場

知人が言っていました。これは修行だと。

ReactでPython処理のGUIを作れることの検証

ReactでPython処理のGUIを作れることの検証

背景

MLエンジニアとして開発をしていて、PyQTやJupyter Widgetを使ってGUIを書いていました。 ただ、どちらのFWも凝ったUIを作るのに手間がかかるという欠点があり、また、PyQTsshなどでネットワーク越しに使う場合に遅く、リモート上で動かすGUIとしてはあまり適切ではないという欠点があります。

そこで、代わりになるGUIのFWとしてReactを活用することにしました。

Reactを使ってみる

公式トップの説明でざっくり感じを掴みました。 あるコンポーネントの状態が変化したときに、 他のコンポーネントに値の変化をJSXのHTMLを拡張したような書き方を元に自動的に反映してくれることが特徴かと思います。

PyQTやJupyterでは、値の変化を検知するBindを書いて、関係するすべてのコンポーネントを自分で手順的に変更する必要がありましたが、bind内で更新すべき値はstateのみになりました。あとは、reactがFW側で自動的に変更してくれます。

2019年3月現在yarnでパッケージ管理、create-react-appを使ってreactのアプリのテンプレを作れるようです。

reactは部品の再利用性が高いのが利いており、yarnでタグ入力ボックスや画像ギャラリーなどWeb上で公開されている様々な部品をインストールできるため、これらを用いて最小限のフロントエンドの知識でGUIを作れそうです。 PyQTやJupyter Widget用の部品はWeb上にあまりなく、凝ったUIを作るのは手間なのである時点でフロントエンドエンジニアに依頼 or こういった部品を使ってサクサク開発するようにすべきでしょう。

PythonとReactの連携

Python側はWebフレームワークとしては最小限の機能だけあればいいので、bottleを使うことにしました。bottleの最小限の設定をすればbottle側をAPIサーバーとして使えます。また、こうしておくことでNativeアプリ開発時に切り離せるので便利です。

Webサーバーモジュールの起動とyarn startだけすると開発がスタートできます。 ajaxなどでbottle側に処理を依頼するようなことができます。

おまけ:その他の選択肢

Python製のその他のGUI FWとして、TogaやKivvyなどがありますが、 TogaはUbuntu上ではデモすら動かず、KivvyはPyQTと同様の問題を抱えているため、利用は控えました。また、React Native Webというものもありましたが、 Reactで十分であると思ったため利用は控えました。