フロントエンド何もわからない / frontend-nanimo-wakaranai 2019/12/24 threecourse

モチベーション • マラソンマッチやゲームAIコンペで いい感じのヴィジュアライザを作りたい • いい感じのGUIがあって、 そこからPythonを叩いてファイルの読み込みや計算をさせて、 結果を連携できれば良い

作ったもの https://github.com/threecourse/visualizer-demo

選択肢 • Pythonのインタラクティブな描画フレームワークを使う Bokeh, Plotlyなど • JavaScriptを使う • PyQtやwxPythonといったGUIフレームワークを使う • 他の言語を使う 学習コストはあるものの、JavaScriptがスタンダードな解っぽい すべてPythonで書けると楽なので、Plotlyなどに注目する価値はある かも。その場合も裏側はJavaScriptなので、学んでおく意味はある。

何を作るか • PythonのWebフレームワークでサーバを立てる • ブラウザで表示する • GUIの機能や描画はJavaScript • ロジックはPython 1. ブラウザに表示されたボタンを押す 2. Pythonで問題を生成し、対応する解を出力する 3. JavaScriptでブラウザに表示する

何を学ぶ必要があるか • HTML/CSS • CSSフレームワーク • JavaScript/TypeScript • PythonとJavaScriptの連携 さらに頑張ると、 • d3.js • React.js/Vue.js

HTML/CSS • 基本的な概念の理解 HTMLのタグ、属性(特にid, class） CSSのセレクタ（タイプ、クラス、ID） padding/border/margin • 慣れないと、そもそも意図したとおりのレイアウトどおりに部 品を配置するのが難しい。中央寄せや段組みだけでも大変 段組みはフレキシブルボックスレイアウト （とグリッドレイアウト）が基本らしい • 配置は一旦ヘッダ、UI、表示部分などの枠を作り、その枠にさ らに押し込んでいくのが分かりやすそう

CSSフレームワーク • 素の部品だと、見た目が味気なさすぎる • CSSフレームワークを使うと簡単に良い見た目になる • 今回は元ネタに従ってSemantic UIを使用 • 他にもいろいろある。BULMAなどは良いかもしれない CSSフレームワークのススメ - BULMAの導入と覚え書き https://qiita.com/belq/items/10ec41f656e47ee2b540 • なぜそのように動くのか理解するには、フレームワークのソー スを見なくてはいけないことも • フレームワークで対応できない部分は適宜CSSを差し込んでい くしかなさそう

JavaScript • PythonやC++/Java/C#などとは感覚が違う言語 • 非同期処理が多く、コールバックを使う書き方が必要になる • ライブラリの読み込みは以下のように参照すれば簡単に使用で きる • しかし、複数ファイルのjsファイルの管理などを考えると、 node.jsをインストールしてnpmでパッケージ管理、 webpackでビルド、といった枠組みにした方が良い

TypeScript • C#風に書けるJavaScript、型がつけられる • JavaScriptのスーパーセット、つまり、 JavaScriptのプログラムはTypeScriptとしても有効 • this問題 インスタンスからメソッドやフィールドを呼び出すときに、 thisが自身のインスタンス参照にならないことがある アロー関数を使うのが簡単な対処か http://mokake.hatenablog.com/entry/2018/07/07/181814

ブラウザへの描画 ブラウザに描画するには、以下の方法がある （PythonとJavaScriptではじめるデータビジュアライゼーション 90Pより） • 特殊なHTML タグを使ったSVG • 2D canvas コンテキストへの描画 • 3D canvas WebGL コンテキストへの描画。OpenGL コマンドの一部 を使う。 • 最新のCSS を使ってアニメーションやグラフィックスプリミティブな どを作成する。 今回は2D canvas コンテキストへの描画を使用

PythonとJavaScriptの連携 • 今回はTornadoを使用した • REST APIを通してJSON形式で連携する • JavaScriptでは、POSTでJSONデータを送信する • PythonではそのJSONデータを受け取り、計算を行って結果を JSONで返す

参考文献 • longcontest visualizer framework https://github.com/kmyk/longcontest-visualizer-framework 今回の元ネタ。TypeScriptでファイルを読み込んで描画する • よくわかるHTML5+CSS3の教科書【第3版】 https://www.amazon.co.jp/dp/B07KQPY7PL • 改訂新版JavaScript本格入門 https://www.amazon.co.jp/dp/B01LYO6C1N • PythonとJavaScriptではじめるデータビジュアライゼーション https://www.amazon.co.jp/dp/4873118085 • 機械学習スタートアップシリーズ Pythonで学ぶ強化学習 https://www.amazon.co.jp/dp/4065142989 tornado + Vue.jsでGUIを作っている