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 GitHub CopilotとAI駆動開発:実践と導入のリアル
fl_kawachi
1
150
フィンテック養成勉強会#54
finengine
0
180
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
230
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
280
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
200
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
800
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
1
480
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
110
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
140
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
240
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
210
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Visualization
eitanlees
146
16k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Facilitating Awesome Meetings
lara
54
6.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
A Tale of Four Properties
chriscoyier
160
23k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
710
Testing 201, or: Great Expectations
jmmastey
42
7.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
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は後から入れても大丈夫 • 小さく入れてみると良いかも • 型チェックをすることで保守しやすいコード を書くことができる!