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

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

tipo159
December 14, 2017

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

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

tipo159

December 14, 2017
Tweet

More Decks by tipo159

Other Decks in Programming

Transcript

  1. ίϯϙʔωϯτ࠶ར༻ͬͯͲ͜·Ͱ͢Δͷ?
    JSΦδαϯ #7
    2017.12.14
    tipo159

    View full-size slide

  2. LT಺༰
    • ίϯϙʔωϯτͷ࠶ར༻ͷ໰୊఺
    • Web Componets
    • React Redux
    • Elmͷίϯϙʔωϯτ࿦૪
    • ·ͱΊ
    2

    View full-size slide

  3. ࠶ར༻Մೳͳίϯϙʔωϯτͷ໰୊఺
    • ґଘϥΠϒϥϦ͕૿͑Δ
    • ίϯϙʔωϯτؒͰґଘϥΠϒϥϦͷόʔδϣϯ͕ҟͳΔ͜ͱ΋
    • ඞཁҎ্ʹ൚༻Խ͞Ε͍ͯΔͨΊɼҾ਺͕ଟ͘ͳΓɼίʔ
    υαΠζ΋૿Ճ
    • npm react-datepickerͷҾ਺͸73छྨ(಺ؔ਺͸7छྨ)
    • σβΠϯͷ౷Ұ͕ࠔ೉
    • Material Design౳ͷಛఆͷΨΠυϥΠϯʹ४ڌͨ͠ίϯϙʔω
    ϯτ͚ͩʹݶఆ͢Ε͹ճආՄೳ
    3

    View full-size slide

  4. Web Components
    • σʔλόΠϯσΟϯά͕ඪ४Խ͞Ε͍ͯͳ͍ͨΊɼPolymer
    ʹґଘ͢Δίϯϙʔωϯτ͕ଟ͍
    • web components.orgʹొ࿥͞Ε͍ͯΔίϯϙʔωϯτ΋΄
    ͱΜͲPolymerʹґଘʢͬ͟ͱݟͨൣғͰ͸શͯʣ
    • Polymerͷόʔδϣϯ͸͞·͟·
    4

    View full-size slide

  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Λ
    σΟεύον

    View full-size slide

  6. Elmͷίϯϙʔωϯτ࿦૪
    • ͔ͭͯ͸ElmͰ΋ίϯϙʔωϯτʢElmͰ͸ϞδϡʔϧʣԽ͕ਪ
    ঑͞Ε͍͕ͯͨɼݱࡏ͸Ͱ͖ΔݶΓviewͷؔ਺Ͱࡁ·͢͜ͱ͕
    ਪ঑͞Ε͍ͯΔ
    • ίϯϙʔωϯτͷதͷmodel, actionʹΞϓϦέʔγϣϯʹґଘ
    ͢Δهड़ؚ͕·Εͯ͠·͏ͷͰɼ࠶ར༻͢Δͷ͸viewͷؔ਺ͩ
    ͚ͱ͍͏ׂΓ੾Γ
    Elm ͷίϯϙʔωϯτ࿦૪ͱ͸Կ͔
    http://jinjor-labo.hatenablog.com/entry/
    2017/05/12/183154
    6

    View full-size slide

  7. ·ͱΊ
    • Viewͷ෦෼͚ͩͷ࠶ར༻
    • ReduxͷPresentational Components
    • ࣾ಺΍ϓϩδΣΫτ಺Ͱ࠶ར༻
    • ϓϩτλΠϓʹ͸ࣾ֎ͷίϯϙʔωϯτΛ࢖༻ͯ͠΋໰୊
    ͳ͍͕ɼҡ࣋؅ཧΛߟ͑ΔͱϓϩμΫγϣϯίʔυʹ࢖͏ͷ
    ͸೉͍͠
    • CSSϑϨʔϜϫʔΫͱJavaScriptϑϨʔϜϫʔΫͷ૊Έ߹Θ
    ͤʹ͍ͭͯ͸෼͔Βͳ͍ͷͰڭ͍͑ͯͩ͘͞
    7

    View full-size slide