React + flumptでイカ戦績グラフ化ツールを作ってみた

Slide 1

Slide 1 text

React + flumptでイカ䨌籐グラフ⻉ツールを⡲ってみた @nabeliwo Gizmo Tech Conf #1 on Mar 19 2016

Slide 2

Slide 2 text

ジコショウカイ @nabeliwo Gizmo inc. フロントエンドエンジニア JSと穠㭴した Reactだいすきマン剑鵚はゲーム㹋屣やってるオフパコし(ry

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

モチベーションナベとサクモトによる「タッグマッチでA+99湡䭷す」 ⹧ちたい→⹧てない→ⴓ匿だ→つくろう！！グラフ⻉することで鋅えてくるものがあるのでは？イカエンジニアとしてイカにまつわるものを⡦か⡲って婍したかった傀㶷のツールだけでカバーしきれなかったので⡲った

Slide 5

Slide 5 text

エンジニアはイカ㥨き㢳い IkaLog stat.ink スーパーイカメーカーウデマエアーカイブ etc…

Slide 6

Slide 6 text

イカグラフとはイカ䨌籐グラフ⻉ツール䨌籐を䩛Ⰵ⸂したらあとは⹧䩛にキルレとか⹧桦とかどのブキがどれくらい⢪われてるかとか䖤䠐♶䖤䠐なルールステージとかとかグラフ⻉してくれるリリースは꟦にさわなかったので➙傈はローカルでごめんなさい…(2016/03/19儗挿)

Slide 7

Slide 7 text

DEMO

Slide 8

Slide 8 text

䪮遭スタック

Slide 9

Slide 9 text

サーバーサイド Node.js hapi(APIサーバー) MySQL ➙傈はサーバー⩎の鑧はしません

Slide 10

Slide 10 text

クライアントサイド ES2015 (BABEL) React flumpt (Flux impl by @mizch) ウェイスタックあと♧䘔CSSはPostCSSつかってる

Slide 11

Slide 11 text

ⵖ⡲劍꟦ 圓䟝と圓鸡、圓䧭罋えるのに1鹈꟦くらいコード剅くのに4傈㻅たら娤ぬと䙼ったので僴傈㻅ないで⡲っ׋

Slide 12

Slide 12 text

やってることデータ《ってきてクライアントでごにょごにょしてChart.js 鸐してはきだす SQLが蕱䩛なのでデータは黝䔲にとってきてクライアントでⰋ鿇よしなにする

Slide 13

Slide 13 text

䪮遭鼅㹀のおはなしウェイスタックやりたくて葿ղ䱱した Reduxはちょっとなんかもうつかれた Relay(GraphQL + React)で馄ウェイしようと䙼ったけど ⹛くsampleが㶷㖈せず䮲䫓謬い㹋鄲！謬い㹋鄲！ React + flumptとの⳿⠓い

Slide 14

Slide 14 text

flumptのおはなし pubsub堣腉だけ䠐陎して兛鸐にFluxすればいいかんじ㷕统コストがものすごくひくい。Reduxが䝤눤に鋅える FluxⰅꟌしたい➂はやるといいかも