Contaienr/Presentationalパターン再入門

Transcript

1. Container/Presentationalύλʔϯ
   ࠶ೖ໳
   2022.05.31 ࣾ಺LT
   

   View Slide

2. ࣗݾ঺հ
   ● ૣ੉࿨ً
   ● ϓϩδΣΫτϦʔμʔɾϑϧελοΫΤϯδχΞ
   ● झຯ
   ○ ։ൃɺϚϯΨɺυϥΠϒɺ͓ञ
   ○ ޷͖ͳϚϯΨ
   ■ ͋ͻΔͷۭɺӉ஦ܑఋɺϒϧʔϐϦΦυɺΞΦΞγ
   2
   

   View Slide

3. ΞδΣϯμ
   1. ຊ೔ͷΰʔϧ
   2. Container/Presentationalύλʔϯͱ͸
   3. ࣮૷ํ๏
   a. ෼ྨύλʔϯ
   b. ෼ׂύλʔϯ
   c. ෼ྨύλʔϯͱ෼ׂύλʔϯͷ࢖͍෼͚
   4. ·ͱΊ
   3
   

   View Slide

4. ຊ೔ͷΰʔϧ
   Container/PresentationalύλʔϯΛ

   ਖ਼͘͠ཧղ͢Δ
   4
   

   View Slide

5. ● Container/PresentationalύλʔϯΛ஌ͬͯΔ͕ɺ

   2௨Γͷ࣮૷ํ๏͕͋Δ͜ͱΛ஌Βͳ͍ਓ
   ● Container/PresentationalύλʔϯΛ஌Βͳ͍ਓ
   5
   λʔήοτ
   

   View Slide

6. ● ࣮૷ͷৄࡉ
   ● React HooksʹΑΔContainer/Presentationalύλʔϯͷஔ͖׵͑
   6
   ࿩͞ͳ͍͜ͱ
   

   View Slide

7. Container/Presentationalύλʔϯͱ͸
   7
   

   View Slide

8. ϩδοΫͱUIΛ෼͚࣮ͯ૷͢Δ͜ͱͰ
   ؔ৺ͷ෼཭ΛਤΔσβΠϯύλʔϯ
   8
   Container/Presentationalύλʔϯͱ͸
   

   View Slide

9. ϩδοΫΛ੹຿ͱ͢ΔContainer Componentͱ
   UIΛ੹຿ͱ͢ΔPresentational Componentʹ෼͚࣮ͯ૷͢Δ
   9
   Container/Presentationalύλʔϯͱ͸
   

   View Slide

10. 10
    Container/Presentationalίϯϙʔωϯτͷൺֱ
    Container Component Presentational Component
    ੹຿ ϩδοΫ UI
    ঢ়ଶʢεςʔτʣ ࣋ͭ ݪଇ࣋ͨͳ͍
    σʔλͷड͚औΓݩ ঢ়ଶ؅ཧϥΠϒϥϦɺAPI౳ PropsͷΈ
    

    View Slide

11. 11
    Πϝʔδਤ
    Container Component
    Presentational
    Component
    ঢ়ଶ؅ཧ
    
    
    ϥΠϒϥϦ
    API
    ঢ়ଶ ϩδοΫ
    UI
    Props
    

    View Slide

12. ● Componentͷ੹຿͕໌֬ʹͳΔ
    ● ςετ͕͠΍͘͢ͳΔ
    ● Presentational Componentͷ࠶ར༻͕༰қʹͳΔ
    12
    Container/PresentationalύλʔϯͷϝϦοτ
    

    View Slide

13. Presentational Component͸PropsͷΈʹґଘ͍ͯ͠ΔͷͰ࠶ར༻ੑ͕ߴ͍
    13
    Presentational Componentͷ࠶ར༻͕༰қʹͳΔ
    Container Component A
    Presentational Component
    Container Component B
    Props
    ঢ়ଶ؅ཧ
    
    
    ϥΠϒϥϦ
    API
    

    View Slide

14. ࣮૷ํ๏
    14
    

    View Slide

15. 2௨Γͷ࣮૷ํ๏͕ଘࡏ
    15
    ࣮૷ํ๏
    ໨తʹԠͯ͡ద੾ͳ࣮૷ํ๏ͷબ୒͕ඞཁ
    

    View Slide

