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
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.9k
What's new in Spring Modulith?
olivergierke
1
160
品質ワークショップをやってみた
nealle
0
580
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
270
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
120
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
CSC305 Lecture 09
javiergs
PRO
0
280
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
620
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
260
Devoxx BE 2025 Loom lab
josepaumard
0
110
Software Architecture
hschwentner
6
2.3k
Featured
See All Featured
The Invisible Side of Design
smashingmag
302
51k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Navigating Team Friction
lara
190
15k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
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ʂ