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
650
frontend-nanimo-wakaranai-20191224
threecourse
December 24, 2019
Tweet
Share
More Decks by threecourse
See All by threecourse
Cloud_RunとOptunaでヒューリスティックコンテスト
threecourse
0
510
Kaggle_Days_Tokyo_-_Feature_Engineering_and_GBDT_Implementation.pdf
threecourse
5
7.3k
OpeningTalk-KaggleTokyoMeetup6.pdf
threecourse
0
8.2k
Kaggle Tokyo Meetup #4 Opening Talk
threecourse
0
6.7k
データを可視化する一般的なテク(?)~heatmapの拡張~ kaggle meetup #3
threecourse
2
1k
Opening Talk - Kaggle Tokyo Meetup #3
threecourse
0
230
kaggle tokyo meetup #2 opening talk
threecourse
0
400
過去のコンペをただ語る
threecourse
3
900
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Typedesign – Prime Four
hannesfritz
39
2.4k
4 Signs Your Business is Dying
shpigford
180
21k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Building Your Own Lightsaber
phodgson
102
6.1k
Code Review Best Practice
trishagee
64
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
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を作っている