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
React + flumptでイカ戦績グラフ化ツールを作ってみた
Search
nabeliwo
July 22, 2016
Programming
0
180
React + flumptでイカ戦績グラフ化ツールを作ってみた
2016/5/19のGizumo Tech Conf #1での発表資料です。
nabeliwo
July 22, 2016
Tweet
Share
More Decks by nabeliwo
See All by nabeliwo
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた / TSKaigi TypeScript Multilingualization
nabeliwo
2
800
Dive into SmartHR UI
nabeliwo
3
1.2k
Web Componentsを使ったウィジェット埋め込みの話
nabeliwo
0
370
Snowpack で始めるバンドルレス開発 / about Snowpack
nabeliwo
0
180
おいでよ フロントエンドの森 / welcome-to-front-end
nabeliwo
0
98
React事始め
nabeliwo
0
550
お前もJavaScriptにしてやろうか〜アメーバピグ編〜
nabeliwo
0
480
Other Decks in Programming
See All in Programming
XP, Testing and ninja testing
m_seki
3
220
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
110
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
130
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
630
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
Create a website using Spatial Web
akkeylab
0
310
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
520
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.7k
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
400
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
GitHub's CSS Performance
jonrohan
1031
460k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
React + flumptでイカ䨌 籐グラフ⻉ツールを⡲ってみた @nabeliwo Gizmo Tech Conf #1 on
Mar 19 2016
ジコショウカイ @nabeliwo Gizmo inc. フロントエンドエンジニア JSと穠㭴した Reactだいすきマン 剑鵚はゲーム㹋屣やってる オフパコし(ry
None
モチベーション ナベとサクモトによる「タッグマッチでA+99湡䭷す」 ちたい→てない→ⴓ匿だ→つくろう!! グラフ⻉することで鋅えてくるものがあるのでは? イカエンジニアとしてイカにまつわるものを⡦か⡲って婍した かった 傀㶷のツールだけでカバーしきれなかったので⡲った
エンジニアはイカ㥨き㢳い IkaLog stat.ink スーパーイカメーカー ウデマエアーカイブ etc…
イカグラフとは イカ䨌籐グラフ⻉ツール 䨌籐を䩛Ⰵ⸂したらあとは䩛にキルレとか桦とか どのブキがどれくらい⢪われてるかとか䖤䠐♶䖤䠐な ルールステージとかとかグラフ⻉してくれる リリースはにさわなかったので➙傈はローカルでごめ んなさい…(2016/03/19儗挿)
DEMO
䪮遭スタック
サーバーサイド Node.js hapi(APIサーバー) MySQL ➙傈はサーバー⩎の鑧はしません
クライアントサイド ES2015 (BABEL) React flumpt (Flux impl by @mizch) ウェイスタック
あと♧䘔CSSはPostCSSつかってる
ⵖ⡲劍 圓䟝と圓鸡、圓䧭罋えるのに1鹈くらい コード剅くのに4傈 㻅たら娤ぬと䙼ったので僴傈㻅ないで⡲っ
やってること データ《ってきてクライアントでごにょごにょしてChart.js 鸐してはきだす SQLが蕱䩛なのでデータは黝䔲にとってきてクライアント でⰋ鿇よしなにする
䪮遭鼅㹀のおはなし ウェイスタックやりたくて葿ղ䱱した Reduxはちょっとなんかもうつかれた Relay(GraphQL + React)で馄ウェイしようと䙼ったけど ⹛くsampleが㶷㖈せず䮲䫓 謬い㹋鄲!謬い㹋鄲! React +
flumptとの⳿⠓い
flumptのおはなし pubsub堣腉だけ䠐陎して兛鸐にFluxすればいいか んじ 㷕统コストがものすごくひくい。Reduxが䝤눤に鋅え る FluxⰅしたい➂はやるといいかも
たいへん だったこと
葺かったら♧筰にやりましょう NintendoID:nabeliwo
None