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