コンポーネント再利用ってどこまでするの？ / How to reuse components

・コンポーネントの再利用の問題点
・Web Componets再利用の問題点
・React Reduxの再利用の考え方
・Elmのコンポーネント論争

Transcript

1. ίϯϙʔωϯτ࠶ར༻ͬͯͲ͜·Ͱ͢Δͷ? JSΦδαϯ #7 2017.12.14 tipo159
2. LT಺༰ • ίϯϙʔωϯτͷ࠶ར༻ͷ໰୊఺ • Web Componets • React Redux • Elmͷίϯϙʔωϯτ࿦૪ • ·ͱΊ 2
3. ࠶ར༻Մೳͳίϯϙʔωϯτͷ໰୊఺ • ґଘϥΠϒϥϦ͕૿͑Δ • ίϯϙʔωϯτؒͰґଘϥΠϒϥϦͷόʔδϣϯ͕ҟͳΔ͜ͱ΋ • ඞཁҎ্ʹ൚༻Խ͞Ε͍ͯΔͨΊɼҾ਺͕ଟ͘ͳΓɼίʔ υαΠζ΋૿Ճ • npm react-datepickerͷҾ਺͸73छྨ(಺ؔ਺͸7छྨ) • σβΠϯͷ౷Ұ͕ࠔ೉ • Material Design౳ͷಛఆͷΨΠυϥΠϯʹ४ڌͨ͠ίϯϙʔω ϯτ͚ͩʹݶఆ͢Ε͹ճආՄೳ 3
4. Web Components • σʔλόΠϯσΟϯά͕ඪ४Խ͞Ε͍ͯͳ͍ͨΊɼPolymer ʹґଘ͢Δίϯϙʔωϯτ͕ଟ͍ • web components.orgʹొ࿥͞Ε͍ͯΔίϯϙʔωϯτ΋΄ ͱΜͲPolymerʹґଘʢͬ͟ͱݟͨൣғͰ͸શͯʣ • Polymerͷόʔδϣϯ͸͞·͟· 4
5. React Redux • Presentational ComponentsͱContainer Componentsͷ෼཭ • Container Componentsͷ࠶ར༻͸ࠔ೉ Presentational and Container Components https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 5 1SFTFOUBUJPOBM
   $PNQPOFOUT $POUBJOFS
   $PNQPOFOUT ໨త ݟͨ໨ʢϚʔΫΞοϓɼ
   ελΠϧʣ ಈ࡞ʢσʔλऔಘɼ
   4UBUFߋ৽ʣ 3FEVYͷߟྀ ෆཁ ඞཁ σʔλϦʔυ QSPQT͔ΒϦʔυ 3FEVY
   4UBUFΛ
   αϒεΫϥΠϒ σʔλߋ৽ QSPQTͷίʔϧόοΫΛىಈ 3FEVY
   "DUJPOΛ
   σΟεύον
6. Elmͷίϯϙʔωϯτ࿦૪ • ͔ͭͯ͸ElmͰ΋ίϯϙʔωϯτʢElmͰ͸ϞδϡʔϧʣԽ͕ਪ ঑͞Ε͍͕ͯͨɼݱࡏ͸Ͱ͖ΔݶΓviewͷؔ਺Ͱࡁ·͢͜ͱ͕ ਪ঑͞Ε͍ͯΔ • ίϯϙʔωϯτͷதͷmodel, actionʹΞϓϦέʔγϣϯʹґଘ ͢Δهड़ؚ͕·Εͯ͠·͏ͷͰɼ࠶ར༻͢Δͷ͸viewͷؔ਺ͩ ͚ͱ͍͏ׂΓ੾Γ Elm ͷίϯϙʔωϯτ࿦૪ͱ͸Կ͔ http://jinjor-labo.hatenablog.com/entry/ 2017/05/12/183154 6
7. ·ͱΊ • Viewͷ෦෼͚ͩͷ࠶ར༻ • ReduxͷPresentational Components • ࣾ಺΍ϓϩδΣΫτ಺Ͱ࠶ར༻ • ϓϩτλΠϓʹ͸ࣾ֎ͷίϯϙʔωϯτΛ࢖༻ͯ͠΋໰୊ ͳ͍͕ɼҡ࣋؅ཧΛߟ͑ΔͱϓϩμΫγϣϯίʔυʹ࢖͏ͷ ͸೉͍͠ • CSSϑϨʔϜϫʔΫͱJavaScriptϑϨʔϜϫʔΫͷ૊Έ߹Θ ͤʹ͍ͭͯ͸෼͔Βͳ͍ͷͰڭ͍͑ͯͩ͘͞ 7