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

Contaienr/Presentationalパターン再入門

 Contaienr/Presentationalパターン再入門

KazukiHayase

August 10, 2022
Tweet

More Decks by KazukiHayase

Other Decks in Technology

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 ·ͱΊ