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
180
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.4k
TypeScriptの型定義が JavaScriptのバグを駆逐する
tetsuyanegishi
3
910
React初学者が知らない コンポーネント分割テクニック
tetsuyanegishi
1
470
AWS Amplifyで作るサーバーレスバックエンド
tetsuyanegishi
3
1.8k
リアルタイムデータベース Cloud Firestore入門
tetsuyanegishi
10
8.6k
ブロックチェーンのマイニングとはなにか
tetsuyanegishi
1
84
スクラム開発の手法と実例
tetsuyanegishi
0
230
Other Decks in Programming
See All in Programming
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
時計仕掛けのCompose
mkeeda
1
280
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
チームリードになって変わったこと
isaka1022
0
190
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Navigating Team Friction
lara
183
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
KATA
mclloyd
29
14k
RailsConf 2023
tenderlove
29
1k
Thoughts on Productivity
jonyablonski
69
4.5k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
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ʂ