Upgrade to Pro — share decks privately, control downloads, hide ads and more …

frontend-nanimo-wakaranai-20191224

threecourse
December 24, 2019
580

 frontend-nanimo-wakaranai-20191224

threecourse

December 24, 2019
Tweet

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. JavaScript
    • PythonやC++/Java/C#などとは感覚が違う言語
    • 非同期処理が多く、コールバックを使う書き方が必要になる
    • ライブラリの読み込みは以下のように参照すれば簡単に使用で
    きる

    • しかし、複数ファイルのjsファイルの管理などを考えると、
    node.jsをインストールしてnpmでパッケージ管理、
    webpackでビルド、といった枠組みにした方が良い

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. 参考文献
    • 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を作っている

    View full-size slide