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

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

Transcript

1. ίϯϙʔωϯτࢦ޲ ʹΑΔɺReactͷ ϕετϓϥΫςΟεͱ όουϓϥΫςΟε @axross Data Binding JS Night
2. Hi :) • Kohei Asai • @axross • Software Engineer • React.js, express.js
3. ίϯϙʔωϯτࢦ޲
4. ίϯϙʔωϯτࢦ޲Λਪ঑
5. Reactͷʹ͓͚ΔComponent const SomeComponent = React.createClass({ render() { return ( <div> <span>{this.state.valueA}</span> <span>{this.props.valueB}</span> </div> ); }, }); ಺෦ঢ়ଶ ֎͔Βͷ஋ Component = DOMͱJSͷηοτɺUI෦඼
6. ஋ -> DOM ม׵ث • stateΛ࢖ΘͣɺpropsΛ࢖͏Α͏ʹ͢Ε͹ɺ Component͸ʮ஋ -> DOM ม׵ثʯʹͳΔ Component props DOM ( or Virtual DOM)
7. JS͕DOMΛࢧ഑͢Δੈք • XHRͱHistory APIͰSPA͕Մೳʹͳͬͨ • ͢΂ͯͷঢ়ଶΛJavaScript͕؅ཧͰ͖Δ • JavaScript͕DOMΛࢧ഑͢Δੈք
8. Data-bindedͳʮDOMʯͱ͸ • σʔλόΠϯυ͞Εͨ͢΂ͯͷDOM͸ɺ JavaScriptͷ஋ʹΑͬͯు͖ग़͞ΕΔ • ͳΒ͹ɺDOM͸ίϯύΠϧ݁Ռ෺ • σʔλόΠϯσΟϯάͷخ͠͞͸͜͜ʹ͋Δ
9. Reactͷࢥ૝͔Βٯࢉ͢Δ ϕετϓϥΫςΟεͱ όουϓϥΫςΟε
10. ίϯϙʔωϯτࢦ޲ 3ͭͷ๏ଇ • ஋ΛDOMʹม׵͢Δ૷ஔͰ͋Δ͜ͱΛప͢Δ • ࠶ར༻͞ΕΔ͜ͱΛલఏʹ͢Δ • ίϯϙʔωϯτͱͦ͏Ͱͳ͍΋ͷΛ໌֬ʹ෼ ͚Δ
11. ஋ΛDOMʹม׵͢Δ૷ஔ Ͱ͋Δ͜ͱΛప͢Δ
12. ႈ౳ੑΛकΔ • ௨ৗ͸ʮ஋ -> DOM ม׵ثʯͰ͋Δ͸ͣ • ड͚ೖΕͨ஋͕ಉ͡Ͱ͋Ε͹ɺు͖ग़͞ΕΔ DOM͸ৗʹಉ͡͸ͣ • ͭ·Γɺႈ౳ੑ͕͋Δ͸ͣ
13. ༨ܭͳ࢓ࣄ͸ͤ͞ͳ͍ • ͦΕҎ্ͷ࢓ࣄΛͤ͞Δͱɺ٘ਜ਼ΛੜΉ • ඞཁҎ্ͳstateͷอ࣋ɾར༻ • ίϯϙʔωϯτͷதͰXHR • = ႈ౳ੑΛࣦ͏ • = ૄ݁߹Ͱ͸ͳ͘ͳΔ
14. ඞཁҎ্ʹঢ়ଶΛ࣋ͨͤͳ͍ • ඞཁҎ্ʹঢ়ଶΛ࣋ͨͤΔͱ • ಉ͡஋Λ֎͔Β༩͑ͨͱͯ͠΋ɺు͖ग़͞ ΕΔDOM͕ҧ͏΋ͷʹͳΔՄೳੑ͕͋Δ • = ςετ͕ࠔ೉ʹͳΔ
15. ෭࡞༻ͷ͋ΔߦҝΛؚΊͳ͍ • ෭࡞༻ͷ͋Δߦҝ͸ίϯϙʔωϯτͷ֎Ͱ͢΂͖ • XHRɺWeb Storage΁ͷΞΫηεͳͲ • FluxͷStoreΛsubscribe͢ΔͳͲ • = ݁Ռతʹঢ়ଶΛ࣋ͬͯ͠·͏ • = ґଘ͕૿͑ɺςετ͕ࠔ೉ʹͳΔ
16. ίϯϙʔωϯτ͕࠶ར༻ ͞ΕΔ͜ͱΛલఏʹ͢Δ
17. componentDidMountʹ஫ҙ • componentDidMountͰɺwriteͳ࡞༻ͷ͋Δ Flux ActionΛݺΜͰ͍Δ • ίϯϙʔωϯτΛmount͚ͨͩ͠Ͱɺ ଞͷίϯϙʔωϯτʹ࡞༻ͯ͠͠·͏ • = ίϯϙʔωϯτͷ෭࡞༻
18. ʮͲ͏࢖͏͔ʯ͸ʮ࢖͏࣌ʯʹ • ίϯϙʔωϯτࣗମͷҐஔ΍αΠζΛࢦఆ͢ ΔCSS΋ΑΖ͘͠ͳ͍ • ͦΕ͸ʮίϯϙʔωϯτΛͲ͏࢖͏͔ʯͱ ͍͏࿩Ͱ͋ͬͯɺʮίϯϙʔωϯτͷఆٛʯ ͱ͸ίϯςΩετ͕ҟͳͬͯ͠·͏ • = ผͷ৔ॴʹͦͷ··ஔ͚ͳ͍
19. ίϯϙʔωϯτͱ ͦ͏Ͱͳ͍΋ͷΛ ໌֬ʹ෼͚Δ
20. ʮͦ͏Ͱͳ͍΋ͷʯ΋ඞཁ • ႈ౳ੑͷ͋ΔίϯϙʔωϯτͷΈͰΫϥΠΞ ϯταΠυͷΞϓϦέʔγϣϯ͸࡞Εͳ͍ • ୭͔͕ঢ়ଶΛ࣋ͬͨΓɺXHR͢Δඞཁ͕͋Δ • ແཧͷͳ͍Α͏ʹઃܭ͢Δʹ͸ɺ ʮͦ͏Ͱͳ͍΋ͷʯ΋ඞཁ
21. ςετՄೳൣғΛ޿͛ΔͨΊʹ • Componentͷ਌ͱͳΔ૚͸ఘΊΔ • ঢ়ଶΛ࣋ͪɺFlux StoreΛsubscribe͢Δ • ίϯϙʔωϯτʹpropsΛ౉͢ • Ϣχοτςετ͕ෆՄೳͳ།Ұͷଘࡏ • = ୅ΘΓʹଞͷ͢΂ͯͷςετ͕༰қʹͳΔ
22. CSSઃܭ΁ͷΞϯαʔ
23. ୯ҐΛ߹ΘͤΔ • 1 ίϯϙʔωϯτ = 1 BEM Blockͱ͔ʹ͢Δ • ϑΝΠϧ໊ɺηϨΫλ໊΋߹ΘͤΔ • ໊લͷڝ߹͕๷͕ΕΔ • ଞͷηϨΫλ΁ͷґଘ΍Өڹ͕ͳ͘ͳΔ • = ΧδϡΞϧʹ࡟আͰ͖Δɾ࠶ར༻Ͱ͖Δ
24. ·ͱΊ
25. Reactͱίϯϙʔωϯτ • React͸ίϯϙʔωϯτࢦ޲ • ίϯϙʔωϯτ͸ɺ஋ -> DOM ม׵ث ͱͯ͠ ػೳ͢Δ
26. ίϯϙʔωϯτࢦ޲ 3ͭͷ๏ଇ • ஋ -> DOM ม׵ث Ͱ͋Δ͜ͱΛప͢Δ • ࠶ར༻͞ΕΔ͜ͱΛલఏʹ͢Δ • ίϯϙʔωϯτͱͦ͏Ͱͳ͍΋ͷΛ໌֬ʹ෼ ͚Δ
27. ϝϦοτ • ςελϒϧ • ႈ౳ੑͱૄ݁߹Ͱ͋Δ͜ͱ͕୲อ͞ΕΔ • ΧδϡΞϧͳมߋɾ࡟আͱ࠶ར༻͕Մೳ • ߴ଎ͳPDCAαΠΫϧʹऑ͘ͳ͍ • CSSઃܭ΋ॿ͚Δ
28. ΈΜͳ΋React࢖͓͏ʂ
29. Thank you for listening :)