Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Hooksで美しいコードを書く / Writing beautiful code ...

Avatar for Tetsuya Negishi Tetsuya Negishi
July 12, 2019
Programming
0
180

React Hooksで美しいコードを書く / Writing beautiful code using React Hooks

Avatar for Tetsuya Negishi

Tetsuya Negishi

July 12, 2019
Tweet

More Decks by Tetsuya Negishi

See All by Tetsuya Negishi
SOLIDから考える良いコンポーネントの設計原則
Avatar for Tetsuya Negishi tetsuyanegishi
1
1.4k
TypeScriptの型定義が JavaScriptのバグを駆逐する
Avatar for Tetsuya Negishi tetsuyanegishi
3
920
React初学者が知らない
 コンポーネント分割テクニック
Avatar for Tetsuya Negishi tetsuyanegishi
1
490
AWS Amplifyで作るサーバーレスバックエンド
Avatar for Tetsuya Negishi tetsuyanegishi
3
1.9k
リアルタイムデータベース
Cloud Firestore入門
Avatar for Tetsuya Negishi tetsuyanegishi
10
8.6k
ブロックチェーンのマイニングとはなにか
Avatar for Tetsuya Negishi tetsuyanegishi
1
89
スクラム開発の手法と実例
Avatar for Tetsuya Negishi tetsuyanegishi
0
230

Other Decks in Programming

See All in Programming
AIコーディングの理想と現実
Avatar for Tomohisa Takaoka tomohisa
35
37k
Road to RubyKaigi: Making Tinny Chiptunes with Ruby
Avatar for makicamel makicamel
4
540
設計の本質：コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
Avatar for nrs nrslib
10
3.7k
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
Avatar for r-kagaya rkaga
4
1.2k
インプロセスQAにおいて大事にしていること / In-process QA Meetup
Avatar for MEDLEY, INC. medley
0
140
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
Avatar for Masayuki Izumi izumin5210
6
1.5k
Jakarta EE Meets AI
Avatar for ivargrimstad ivargrimstad
0
830
The New Developer Workflow: How AI Transforms Ideas into Code
Avatar for Daniel Sogl danielsogl
0
110
七輪ライブラリー: Claude AI で作る Next.js アプリ
Avatar for suneo3476 suneo3476
1
190
Golangci-lint v2爆誕: 君たちはどうすべきか
Avatar for logica / Takuto Nagami logica0419
1
230
20250429 - CNTUG Meetup #67 / DevOps Taiwan Meetup #69 - Deep Dive into Tetragon: Building Runtime Security and Observability with eBPF
Avatar for ChengHao Yang tico88612
0
170
flutter_kaigi_mini_4.pdf
Avatar for Hiroki Nobuta nobu74658
0
150

Featured

See All Featured
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
22
3.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
32
5.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
179
53k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
160
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.6k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.8k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
233
140k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
35
2.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.2k

