Contaienr/Presentationalパターン再入門
by
KazukiHayase
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Container/Presentationalύλʔϯ ࠶ೖ 2022.05.31 ࣾLT
Slide 2
Slide 2 text
ࣗݾհ ● ૣً ● ϓϩδΣΫτϦʔμʔɾϑϧελοΫΤϯδχΞ ● झຯ ○ ։ൃɺϚϯΨɺυϥΠϒɺ͓ञ ○ ͖ͳϚϯΨ ■ ͋ͻΔͷۭɺӉܑఋɺϒϧʔϐϦΦυɺΞΦΞγ 2
Slide 3
Slide 3 text
ΞδΣϯμ 1. ຊͷΰʔϧ 2. Container/Presentationalύλʔϯͱ 3. ࣮ํ๏ a. ྨύλʔϯ b. ׂύλʔϯ c. ྨύλʔϯͱׂύλʔϯͷ͍͚ 4. ·ͱΊ 3
Slide 4
Slide 4 text
ຊͷΰʔϧ Container/PresentationalύλʔϯΛ ਖ਼͘͠ཧղ͢Δ 4
Slide 5
Slide 5 text
● Container/PresentationalύλʔϯΛͬͯΔ͕ɺ 2௨Γͷ࣮ํ๏͕͋Δ͜ͱΛΒͳ͍ਓ ● Container/PresentationalύλʔϯΛΒͳ͍ਓ 5 λʔήοτ
Slide 6
Slide 6 text
● ࣮ͷৄࡉ ● React HooksʹΑΔContainer/Presentationalύλʔϯͷஔ͖͑ 6 ͞ͳ͍͜ͱ
Slide 7
Slide 7 text
Container/Presentationalύλʔϯͱ 7
Slide 8
Slide 8 text
ϩδοΫͱUIΛ͚࣮ͯ͢Δ͜ͱͰ ؔ৺ͷΛਤΔσβΠϯύλʔϯ 8 Container/Presentationalύλʔϯͱ
Slide 9
Slide 9 text
ϩδοΫΛͱ͢ΔContainer Componentͱ UIΛͱ͢ΔPresentational Componentʹ͚࣮ͯ͢Δ 9 Container/Presentationalύλʔϯͱ
Slide 10
Slide 10 text
10 Container/Presentationalίϯϙʔωϯτͷൺֱ Container Component Presentational Component ϩδοΫ UI ঢ়ଶʢεςʔτʣ ࣋ͭ ݪଇ࣋ͨͳ͍ σʔλͷड͚औΓݩ ঢ়ଶཧϥΠϒϥϦɺAPI PropsͷΈ
Slide 11
Slide 11 text
11 Πϝʔδਤ Container Component Presentational Component ঢ়ଶཧ ϥΠϒϥϦ API ঢ়ଶ ϩδοΫ UI Props
Slide 12
Slide 12 text
● Componentͷ͕໌֬ʹͳΔ ● ςετ͕͘͢͠ͳΔ ● Presentational Componentͷ࠶ར༻͕༰қʹͳΔ 12 Container/PresentationalύλʔϯͷϝϦοτ
Slide 13
Slide 13 text
Presentational ComponentPropsͷΈʹґଘ͍ͯ͠ΔͷͰ࠶ར༻ੑ͕ߴ͍ 13 Presentational Componentͷ࠶ར༻͕༰қʹͳΔ Container Component A Presentational Component Container Component B Props ঢ়ଶཧ ϥΠϒϥϦ API
Slide 14
Slide 14 text
࣮ํ๏ 14
Slide 15
Slide 15 text
2௨Γͷ࣮ํ๏͕ଘࡏ 15 ࣮ํ๏ తʹԠͯ͡దͳ࣮ํ๏ͷબ͕ඞཁ
Slide 16
Slide 16 text
ྨύλʔϯ 1ͭͷίϯϙʔωϯτΛContainer/PresentationalͷͲͪΒ͔ʹྨ͢Δ ׂύλʔϯ 1ͭͷίϯϙʔωϯτΛContainer/Presentationalʹׂ͢Δ 16 2௨Γͷ࣮ํ๏
Slide 17
Slide 17 text
● 1ͭͷίϯϙʔωϯτΛContainer͔PresentationalͷͲͪΒ͔ʹྨ͢Δ ● ҰൠతʹContaner/Presentationalύλʔϯͱݴ͑ͪ͜Β ● UIʹؔ͢Δঢ়ଶͰ͋ΕPresentational ComponentͰอ࣋͢Δ߹͋Δ 17 ྨύλʔϯ FooComponent Container Component Presentational Component BarComponent
Slide 18
Slide 18 text
ϝϦοτ ● લड़ͨ͠Container/PresentationalύλʔϯͷϝϦοτ ○ Componentͷ͕໌֬ʹͳΔ ○ ςετ͕͘͢͠ͳΔ ○ Presentational Componentͷ࠶ར༻͕༰қʹͳΔ σϝϦοτ ● ͲͷཻͰContainerΛಋೖ͢Δ͔͕͍͠ 18 ྨύλʔϯͷϝϦοτɾσϝϦοτ
Slide 19
Slide 19 text
● 1ͭͷίϯϙʔωϯτΛContainerͱPresentationalʹׂ͢Δ ● 21ηοτͰ1ͭͷίϯϙʔωϯτͱͯ͠ৼΔ͏ ● Presentational Componentঢ়ଶΛҰ࣋ͨͳ͍ 19 ׂύλʔϯ HogeComponent Container Component Presentational Component
Slide 20
Slide 20 text
ϝϦοτ ● ը૾ճؼςετͱ૬ੑ͕͍͍ ○ Presentational Component͔Βঢ়ଶΛશʹநग़ ○ PropsͰશύλʔϯͷදࣔͷΓସ͕͑Մೳ σϝϦοτ ● ࠶ར༻͕͍͠ ● ϑΝΠϧ͕ഒ૿͢Δ 20 ׂύλʔϯͷϝϦοτɾσϝϦοτ
Slide 21
Slide 21 text
● ঢ়ଶΛશʹநग़͍ͨ͠߹ͷΈ༻͢Δ ● ͦΕҎ֎ͷ߹ʹ࠾༻͢ΔͱσϝϦοτͷํ͕େ͖͍ 21 ׂύλʔϯͷҙ
Slide 22
Slide 22 text
● جຊతʹྨύλʔϯΛ࠾༻͢Δ ○ લड़ͨ͠ϝϦοτʹՃ͑ɺίϯϙʔωϯτಉ͕࢜ૄ݁߹ʹͳΔͷͰอकੑ্͕͕Δ ○ ࠷ॳҰ൪ͷίϯϙʔωϯτͷΈΛContainerͱͯ͠ɺ׳Ε͖ͯͨΒ్தͷ֊ʹ ಋೖ͢Δͱ͍͏ྲྀΕ͕ྑ͍ ● ঢ়ଶΛશʹநग़͍ͨ͠߹ʹݶΓׂύλʔϯΛ࠾༻͢Δ ○ ը૾ճؼςετͷΧόϨοδΛ্͍͛ͨ߹ͳͲ 22 ྨύλʔϯͱׂύλʔϯͷ͍͚
Slide 23
Slide 23 text
● Container/PresentationalύλʔϯʹΑͬͯUIͱϩδοΫΛͰ͖Δ ● Container/Presentationalύλʔϯͷ࣮ํ๏ʹ2௨Γ͋Δ ○ ྨύλʔϯ ○ ׂύλʔϯ ● తʹԠͯ͡దͳ࣮ํ๏Λબ͢Δ ○ جຊతʹྨύλʔϯ ○ ঢ়ଶΛશʹநग़͍ͨ͠߹ʹݶΓׂύλʔϯ 23 ·ͱΊ