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

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

3d944ac176998af7e7b116993d06cdd1?s=128

Tetsuya Negishi

July 12, 2019
Tweet

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ʂ