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
React Hooksで美しいコードを書く / Writing beautiful code ...
Search
Tetsuya Negishi
July 12, 2019
Programming
0
190
React Hooksで美しいコードを書く / Writing beautiful code using React Hooks
Tetsuya Negishi
July 12, 2019
Tweet
Share
More Decks by Tetsuya Negishi
See All by Tetsuya Negishi
SOLIDから考える良いコンポーネントの設計原則
tetsuyanegishi
1
1.5k
TypeScriptの型定義が JavaScriptのバグを駆逐する
tetsuyanegishi
3
940
React初学者が知らない コンポーネント分割テクニック
tetsuyanegishi
1
500
AWS Amplifyで作るサーバーレスバックエンド
tetsuyanegishi
3
1.9k
リアルタイムデータベース Cloud Firestore入門
tetsuyanegishi
10
8.8k
ブロックチェーンのマイニングとはなにか
tetsuyanegishi
1
98
スクラム開発の手法と実例
tetsuyanegishi
0
240
Other Decks in Programming
See All in Programming
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
240
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
330
Le côté obscur des IA génératives
pascallemerrer
0
120
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
490
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.4k
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.2k
Advance Your Career with Open Source
ivargrimstad
0
340
CSC305 Lecture 03
javiergs
PRO
0
230
Model Pollution
hschwentner
1
180
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
224
10k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Build your cross-platform service in a week with App Engine
jlugia
232
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
The Cost Of JavaScript in 2023
addyosmani
53
9k
The Language of Interfaces
destraynor
162
25k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
React HooksͰ ඒ͍͠ίʔυΛॻ͘ ࠜ؛ప
ࣗݾհ • ࠜ؛ప • ϥϯαʔζגࣜձࣾ 2018.04 ~ • େֶ •
ֶ෦ɿཧֶ • େֶӃɿϓϩμΫτ։ൃ • ϑΝΠφϯγϟϧϓϥϯφʔ3ڃ
ࠜ؛ప React HooksͰ ඒ͍͠ίʔυΛॻ͘
None
ಡΈ͢͞ͷجຊఆཧ ίʔυଞͷਓ͕࠷࣌ؒͰཧղͰ ͖ΔΑ͏ʹॻ͔ͳ͚ΕͳΒͳ͍ ಡΈ͢͞ͷجຊఆཧ ίʔυଞͷਓ͕࠷࣌ؒͰཧղͰ ͖ΔΑ͏ʹॻ͔ͳ͚ΕͳΒͳ͍
None
ಛʹॏཁͳͷ͕ʮγϯϓϧͰ͋Δʯͱ͍͏͜ͱͰ͢ɻ ΞϓϦέʔγϣϯγεςϜ͕શମͱͯ͠ͲΕ΄Ͳෳ ࡶͰ͋ͬͯɺݸʑͷ෦ΛऔΓग़ͯ͠ΈΔͱɺશͯ γϯϓϧʹͳ͍ͬͯ·͢ɻ
• ࠷࣌ؒͰཧղͰ͖Δͷ • Ͳͷ෦ΛऔΓग़ͯ͠γϯϓϧͰ͋Δ
React ~v16.17
Reactίϯϙʔωϯτ UIͷύʔπΛίϯϙʔωϯτ͝ ͱʹͯ͠ཧ
Reactίϯϙʔωϯτ UIͷύʔπΛίϯϙʔωϯτ͝ ͱʹͯ͠ཧ
Reactίϯϙʔωϯτ UIͷύʔπΛίϯϙʔωϯτ͝ ͱʹͯ͠ཧ Functional Component
None
None
ը໘͕ભҠ͢Δલʹ Ϙλϯͷԡ͞ΕͨճΛ console.logͰग़ྗ͍ͨ͠
None
ΧϯλͷॳظԽ
ΫϦοΫ࣌ʹ ΧϯλͷΛ૿͢
ΧϯτͷճΛ logʹग़ྗ
None
ಉ͡Α͏ͳ͕ؔ ͨ͘͞Μ͋Δɻ App͔ΒݟΔͱ
redʹؔ͢Δॲཧ͕ ࢄΒ͍ͬͯΔ App͔ΒݟΔͱ
֤Χϯλͷ͕ άϩʔόϧ App͔ΒݟΔͱ
Appίϯϙʔωϯτ γϯϓϧ͔ʁ
ͳͥγϯϓϧʹͳΒͳ͍ͷ͔ ɾstateॳظԽҐஔ ɾstateͷείʔϓ ɾؔఆٛ ɾϥΠϑαΠΫϧϝιου
React V16.8
• React Hooksͷొ • Ͳ͜ͰstateΛอ࣋͢Δ͜ͱ͕Մೳ useState • Ͳ͜Ͱؔఆ͕ٛՄೳ useCallback •
Ͳ͜ͰϥΠϑαΠΫϧϝιου useEffect • ͨͩ͠Functional Componentݶఆ
None
None
None
None
ಛʹॏཁͳͷ͕ʮγϯϓϧͰ͋Δʯͱ͍͏͜ͱͰ͢ɻ ΞϓϦέʔγϣϯγεςϜ͕શମͱͯ͠ͲΕ΄Ͳෳ ࡶͰ͋ͬͯɺݸʑͷ෦ΛऔΓग़ͯ͠ΈΔͱɺશͯ γϯϓϧʹͳ͍ͬͯ·͢ɻ
None
શ෦γϯϓϧ
ྑ͍ίʔυߟ͑Δͷ໘Ͱʁ
None
1.5 ͰΔΜͩΑ ͜ͷඪ(ྑ͍ίʔυΛॻ͘)Λड͚ೖΕ ͨΒ܅ɺ͖ͬͱ༏लͳϓϩάϥϚʹͳ ΕΔͣͩ
Thank youʂ