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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
takanorip
August 25, 2017
Technology
0
290
What flow brings to React
takanorip
August 25, 2017
Tweet
Share
More Decks by takanorip
See All by takanorip
Design System Documentation Tooling 2025
takanorip
3
2.3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
900
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
650
Bulletproof Design System with TypeScript
takanorip
7
4.7k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
250
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.7k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.2k
早わかり W3C Community Group
takanorip
0
550
Other Decks in Technology
See All in Technology
データの整合性を保ちたいだけなんだ
shoheimitani
8
3.2k
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
oracle4engineer
PRO
2
170
登壇駆動学習のすすめ — CfPのネタの見つけ方と書くときに意識していること
bicstone
3
120
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
rvirus0817
1
1.4k
広告の効果検証を題材にした因果推論の精度検証について
zozotech
PRO
0
190
Bill One 開発エンジニア 紹介資料
sansan33
PRO
5
17k
GitHub Issue Templates + Coding Agentで簡単みんなでIaC/Easy IaC for Everyone with GitHub Issue Templates + Coding Agent
aeonpeople
1
240
Introduction to Bill One Development Engineer
sansan33
PRO
0
360
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
10k
SREじゃなかった僕らがenablingを通じて「SRE実践者」になるまでのリアル / SRE Kaigi 2026
aeonpeople
6
2.5k
20260208_第66回 コンピュータビジョン勉強会
keiichiito1978
0
170
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
ama_ch
0
180
Featured
See All Featured
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
730
Designing for Timeless Needs
cassininazir
0
130
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.2k
Art, The Web, and Tiny UX
lynnandtonic
304
21k
So, you think you're a good person
axbom
PRO
2
1.9k
A designer walks into a library…
pauljervisheath
210
24k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
0
3.4k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
93
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Technical Leadership for Architectural Decision Making
baasie
2
250
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は後から入れても大丈夫 • 小さく入れてみると良いかも • 型チェックをすることで保守しやすいコード を書くことができる!