Contaienr/Presentationalパターン再入門

Transcript

1. Container/Presentationalύλʔϯ ࠶ೖ໳ 2022.05.31 ࣾ಺LT
2. ࣗݾ঺հ • ૣ੉࿨ً • ϓϩδΣΫτϦʔμʔɾϑϧελοΫΤϯδχΞ • झຯ ◦ ։ൃɺϚϯΨɺυϥΠϒɺ͓ञ ◦ ޷͖ͳϚϯΨ ▪ ͋ͻΔͷۭɺӉ஦ܑఋɺϒϧʔϐϦΦυɺΞΦΞγ 2
3. ΞδΣϯμ 1. ຊ೔ͷΰʔϧ 2. Container/Presentationalύλʔϯͱ͸ 3. ࣮૷ํ๏ a. ෼ྨύλʔϯ b. ෼ׂύλʔϯ c. ෼ྨύλʔϯͱ෼ׂύλʔϯͷ࢖͍෼͚ 4. ·ͱΊ 3
4. ຊ೔ͷΰʔϧ Container/PresentationalύλʔϯΛ
 ਖ਼͘͠ཧղ͢Δ 4
5. • Container/PresentationalύλʔϯΛ஌ͬͯΔ͕ɺ
 2௨Γͷ࣮૷ํ๏͕͋Δ͜ͱΛ஌Βͳ͍ਓ • Container/PresentationalύλʔϯΛ஌Βͳ͍ਓ 5 λʔήοτ
