The State Transparented Web Application

WebΫϥΠΞϯτΞϓϦέʔγϣϯʹ
͓͚ΔεςʔτϚγϯͱಁաతΠϯ
λʔϑΣʔε
@axross

View Slide

whoami
» @axross / Kohei Asai
» Web Application Developer

View Slide

ΑΖ͓͘͠ئ͍͠·͢

View Slide

WebΫϥΠΞϯτʹ͓͚Δ…Կʁ
» ཁ͸Fluxͱ͔Reactͱ͔ͷ࿩
» ࠜຊతͳߟ͑ํͱ͔
» ͜ͷ࿩ʹڵຯΛ࣋ͬͯͦ͏ͳਓ͕͍ͨ

View Slide

WebΫϥΠΞϯτΞϓϦέʔγϣϯʁ
» ࠓͷWebϑϩϯτΤϯυʹ͸2छྨ͋Δ
» WebυΩϡϝϯτ
» ओʹ੩తͳ৘ใΛఏڙ͢Δ
» WebΫϥΠΞϯτΞϓϦέʔγϣϯ
» ओʹιϑτ΢ΣΞΛఏڙ͢Δ

View Slide

WebΫϥΠΞϯτΞϓϦέʔγϣϯͷ୆಄
» ͋͑ͯʮมભͨ͠ʯͱ͸ݴΘͳ͍
» ࠓ΋WebυΩϡϝϯτ΋ଘࡏ͢Δ (ͱ͍͏͔Web͸ຊདྷͦ͏͍͏༻్
ͷ͸ͣ)
» React͕৽͍͔͠ΒjQuery΍ΊΑ͏ʂͱ͔Ͱ͸ͳ͍ͱࢥ͏
» ͱ͸͍͑ɺॻ͔ΕΔJavaScript͕ΞϓϦέʔγϣϯͱͯ͠ͷମࡋΛอ
ͭͦΕʹͳͬͨ

View Slide

FluxͱReactʹ͍͓ͭͯ͞Β͍
ඞཁͷͳ͍ਓ͸৸͍ͯͯͩ͘͞

View Slide

Flux
» Facebook͕σβΠϯύλʔϯͱͯ͠ఏএͨ֓͠೦
» ΦϒβʔόʔύλʔϯΛϕʔεͱͨ͠ঢ়ଶભҠ؅ཧͷ΍Γํ
» ViewͳͲ͕Action CreatorΛίʔϧ
» αϒεΫϥΠϒ͍ͯ͠ΔStore͕൓Ԡ͠ɺϝοηʔδ(Action)ͷ಺༰
Λ΋ͱʹࣗ਎ͷ؅ཧ͢Δঢ়ଶΛߋ৽͢Δ

View Slide

Fluxʹ͓͚ΔView
» View͸StoreΛαϒεΫϥΠϒ͢Δ
» Store͕؅ཧ͍ͯ͠Δঢ়ଶ͕ߋ৽͞ΕΔࡍʹɺͦͷมߋ͕σΟεύο
ν͞ΕΔ
» ߋ৽ޙͷঢ়ଶ஋͕ྲྀΕͯ͘ΔͷͰɺView͸ͦΕΛ΋ͱʹը໘Λ࠶ඳը
͢Δ

View Slide

Virtual DOM
» ViewʹྲྀΕͯ͘Δ஋͸ɺৗʹߋ৽ޙঢ়ଶͷ׬શ஋ʹͳΔ (ࠩ෼Ͱ͸ͳ
͍)
» ͕ɺDOM͸ࠩ෼ͷखଓ͖తͳߋ৽Λ޷Ή
» Virtual DOMͱ͍͏ঢ়ଶ஋ͱDOMͱͷதؒදݱ͕͋Ε͹ɺதؒදݱ
ಉ࢜Ͱࠩ෼Λܭࢉͯ͠ɺDOMΛͲ͏มߋ͢Ε͹͍͍͔ͱ͍͏खଓ͖
ॲཧΛܾఆͰ͖Δ
» ͍ͬͯ͏ͷΛ୲͏ͷ͕React

View Slide

Flux ♥ React
» ͭ·ΓFlux͸Virtual DOMͷΑ͏ͳ࢓૊Έ͕ͳ͍ͱ੒ཱͰ͖ͳ͍
» React͕͋Δ͜ͱͰɺFlux͕࣮༻Ͱ͖Δ

View Slide

