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
930
React初学者が知らない コンポーネント分割テクニック
tetsuyanegishi
1
500
AWS Amplifyで作るサーバーレスバックエンド
tetsuyanegishi
3
1.9k
リアルタイムデータベース Cloud Firestore入門
tetsuyanegishi
10
8.7k
ブロックチェーンのマイニングとはなにか
tetsuyanegishi
1
96
スクラム開発の手法と実例
tetsuyanegishi
0
240
Other Decks in Programming
See All in Programming
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
320
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
690
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
320
AIでLINEスタンプを作ってみた
eycjur
1
220
tool ディレクティブを導入してみた感想
sgash708
1
160
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
300
速いWebフレームワークを作る
yusukebe
5
1.6k
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
610
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
1.6k
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
810
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
240
AIエージェント開発、DevOps and LLMOps
ymd65536
1
380
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
Become a Pro
speakerdeck
PRO
29
5.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
Building Applications with DynamoDB
mza
96
6.6k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
The Language of Interfaces
destraynor
160
25k
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ʂ