6. • ࣮૷ͷৄࡉ • React HooksʹΑΔContainer/Presentationalύλʔϯͷஔ͖׵͑ 6 ࿩͞ͳ͍͜ͱ
7. Container/Presentationalύλʔϯͱ͸ 7
8. ϩδοΫͱUIΛ෼͚࣮ͯ૷͢Δ͜ͱͰ ؔ৺ͷ෼཭ΛਤΔσβΠϯύλʔϯ 8 Container/Presentationalύλʔϯͱ͸
9. ϩδοΫΛ੹຿ͱ͢ΔContainer Componentͱ UIΛ੹຿ͱ͢ΔPresentational Componentʹ෼͚࣮ͯ૷͢Δ 9 Container/Presentationalύλʔϯͱ͸
10. 10 Container/Presentationalίϯϙʔωϯτͷൺֱ Container Component Presentational Component ੹຿ ϩδοΫ UI ঢ়ଶʢεςʔτʣ ࣋ͭ ݪଇ࣋ͨͳ͍ σʔλͷड͚औΓݩ ঢ়ଶ؅ཧϥΠϒϥϦɺAPI౳ PropsͷΈ
11. 11 Πϝʔδਤ Container Component Presentational Component ঢ়ଶ؅ཧ ϥΠϒϥϦ API ঢ়ଶ ϩδοΫ UI Props
12. • Componentͷ੹຿͕໌֬ʹͳΔ • ςετ͕͠΍͘͢ͳΔ • Presentational Componentͷ࠶ར༻͕༰қʹͳΔ 12 Container/PresentationalύλʔϯͷϝϦοτ
13. Presentational Component͸PropsͷΈʹґଘ͍ͯ͠ΔͷͰ࠶ར༻ੑ͕ߴ͍ 13 Presentational Componentͷ࠶ར༻͕༰қʹͳΔ Container Component A Presentational Component Container Component B Props ঢ়ଶ؅ཧ ϥΠϒϥϦ API
14. ࣮૷ํ๏ 14
15. 2௨Γͷ࣮૷ํ๏͕ଘࡏ 15 ࣮૷ํ๏ ໨తʹԠͯ͡ద੾ͳ࣮૷ํ๏ͷબ୒͕ඞཁ
16. ෼ྨύλʔϯ 1ͭͷίϯϙʔωϯτΛContainer/PresentationalͷͲͪΒ͔ʹ෼ྨ͢Δ ෼ׂύλʔϯ 1ͭͷίϯϙʔωϯτΛContainer/Presentationalʹ෼ׂ͢Δ 16 2௨Γͷ࣮૷ํ๏
17. • 1ͭͷίϯϙʔωϯτΛContainer͔PresentationalͷͲͪΒ͔ʹ෼ྨ͢Δ • ҰൠతʹContaner/Presentationalύλʔϯͱݴ͑͹ͪ͜Β • UIʹؔ͢Δঢ়ଶͰ͋Ε͹Presentational ComponentͰอ࣋͢Δ৔߹΋͋Δ 17 ෼ྨύλʔϯ FooComponent Container Component Presentational Component BarComponent
18. ϝϦοτ • લड़ͨ͠Container/PresentationalύλʔϯͷϝϦοτ ◦ Componentͷ੹຿͕໌֬ʹͳΔ ◦ ςετ͕͠΍͘͢ͳΔ ◦ Presentational Componentͷ࠶ར༻͕༰қʹͳΔ σϝϦοτ • Ͳͷཻ౓ͰContainerΛಋೖ͢Δ͔͕೉͍͠ 18 ෼ྨύλʔϯͷϝϦοτɾσϝϦοτ
19. • 1ͭͷίϯϙʔωϯτΛContainerͱPresentationalʹ෼ׂ͢Δ • 2૊1ηοτͰ1ͭͷίϯϙʔωϯτͱͯ͠ৼΔ෣͏ • Presentational Component͸ঢ়ଶΛҰ੾࣋ͨͳ͍ 19 ෼ׂύλʔϯ HogeComponent Container Component Presentational Component
20. ϝϦοτ • ը૾ճؼςετͱ૬ੑ͕͍͍ ◦ Presentational Component͔Βঢ়ଶΛ׬શʹநग़ ◦ PropsͰશύλʔϯͷදࣔͷ੾Γସ͕͑Մೳ σϝϦοτ • ࠶ར༻͕೉͍͠ • ϑΝΠϧ਺͕ഒ૿͢Δ 20 ෼ׂύλʔϯͷϝϦοτɾσϝϦοτ
21. • ঢ়ଶΛ׬શʹநग़͍ͨ͠৔߹ͷΈ࢖༻͢Δ • ͦΕҎ֎ͷ৔߹ʹ࠾༻͢ΔͱσϝϦοτͷํ͕େ͖͍ 21 ෼ׂύλʔϯͷ஫ҙ఺
22. • جຊతʹ͸෼ྨύλʔϯΛ࠾༻͢Δ ◦ લड़ͨ͠ϝϦοτʹՃ͑ɺίϯϙʔωϯτಉ͕࢜ૄ݁߹ʹͳΔͷͰอकੑ্͕͕Δ ◦ ࠷ॳ͸Ұ൪਌ͷίϯϙʔωϯτͷΈΛContainerͱͯ͠ɺ׳Ε͖ͯͨΒ్தͷ֊૚ʹ΋
 ಋೖ͢Δͱ͍͏ྲྀΕ͕ྑ͍ • ঢ়ଶΛ׬શʹநग़͍ͨ͠৔߹ʹݶΓ෼ׂύλʔϯΛ࠾༻͢Δ ◦ ը૾ճؼςετͷΧόϨοδΛ্͍͛ͨ৔߹ͳͲ 22 ෼ྨύλʔϯͱ෼ׂύλʔϯͷ࢖͍෼͚
23. • Container/PresentationalύλʔϯʹΑͬͯUIͱϩδοΫΛ෼཭Ͱ͖Δ • Container/Presentationalύλʔϯͷ࣮૷ํ๏ʹ͸2௨Γ͋Δ ◦ ෼ྨύλʔϯ ◦ ෼ׂύλʔϯ • ໨తʹԠͯ͡ద੾ͳ࣮૷ํ๏Λબ୒͢Δ ◦ جຊతʹ͸෼ྨύλʔϯ ◦ ঢ়ଶΛ׬શʹநग़͍ͨ͠৔߹ʹݶΓ෼ׂύλʔϯ 23 ·ͱΊ