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

Transcript

1. React HooksͰ
 ඒ͍͠ίʔυΛॻ͘ ࠜ؛ప໵
2. ࣗݾ঺հ • ࠜ؛ప໵ • ϥϯαʔζגࣜձࣾ 2018.04 ~ • େֶ • ֶ෦ɿ਺ཧ޻ֶ • େֶӃɿϓϩμΫτ։ൃ • ϑΝΠφϯγϟϧϓϥϯφʔ3ڃ
3. ࠜ؛ప໵ React HooksͰ
 ඒ͍͠ίʔυΛॻ͘
5. ಡΈ΍͢͞ͷجຊఆཧ ίʔυ͸ଞͷਓ͕࠷୹࣌ؒͰཧղͰ ͖ΔΑ͏ʹॻ͔ͳ͚Ε͹ͳΒͳ͍ ಡΈ΍͢͞ͷجຊఆཧ ίʔυ͸ଞͷਓ͕࠷୹࣌ؒͰཧղͰ ͖ΔΑ͏ʹॻ͔ͳ͚Ε͹ͳΒͳ͍
7. ಛʹॏཁͳͷ͕ʮγϯϓϧͰ͋Δʯͱ͍͏͜ͱͰ͢ɻ ΞϓϦέʔγϣϯ΍γεςϜ͕શମͱͯ͠ͲΕ΄Ͳෳ ࡶͰ͋ͬͯ΋ɺݸʑͷ෦෼ΛऔΓग़ͯ͠ΈΔͱɺશͯ γϯϓϧʹͳ͍ͬͯ·͢ɻ
8. • ࠷୹࣌ؒͰཧղͰ͖Δ΋ͷ • Ͳͷ෦෼ΛऔΓग़ͯ͠΋γϯϓϧͰ͋Δ
9. React 
 ~v16.17
10. Reactίϯϙʔωϯτ UIͷύʔπΛίϯϙʔωϯτ͝ ͱʹ෼཭ͯ͠؅ཧ
11. Reactίϯϙʔωϯτ UIͷύʔπΛίϯϙʔωϯτ͝ ͱʹ෼཭ͯ͠؅ཧ
12. Reactίϯϙʔωϯτ UIͷύʔπΛίϯϙʔωϯτ͝ ͱʹ෼཭ͯ͠؅ཧ Functional Component
15. ը໘͕ભҠ͢Δલʹ
 Ϙλϯͷԡ͞Εͨճ਺Λ
 console.logͰग़ྗ͍ͨ͠
17. Χ΢ϯλͷ஋ॳظԽ
18. ΫϦοΫ࣌ʹ
 Χ΢ϯλͷ஋Λ૿΍͢
19. Χ΢ϯτͷճ਺Λ logʹग़ྗ
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ݶఆ
32. ಛʹॏཁͳͷ͕ʮγϯϓϧͰ͋Δʯͱ͍͏͜ͱͰ͢ɻ ΞϓϦέʔγϣϯ΍γεςϜ͕શମͱͯ͠ͲΕ΄Ͳෳ ࡶͰ͋ͬͯ΋ɺݸʑͷ෦෼ΛऔΓग़ͯ͠ΈΔͱɺશͯ γϯϓϧʹͳ͍ͬͯ·͢ɻ
34. શ෦γϯϓϧ
35. ྑ͍ίʔυߟ͑Δͷ໘౗Ͱ͸ʁ
37. 1.5 Ͱ΋΍ΔΜͩΑ
 ͜ͷ໨ඪ(ྑ͍ίʔυΛॻ͘)Λड͚ೖΕ ͨΒ܅͸ɺ͖ͬͱ༏लͳϓϩάϥϚʹͳ ΕΔ͸ͣͩ
38. Thank youʂ