Α͘ݴΘΕΔ͜ͱ
» ʮRedux (Flux)ͬͯεςʔτϚγϯ (༗ݶΦʔτϚτϯ)ͬΆ͍ΑͶʯ
» ʮRedux (Flux)͸CQRSΛڧ੍Ͱ͖ΔΑͶʯ
» (ͨͿΜFluxͷ͜ͱͳΜ͚ͩͲɺRedux͕༗໊ͳͷͰ୅໊ࢺͱͯ͠༻
͍ΒΕΔ)

View Slide

༗ݶΦʔτϚτϯ
σδλϧճ࿏΍ϓϩάϥϜͷઃܭͰ࢖ΘΕΔ͜ͱ͕͋Γɺ͋ΔҰ࿈ͷঢ়
ଶΛͱͬͨͱ͖ͲͷΑ͏ʹ࿦ཧ͕ྲྀΕΔ͔Λௐ΂Δ͜ͱ͕Ͱ͖Δɻ ༗ݶ
ݸͷʮঢ়ଶʯͷ͏ͪ1ͭͷঢ়ଶΛͱΔɻ͋Δ࣌఺Ͱ͸1ͭͷঢ়ଶ͔͠ͱΒ
ͣɺͦΕΛͦͷ࣌఺ͷʮݱࡏঢ়ଶʯͱݺͿɻԿΒ͔ͷΠϕϯτ΍৚݅ʹ
Αͬͯ͋Δঢ়ଶ͔Βผͷঢ়ଶ΁ͱҠߦ͠ɺͦΕΛʮભҠʯͱݺͿɻ ͦΕ
ͧΕͷݱࡏঢ়ଶ͔ΒભҠ͠͏Δঢ়ଶͱɺભҠͷ͖͔͚ͬͱͳΔ৚݅Λྻ
ڍ͢Δ͜ͱͰఆٛ͞ΕΔɻ
via. ༗ݶΦʔτϚτϯ - Wikipedia

View Slide

FluxͷStore
͔ͨ͠ʹ
// TodoStore#reduce() ...
switch (action.type) {
// ...
// ೖྗͷఆٛ
case TodoActionTypes.TOGGLE_TODO:
// ঢ়ଶભҠઌͷఆٛ (state.update()ͷฦ஋͕ભҠޙͷঢ়ଶ)
return state.update(
action.id,
todo => todo.set('complete', !todo.complete),
);
// ...
}
// ...
via. flux/TodoStore.js at master · facebook/flux · GitHub

View Slide

CQRS
» ίϚϯυΫΤϦ੹຿෼཭ (Command and Query Responsibility
Segregation)
» ಡΈࠐΈͱॻ͖ࠐΈΛΠϯλʔϑΣʔεͱͯ͠໌֬ʹ෼͚Δݪଇ
» Command (ॻ͖ࠐΈ) ͸ඞͣ෭࡞༻Λ࣋ͪɺQuery (ಡΈࠐΈ) ͸෭
࡞༻Λ࣋ͨͳ͍
» ͜ΕΒΛ໌֬ʹ෼͚Δ͜ͱͰɺϓϩάϥϜͷৼΔ෣͍ͷཧղͷ೉͠͞
͕ܰݮ͞ΕΔ
via. ϝΠϠʔઌੜͷҒେ͞ͱCommand-Query෼཭

View Slide

Fluxʹ͓͚ΔCQRS
» ঢ়ଶͷมߋ͸ඞͣAction CreatorΛ௨Δ → Command
» ݱࡏͷঢ়ଶ͸Store͔͠஌Γಘͳ͍ → Query
» ͦΕͧΕͷཁૉʹରͯ͠ٯͷૢ࡞Λ͢Δ͜ͱ͸Ͱ͖ͳ͍
» ͔ͨ͠ʹ…ʁ

View Slide

ͭ·ΓͲ͏͍͏͜ͱͩͬͯ͹Αʁ
» Flux͸༗ݶΦʔτϚτϯͷΑ͏ʹৼΔ෣ΘͤΔ͜ͱ͕Ͱ͖Δ
» FluxʹΑͬͯCQRS͕ڧ੍͞ΕΔ
» React͕͋Δ͜ͱʹΑͬͯFlux͕࣮༻Ͱ͖Δ
» ͭ·ΓɺFluxͱ͍͏εςʔτϚγϯͱɺReactͱ͍͏ಁաతϢʔβʔ
ΠϯλʔϑΣʔεʹΑͬͯΞϓϦέʔγϣϯΛߏங͢Δ
» (༗ݶΦʔτϚτϯͱ͔CQRSͱ͔ʹ໌Δ͘ͳ͍ͷͰؒҧͬͯͨΒϚα
ΧϦ͍ͩ͘͞)

