Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

5f533aeab28ed4f70c26e336e71296f7?s=47 tipo159
December 14, 2017

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

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

5f533aeab28ed4f70c26e336e71296f7?s=128

tipo159

December 14, 2017
Tweet

More Decks by tipo159

Other Decks in Programming

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͔ΒϦʔυ 3FEVY4UBUFΛ αϒεΫϥΠϒ σʔλߋ৽ 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