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
370
Bulletproof Design System with TypeScript
takanorip
6
3.7k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
150
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
910
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
7.3k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
460
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.9k
Other Decks in Technology
See All in Technology
An introduction to Claude Code SDK
choplin
3
3.2k
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
Jitera Company Deck / JP
jitera
0
130
(HackFes)米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
5
650
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
11
3k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
200
P2P通信の標準化 WebRTCを知ろう
faithandbrave
6
2.2k
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
1
160
低レイヤソフトウェア技術者が YouTuberとして食っていこうとした話
sat
PRO
7
5.8k
QAを早期に巻き込む”って どうやるの? モヤモヤから抜け出す実践知
moritamasami
2
170
スプリントレビューを効果的にするために
miholovesq
9
1.5k
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Designing for Performance
lara
610
69k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
How STYLIGHT went responsive
nonsquared
100
5.6k
Thoughts on Productivity
jonyablonski
69
4.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.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は後から入れても大丈夫 • 小さく入れてみると良いかも • 型チェックをすることで保守しやすいコード を書くことができる!