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
860
Dive into SmartHR UI
nabeliwo
3
1.2k
Web Componentsを使ったウィジェット埋め込みの話
nabeliwo
0
400
Snowpack で始めるバンドルレス開発 / about Snowpack
nabeliwo
0
190
おいでよ フロントエンドの森 / welcome-to-front-end
nabeliwo
0
100
React事始め
nabeliwo
0
550
お前もJavaScriptにしてやろうか〜アメーバピグ編〜
nabeliwo
0
490
Other Decks in Programming
See All in Programming
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
3
12k
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.1k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
560
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
780
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
CSC509 Lecture 08
javiergs
PRO
0
230
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
770
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
6
3k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
940
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
330
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
240
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
55
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Making Projects Easy
brettharned
120
6.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
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