Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
frontend-nanimo-wakaranai-20191224
Search
threecourse
December 24, 2019
0
690
frontend-nanimo-wakaranai-20191224
threecourse
December 24, 2019
Tweet
Share
More Decks by threecourse
See All by threecourse
Cloud_RunとOptunaでヒューリスティックコンテスト
threecourse
0
560
Kaggle_Days_Tokyo_-_Feature_Engineering_and_GBDT_Implementation.pdf
threecourse
5
7.6k
OpeningTalk-KaggleTokyoMeetup6.pdf
threecourse
0
8.3k
Kaggle Tokyo Meetup #4 Opening Talk
threecourse
0
6.8k
データを可視化する一般的なテク(?)~heatmapの拡張~ kaggle meetup #3
threecourse
2
1.1k
Opening Talk - Kaggle Tokyo Meetup #3
threecourse
0
240
kaggle tokyo meetup #2 opening talk
threecourse
0
440
過去のコンペをただ語る
threecourse
3
950
Featured
See All Featured
Become a Pro
speakerdeck
PRO
28
5.4k
Building Applications with DynamoDB
mza
95
6.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How to Ace a Technical Interview
jacobian
277
23k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Adopting Sorbet at Scale
ufuk
77
9.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
710
A Tale of Four Properties
chriscoyier
160
23k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Automating Front-end Workflow
addyosmani
1370
200k
Transcript
フロントエンド何もわからない / 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#などとは感覚が違う言語 • 非同期処理が多く、コールバックを使う書き方が必要になる • ライブラリの読み込みは以下のように参照すれば簡単に使用で きる <script src="http://d3js.org/d3.v3.min.js"
charset="utf-8"></script> • しかし、複数ファイルの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を作っている