Contaienr/Presentationalパターン再入門

by KazukiHayase

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 Component͸PropsͷΈʹґଘ͍ͯ͠ΔͷͰ࠶ར༻ੑ͕ߴ͍ 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ʹ෼ׂ͢Δ ● 2૊1ηοτͰ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 ·ͱΊ