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
What flow brings to React
Search
takanorip
August 25, 2017
Technology
0
280
What flow brings to React
takanorip
August 25, 2017
Tweet
Share
More Decks by takanorip
See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
130
Bulletproof Design System with TypeScript
takanorip
6
3.5k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
140
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
890
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
7.2k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
2k
早わかり W3C Community Group
takanorip
0
490
Ubieとアクセシビリティのこれからを考える
takanorip
0
460
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.9k
Other Decks in Technology
See All in Technology
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
100
Lambda Web Adapterについて自分なりに理解してみた
smt7174
5
130
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.3k
5min GuardDuty Extended Threat Detection EKS
takakuni
0
160
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
0
140
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
610
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
140
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
170
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
150
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
360
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
240
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
970
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Cult of Friendly URLs
andyhume
79
6.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Music & Morning Musume
bryan
46
6.6k
For a Future-Friendly Web
brad_frost
179
9.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Building an army of robots
kneath
306
45k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Transcript
What flow brings to React Takanori Oki
目次 • 自己紹介 • flow? • Reactにもたらすもの • まとめ
自己紹介
大木尊紀 ( takanorip ) • フロントエンドエンジニア • 株式会社スマートドライブ • 最近のハイライト:
Facabookのライセンス問題 エウレカセブン・ハイエボリューション
flow ?
flow • Facebook製のJavaScript静的型チェッカー • 言語ではなく外部ライブラリ • nullやundefinedにとても厳しい
flowは JSに静的型の概念をもたらす
詳しい導入方法を知りたい方は 下の記事へGO! Reactにflowtypeを導入したまとめ
flowがくれたもの
flowのいいところ • 小さく試せる →レガシーな環境下でも使える • AltJSではないのでESの機能すべて使える • Reactと相性がいい
flowを導入してよかったこと • reduxまわりの見通しがよくなった • propsをバケツリレーしてたりするところも、 そこに何が入っているかわかりやすくなった • 実行時エラーが減った
None
親Component 子Component 孫Component propsのバケツリレー ↓ これは一体何者? props props
つらみ
つらかったこと • エラーが出てきたときに参考にできる情報が 少ない • 知見がない状態だと、何が正解なのかわから ない • 冗長な書き方になってしまう場合がある
つらかったこと • チーム内でのモチベーションの共有が難しい • なくても動くので、「なんでやるのか?」を 共有していないと、ただ工数が増えるだけに 感じてしまう。
まとめ
まとめ • flowは後から入れても大丈夫 • 小さく入れてみると良いかも • 型チェックをすることで保守しやすいコード を書くことができる!