コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス

2015-05-27にLINE社で行われた、Data Binding JS Nightでの発表内容です。

Transcript

1. ίϯϙʔωϯτࢦ޲
   ʹΑΔɺReactͷ
   ϕετϓϥΫςΟεͱ
   όουϓϥΫςΟε
   @axross
   Data Binding JS Night
   

   View Slide

2. Hi :)
   • Kohei Asai
   • @axross
   • Software Engineer
   • React.js, express.js
   

   View Slide

3. ίϯϙʔωϯτࢦ޲
   

   View Slide

4. ίϯϙʔωϯτࢦ޲Λਪ঑
   

   View Slide

5. Reactͷʹ͓͚ΔComponent
   const SomeComponent = React.createClass({
   render() {
   return (
   
   {this.state.valueA}
   {this.props.valueB}
   
   );
   },
   });
   ಺෦ঢ়ଶ
   ֎͔Βͷ஋
   Component = DOMͱJSͷηοτɺUI෦඼
   

   View Slide

6. ஋ -> DOM ม׵ث
   • stateΛ࢖ΘͣɺpropsΛ࢖͏Α͏ʹ͢Ε͹ɺ
   Component͸ʮ஋ -> DOM ม׵ثʯʹͳΔ
   Component
   props DOM
   ( or Virtual DOM)
   

   View Slide

7. JS͕DOMΛࢧ഑͢Δੈք
   • XHRͱHistory APIͰSPA͕Մೳʹͳͬͨ
   • ͢΂ͯͷঢ়ଶΛJavaScript͕؅ཧͰ͖Δ
   • JavaScript͕DOMΛࢧ഑͢Δੈք
   

   View Slide

8. Data-bindedͳʮDOMʯͱ͸
   • σʔλόΠϯυ͞Εͨ͢΂ͯͷDOM͸ɺ
   JavaScriptͷ஋ʹΑͬͯు͖ग़͞ΕΔ
   • ͳΒ͹ɺDOM͸ίϯύΠϧ݁Ռ෺
   • σʔλόΠϯσΟϯάͷخ͠͞͸͜͜ʹ͋Δ
   

   View Slide

9. Reactͷࢥ૝͔Βٯࢉ͢Δ
   ϕετϓϥΫςΟεͱ
   όουϓϥΫςΟε
   

   View Slide

10. ίϯϙʔωϯτࢦ޲ 3ͭͷ๏ଇ
    • ஋ΛDOMʹม׵͢Δ૷ஔͰ͋Δ͜ͱΛప͢Δ
    • ࠶ར༻͞ΕΔ͜ͱΛલఏʹ͢Δ
    • ίϯϙʔωϯτͱͦ͏Ͱͳ͍΋ͷΛ໌֬ʹ෼
    ͚Δ
    

    View Slide

11. ஋ΛDOMʹม׵͢Δ૷ஔ
    Ͱ͋Δ͜ͱΛప͢Δ
    

    View Slide

12. ႈ౳ੑΛकΔ
    • ௨ৗ͸ʮ஋ -> DOM ม׵ثʯͰ͋Δ͸ͣ
    • ड͚ೖΕͨ஋͕ಉ͡Ͱ͋Ε͹ɺు͖ग़͞ΕΔ
    DOM͸ৗʹಉ͡͸ͣ
    • ͭ·Γɺႈ౳ੑ͕͋Δ͸ͣ
    

    View Slide

13. ༨ܭͳ࢓ࣄ͸ͤ͞ͳ͍
    • ͦΕҎ্ͷ࢓ࣄΛͤ͞Δͱɺ٘ਜ਼ΛੜΉ
    • ඞཁҎ্ͳstateͷอ࣋ɾར༻
    • ίϯϙʔωϯτͷதͰXHR
    • = ႈ౳ੑΛࣦ͏
    • = ૄ݁߹Ͱ͸ͳ͘ͳΔ
    

    View Slide

14. ඞཁҎ্ʹঢ়ଶΛ࣋ͨͤͳ͍
    • ඞཁҎ্ʹঢ়ଶΛ࣋ͨͤΔͱ
    • ಉ͡஋Λ֎͔Β༩͑ͨͱͯ͠΋ɺు͖ग़͞
    ΕΔDOM͕ҧ͏΋ͷʹͳΔՄೳੑ͕͋Δ
    • = ςετ͕ࠔ೉ʹͳΔ
    

    View Slide

15. ෭࡞༻ͷ͋ΔߦҝΛؚΊͳ͍
    • ෭࡞༻ͷ͋Δߦҝ͸ίϯϙʔωϯτͷ֎Ͱ͢΂͖
    • XHRɺWeb Storage΁ͷΞΫηεͳͲ
    • FluxͷStoreΛsubscribe͢ΔͳͲ
    • = ݁Ռతʹঢ়ଶΛ࣋ͬͯ͠·͏
    • = ґଘ͕૿͑ɺςετ͕ࠔ೉ʹͳΔ
    

    View Slide