View Slide

ͦΜͳ͜ͱͰ͖Μͷ(ຊ౰ʹͰ͖ͯΜͷ)ʁ
» ʮFluxͱReact͚ͩʯͰ͸ແཧ…
» ֤ʑ͕࣌ؒ࣠Λ࣋ͭ֓೦Λѻ͏ͷ͕೉͍͠
» ඇಉظతॲཧΛͲ͏͢Δ͔
» ΞχϝʔγϣϯΛͲ͏͢Δ͔
» ࣄ࣮ɺ౰࣌ʮFluxͷͲ͜ͰAjaxΛ͢Δ͔ʯͱ͍͏໰͍Ͱք۾͕
৭ʑΞϨͨ͠

View Slide

ͨͱ͑͹ʁ
» ϢʔβʔϑΟʔυόοΫΛ͖ͪΜͱ͢Δ਌੾ͳ෺Λ࡞Δલఏ
» Ϧετͷ߲໨Λϩʔυ(ߋ৽)͍ͨ͠ → ϩʔσΟϯάதʹͦͷࢫΛදࣔ
͍ͨ͠
» ϝοηʔδ(Action)͕2ͭಉ࣌ʹσΟεύον͞ΕΔඞཁ͕͋Δ
» StoreͷதͰྫ֎΍Τϥʔ͕ൃੜͨ͠ΒͲ͏͢Δ͔ʁ
» ఘΊ͍ͨ
» ௨ৗൃੜ͠ͳ͍Α͏ͳྫ֎͸ఘΊͯΫϥογϡ͍ͤͨ͞

View Slide

͡Ό͋Ͳ͏͢Δ͔ʁ
» Store͔ΒActionΛݺ΂͹ɺҰԠͰ͖Δ
» ͱ͸͍͑ɺ͜Ε͸FluxͰ͸ېࢭ͞Ε͍ͯΔ
» σʔλϑϩʔ͕୯ํ޲Ͱ͋Δͱ͍͏ϝϦοτΛࣦͬͯ͠·͏
» Fluxͷ্ʹ΋͏ҰͭɺԿ͔Λෑ͘ඞཁ͕͋Δ

View Slide

Fluxͷ্ʹԿ͔Λෑ͘ʁ
» ʮϢʔεέʔε૚ʯ : Ϣʔβʔೖྗ͔ΒɺAction CreatorΛฒྻɾ௚
ྻʹ૊Έ߹Θͤͯίʔϧ͢Δखଓ͖తͳ૚͕ඞཁ
» redux-sagaɺredux-thunkɺredux-observable
» Reduxͷϛυϧ΢ΣΞͱͯ͠ɺಠࣗDSLͳͲͰϢʔεέʔε૚Λ࡞
Δ
» ΫϦʔϯΞʔΩςΫνϟͳͲ
» தن໛Ҏ্Ͱ͋Ε͹ɺ͖ͪΜͱͨ͠ΞʔΩςΫνϟʹ৐ͤΔͷ΋
ख

View Slide

ྫ
Viewͱ༗ݶΦʔτϚτϯͱͯ͠ͷFlux͕ଘࡏɺͦͷؒʹUsecase

View Slide

ͦͷଞ
» iOS΍AndroidͰ΋Fluxͷ׆༻ྫ͕૿͖͑ͯͨ
» ͱ͸͍͑ɺiOS΍AndroidʹVirtual DOM͸ͳ͍ͷͰɺԿΒ͔ͷ
࢓૊Έ͸ඞཁ
» facebook/componentkit
» zserge/anvil
» ͱ͍͏͔ήʔϜͱ͔ͩͱɺ͜͏͍͏΍ΓํΛ͍ͯ͠Δ΋ͷ͕ଟ͍
» WebϑϩϯτΤϯυ΋ੜ࢈ੑΛམͱ͞ͳ͍ઃܭͰ։ൃ͍͖ͯ͠·͠ΐ
͏

View Slide

The State Transparented Web Application

The State Transparented Web Application

Kohei Asai

More Decks by Kohei Asai

Other Decks in Programming

Featured

Transcript