16. ෼ྨύλʔϯ
    1ͭͷίϯϙʔωϯτΛContainer/PresentationalͷͲͪΒ͔ʹ෼ྨ͢Δ
    ෼ׂύλʔϯ
    1ͭͷίϯϙʔωϯτΛContainer/Presentationalʹ෼ׂ͢Δ
    16
    2௨Γͷ࣮૷ํ๏
    

    View Slide

17. ● 1ͭͷίϯϙʔωϯτΛContainer͔PresentationalͷͲͪΒ͔ʹ෼ྨ͢Δ
    ● ҰൠతʹContaner/Presentationalύλʔϯͱݴ͑͹ͪ͜Β
    ● UIʹؔ͢Δঢ়ଶͰ͋Ε͹Presentational ComponentͰอ࣋͢Δ৔߹΋͋Δ
    17
    ෼ྨύλʔϯ
    FooComponent Container Component
    Presentational Component
    BarComponent
    

    View Slide

18. ϝϦοτ
    ● લड़ͨ͠Container/PresentationalύλʔϯͷϝϦοτ
    ○ Componentͷ੹຿͕໌֬ʹͳΔ
    ○ ςετ͕͠΍͘͢ͳΔ
    ○ Presentational Componentͷ࠶ར༻͕༰қʹͳΔ
    σϝϦοτ
    ● Ͳͷཻ౓ͰContainerΛಋೖ͢Δ͔͕೉͍͠
    18
    ෼ྨύλʔϯͷϝϦοτɾσϝϦοτ
    

    View Slide

19. ● 1ͭͷίϯϙʔωϯτΛContainerͱPresentationalʹ෼ׂ͢Δ
    ● 2૊1ηοτͰ1ͭͷίϯϙʔωϯτͱͯ͠ৼΔ෣͏
    ● Presentational Component͸ঢ়ଶΛҰ੾࣋ͨͳ͍
    19
    ෼ׂύλʔϯ
    HogeComponent
    Container Component
    Presentational Component
    

    View Slide

20. ϝϦοτ
    ● ը૾ճؼςετͱ૬ੑ͕͍͍
    ○ Presentational Component͔Βঢ়ଶΛ׬શʹநग़
    ○ PropsͰશύλʔϯͷදࣔͷ੾Γସ͕͑Մೳ
    σϝϦοτ
    ● ࠶ར༻͕೉͍͠
    ● ϑΝΠϧ਺͕ഒ૿͢Δ
    20
    ෼ׂύλʔϯͷϝϦοτɾσϝϦοτ
    

    View Slide

21. ● ঢ়ଶΛ׬શʹநग़͍ͨ͠৔߹ͷΈ࢖༻͢Δ
    ● ͦΕҎ֎ͷ৔߹ʹ࠾༻͢ΔͱσϝϦοτͷํ͕େ͖͍
    21
    ෼ׂύλʔϯͷ஫ҙ఺
    

    View Slide

22. ● جຊతʹ͸෼ྨύλʔϯΛ࠾༻͢Δ
    ○ લड़ͨ͠ϝϦοτʹՃ͑ɺίϯϙʔωϯτಉ͕࢜ૄ݁߹ʹͳΔͷͰอकੑ্͕͕Δ
    ○ ࠷ॳ͸Ұ൪਌ͷίϯϙʔωϯτͷΈΛContainerͱͯ͠ɺ׳Ε͖ͯͨΒ్தͷ֊૚ʹ΋

    ಋೖ͢Δͱ͍͏ྲྀΕ͕ྑ͍
    ● ঢ়ଶΛ׬શʹநग़͍ͨ͠৔߹ʹݶΓ෼ׂύλʔϯΛ࠾༻͢Δ
    ○ ը૾ճؼςετͷΧόϨοδΛ্͍͛ͨ৔߹ͳͲ
    22
    ෼ྨύλʔϯͱ෼ׂύλʔϯͷ࢖͍෼͚
    

    View Slide

23. ● Container/PresentationalύλʔϯʹΑͬͯUIͱϩδοΫΛ෼཭Ͱ͖Δ
    ● Container/Presentationalύλʔϯͷ࣮૷ํ๏ʹ͸2௨Γ͋Δ
    ○ ෼ྨύλʔϯ
    ○ ෼ׂύλʔϯ
    ● ໨తʹԠͯ͡ద੾ͳ࣮૷ํ๏Λબ୒͢Δ
    ○ جຊతʹ͸෼ྨύλʔϯ
    ○ ঢ়ଶΛ׬શʹநग़͍ͨ͠৔߹ʹݶΓ෼ׂύλʔϯ
    23
    ·ͱΊ
    

    View Slide