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
260
What flow brings to React
takanorip
August 25, 2017
Tweet
Share
More Decks by takanorip
See All by takanorip
社内管理画面のデザインもプロダクトデザイン
takanorip
4
740
早わかり W3C Community Group
takanorip
0
270
Ubieとアクセシビリティのこれからを考える
takanorip
0
240
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
2.9k
デザインシステム運用とOKRの良い関係
takanorip
0
1.7k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
170
メンタルヘルスチューニング
takanorip
0
260
Other Decks in Technology
See All in Technology
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
620
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
310
MapLibreとAmazon Location Service
dayjournal
1
160
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
690
VS CodeでAWSを操作しよう
smt7174
8
1.7k
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
250
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.4k
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
220
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
290
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
15k
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Visualization
eitanlees
136
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Become a Pro
speakerdeck
PRO
11
4.5k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
The Mythical Team-Month
searls
216
42k
We Have a Design System, Now What?
morganepeng
43
6.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
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は後から入れても大丈夫 • 小さく入れてみると良いかも • 型チェックをすることで保守しやすいコード を書くことができる!