Transcript

  1. React HooksͰ
 ඒ͍͠ίʔυΛॻ͘ ࠜ؛ప໵

  2. ࣗݾ঺հ • ࠜ؛ప໵ • ϥϯαʔζגࣜձࣾ 2018.04 ~ • େֶ •

    ֶ෦ɿ਺ཧ޻ֶ • େֶӃɿϓϩμΫτ։ൃ • ϑΝΠφϯγϟϧϓϥϯφʔ3ڃ

  3. ࠜ؛ప໵ React HooksͰ
 ඒ͍͠ίʔυΛॻ͘

  4. None

  5. ಡΈ΍͢͞ͷجຊఆཧ ίʔυ͸ଞͷਓ͕࠷୹࣌ؒͰཧղͰ ͖ΔΑ͏ʹॻ͔ͳ͚Ε͹ͳΒͳ͍ ಡΈ΍͢͞ͷجຊఆཧ ίʔυ͸ଞͷਓ͕࠷୹࣌ؒͰཧղͰ ͖ΔΑ͏ʹॻ͔ͳ͚Ε͹ͳΒͳ͍

  6. None

  7. ಛʹॏཁͳͷ͕ʮγϯϓϧͰ͋Δʯͱ͍͏͜ͱͰ͢ɻ ΞϓϦέʔγϣϯ΍γεςϜ͕શମͱͯ͠ͲΕ΄Ͳෳ ࡶͰ͋ͬͯ΋ɺݸʑͷ෦෼ΛऔΓग़ͯ͠ΈΔͱɺશͯ γϯϓϧʹͳ͍ͬͯ·͢ɻ

  8. • ࠷୹࣌ؒͰཧղͰ͖Δ΋ͷ • Ͳͷ෦෼ΛऔΓग़ͯ͠΋γϯϓϧͰ͋Δ

  9. React 
 ~v16.17

  10. Reactίϯϙʔωϯτ UIͷύʔπΛίϯϙʔωϯτ͝ ͱʹ෼཭ͯ͠؅ཧ

  11. Reactίϯϙʔωϯτ UIͷύʔπΛίϯϙʔωϯτ͝ ͱʹ෼཭ͯ͠؅ཧ

  12. Reactίϯϙʔωϯτ UIͷύʔπΛίϯϙʔωϯτ͝ ͱʹ෼཭ͯ͠؅ཧ Functional Component

  13. None
  14. None

  15. ը໘͕ભҠ͢Δલʹ
 Ϙλϯͷԡ͞Εͨճ਺Λ
 console.logͰग़ྗ͍ͨ͠

  16. None

  17. Χ΢ϯλͷ஋ॳظԽ

  18. ΫϦοΫ࣌ʹ
 Χ΢ϯλͷ஋Λ૿΍͢

  19. Χ΢ϯτͷճ਺Λ logʹग़ྗ

  20. None

  21. ಉ͡Α͏ͳؔ਺͕ ͨ͘͞Μ͋Δɻ App͔ΒݟΔͱ

  22. redʹؔ͢Δॲཧ͕
 ࢄΒ͹͍ͬͯΔ App͔ΒݟΔͱ

  23. ֤Χ΢ϯλͷ஋͕
 άϩʔόϧ App͔ΒݟΔͱ

  24. Appίϯϙʔωϯτ͸
 γϯϓϧ͔ʁ

  25. ͳͥγϯϓϧʹͳΒͳ͍ͷ͔ ɾstateॳظԽҐஔ ɾstateͷείʔϓ ɾؔ਺ఆٛ ɾϥΠϑαΠΫϧϝιου

  26. React V16.8

  27. • React Hooksͷొ৔ • Ͳ͜Ͱ΋stateΛอ࣋͢Δ͜ͱ͕Մೳ useState • Ͳ͜Ͱ΋ؔ਺ఆ͕ٛՄೳ useCallback •

    Ͳ͜Ͱ΋ϥΠϑαΠΫϧϝιου useEffect • ͨͩ͠Functional Componentݶఆ
  28. None
  29. None
  30. None
  31. None

  32. ಛʹॏཁͳͷ͕ʮγϯϓϧͰ͋Δʯͱ͍͏͜ͱͰ͢ɻ ΞϓϦέʔγϣϯ΍γεςϜ͕શମͱͯ͠ͲΕ΄Ͳෳ ࡶͰ͋ͬͯ΋ɺݸʑͷ෦෼ΛऔΓग़ͯ͠ΈΔͱɺશͯ γϯϓϧʹͳ͍ͬͯ·͢ɻ

  33. None

  34. શ෦γϯϓϧ

  35. ྑ͍ίʔυߟ͑Δͷ໘౗Ͱ͸ʁ

  36. None

  37. 1.5 Ͱ΋΍ΔΜͩΑ
 ͜ͷ໨ඪ(ྑ͍ίʔυΛॻ͘)Λड͚ೖΕ ͨΒ܅͸ɺ͖ͬͱ༏लͳϓϩάϥϚʹͳ ΕΔ͸ͣͩ

  38. Thank youʂ