$30 off During Our Annual Pro Sale. View Details »

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

    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