16. ίϯϙʔωϯτ͕࠶ར༻
    ͞ΕΔ͜ͱΛલఏʹ͢Δ
    

    View Slide

17. componentDidMountʹ஫ҙ
    • componentDidMountͰɺwriteͳ࡞༻ͷ͋Δ
    Flux ActionΛݺΜͰ͍Δ
    • ίϯϙʔωϯτΛmount͚ͨͩ͠Ͱɺ
    ଞͷίϯϙʔωϯτʹ࡞༻ͯ͠͠·͏
    • = ίϯϙʔωϯτͷ෭࡞༻
    

    View Slide

18. ʮͲ͏࢖͏͔ʯ͸ʮ࢖͏࣌ʯʹ
    • ίϯϙʔωϯτࣗମͷҐஔ΍αΠζΛࢦఆ͢
    ΔCSS΋ΑΖ͘͠ͳ͍
    • ͦΕ͸ʮίϯϙʔωϯτΛͲ͏࢖͏͔ʯͱ
    ͍͏࿩Ͱ͋ͬͯɺʮίϯϙʔωϯτͷఆٛʯ
    ͱ͸ίϯςΩετ͕ҟͳͬͯ͠·͏
    • = ผͷ৔ॴʹͦͷ··ஔ͚ͳ͍
    

    View Slide

19. ίϯϙʔωϯτͱ
    ͦ͏Ͱͳ͍΋ͷΛ
    ໌֬ʹ෼͚Δ
    

    View Slide

20. ʮͦ͏Ͱͳ͍΋ͷʯ΋ඞཁ
    • ႈ౳ੑͷ͋ΔίϯϙʔωϯτͷΈͰΫϥΠΞ
    ϯταΠυͷΞϓϦέʔγϣϯ͸࡞Εͳ͍
    • ୭͔͕ঢ়ଶΛ࣋ͬͨΓɺXHR͢Δඞཁ͕͋Δ
    • ແཧͷͳ͍Α͏ʹઃܭ͢Δʹ͸ɺ
    ʮͦ͏Ͱͳ͍΋ͷʯ΋ඞཁ
    

    View Slide

21. ςετՄೳൣғΛ޿͛ΔͨΊʹ
    • Componentͷ਌ͱͳΔ૚͸ఘΊΔ
    • ঢ়ଶΛ࣋ͪɺFlux StoreΛsubscribe͢Δ
    • ίϯϙʔωϯτʹpropsΛ౉͢
    • Ϣχοτςετ͕ෆՄೳͳ།Ұͷଘࡏ
    • = ୅ΘΓʹଞͷ͢΂ͯͷςετ͕༰қʹͳΔ
    

    View Slide

22. CSSઃܭ΁ͷΞϯαʔ
    

    View Slide

23. ୯ҐΛ߹ΘͤΔ
    • 1 ίϯϙʔωϯτ = 1 BEM Blockͱ͔ʹ͢Δ
    • ϑΝΠϧ໊ɺηϨΫλ໊΋߹ΘͤΔ
    • ໊લͷڝ߹͕๷͕ΕΔ
    • ଞͷηϨΫλ΁ͷґଘ΍Өڹ͕ͳ͘ͳΔ
    • = ΧδϡΞϧʹ࡟আͰ͖Δɾ࠶ར༻Ͱ͖Δ
    

    View Slide

24. ·ͱΊ
    

    View Slide

25. Reactͱίϯϙʔωϯτ
    • React͸ίϯϙʔωϯτࢦ޲
    • ίϯϙʔωϯτ͸ɺ஋ -> DOM ม׵ث ͱͯ͠
    ػೳ͢Δ
    

    View Slide

26. ίϯϙʔωϯτࢦ޲ 3ͭͷ๏ଇ
    • ஋ -> DOM ม׵ث Ͱ͋Δ͜ͱΛప͢Δ
    • ࠶ར༻͞ΕΔ͜ͱΛલఏʹ͢Δ
    • ίϯϙʔωϯτͱͦ͏Ͱͳ͍΋ͷΛ໌֬ʹ෼
    ͚Δ
    

    View Slide

27. ϝϦοτ
    • ςελϒϧ
    • ႈ౳ੑͱૄ݁߹Ͱ͋Δ͜ͱ͕୲อ͞ΕΔ
    • ΧδϡΞϧͳมߋɾ࡟আͱ࠶ར༻͕Մೳ
    • ߴ଎ͳPDCAαΠΫϧʹऑ͘ͳ͍
    • CSSઃܭ΋ॿ͚Δ
    

    View Slide

28. ΈΜͳ΋React࢖͓͏ʂ
    

    View Slide

29. Thank you
    for listening :)
    

    View Slide