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

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ʂ