Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ίϯϙʔωϯτࢦ޲

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

CSSઃܭ΁ͷΞϯαʔ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

·ͱΊ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ΈΜͳ΋React࢖͓͏ʂ

Slide 29

Slide 29 text

Thank you for listening :)