Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The State Transparented Web Application
Search
Kohei Asai
January 13, 2017
Programming
1
230
The State Transparented Web Application
2017/01に社内勉強会で話した何かです
Kohei Asai
January 13, 2017
Tweet
Share
More Decks by Kohei Asai
See All by Kohei Asai
UIコンポーネント指向と「協働」
axross
6
2.7k
安全なJavaScriptを書く
axross
22
8.3k
Introduction to Redux
axross
34
21k
作るのにデザイナーもエンジニアもない
axross
15
7.1k
なぜprottか
axross
4
2.6k
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
axross
0
360
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.3k
gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン
axross
2
990
Other Decks in Programming
See All in Programming
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
690
Realtime API 入門
riofujimon
0
150
Macとオーディオ再生 2024/11/02
yusukeito
0
370
CSC509 Lecture 11
javiergs
PRO
0
180
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
Jakarta EE meets AI
ivargrimstad
0
220
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
630
最新TCAキャッチアップ
0si43
0
190
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
みんなでプロポーザルを書いてみた
yuriko1211
0
280
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
65
4.4k
How GitHub (no longer) Works
holman
310
140k
Faster Mobile Websites
deanohume
305
30k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Typedesign – Prime Four
hannesfritz
40
2.4k
The Pragmatic Product Professional
lauravandoore
31
6.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Rails Girls Zürich Keynote
gr2m
94
13k
A Tale of Four Properties
chriscoyier
156
23k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
130
Transcript
WebΫϥΠΞϯτΞϓϦέʔγϣϯʹ ͓͚ΔεςʔτϚγϯͱಁաతΠϯ λʔϑΣʔε @axross
whoami » @axross / Kohei Asai » Web Application Developer
ΑΖ͓͘͠ئ͍͠·͢
WebΫϥΠΞϯτʹ͓͚Δ…Կʁ » ཁFluxͱ͔Reactͱ͔ͷ » ࠜຊతͳߟ͑ํͱ͔ » ͜ͷʹڵຯΛ࣋ͬͯͦ͏ͳਓ͕͍ͨ
WebΫϥΠΞϯτΞϓϦέʔγϣϯʁ » ࠓͷWebϑϩϯτΤϯυʹ2छྨ͋Δ » WebυΩϡϝϯτ » ओʹ੩తͳใΛఏڙ͢Δ » WebΫϥΠΞϯτΞϓϦέʔγϣϯ »
ओʹιϑτΣΞΛఏڙ͢Δ
WebΫϥΠΞϯτΞϓϦέʔγϣϯͷ಄ » ͋͑ͯʮมભͨ͠ʯͱݴΘͳ͍ » ࠓWebυΩϡϝϯτଘࡏ͢Δ (ͱ͍͏͔Webຊདྷͦ͏͍͏༻్ ͷͣ) » React͕৽͍͔͠ΒjQueryΊΑ͏ʂͱ͔Ͱͳ͍ͱࢥ͏ »
ͱ͍͑ɺॻ͔ΕΔJavaScript͕ΞϓϦέʔγϣϯͱͯ͠ͷମࡋΛอ ͭͦΕʹͳͬͨ
FluxͱReactʹ͍͓ͭͯ͞Β͍ ඞཁͷͳ͍ਓ৸͍ͯͯͩ͘͞
Flux » Facebook͕σβΠϯύλʔϯͱͯ͠ఏএͨ֓͠೦ » ΦϒβʔόʔύλʔϯΛϕʔεͱͨ͠ঢ়ଶભҠཧͷΓํ » ViewͳͲ͕Action CreatorΛίʔϧ » αϒεΫϥΠϒ͍ͯ͠ΔStore͕Ԡ͠ɺϝοηʔδ(Action)ͷ༰
Λͱʹࣗͷཧ͢Δঢ়ଶΛߋ৽͢Δ
Fluxʹ͓͚ΔView » ViewStoreΛαϒεΫϥΠϒ͢Δ » Store͕ཧ͍ͯ͠Δঢ়ଶ͕ߋ৽͞ΕΔࡍʹɺͦͷมߋ͕σΟεύο ν͞ΕΔ » ߋ৽ޙͷঢ়ଶ͕ྲྀΕͯ͘ΔͷͰɺViewͦΕΛͱʹը໘Λ࠶ඳը ͢Δ
Virtual DOM » ViewʹྲྀΕͯ͘Δɺৗʹߋ৽ޙঢ়ଶͷશʹͳΔ (ࠩͰͳ ͍) » ͕ɺDOMࠩͷखଓ͖తͳߋ৽ΛΉ » Virtual
DOMͱ͍͏ঢ়ଶͱDOMͱͷதؒදݱ͕͋Εɺதؒදݱ ಉ࢜ͰࠩΛܭࢉͯ͠ɺDOMΛͲ͏มߋ͢Ε͍͍͔ͱ͍͏खଓ͖ ॲཧΛܾఆͰ͖Δ » ͍ͬͯ͏ͷΛ୲͏ͷ͕React
Flux ♥ React » ͭ·ΓFluxVirtual DOMͷΑ͏ͳΈ͕ͳ͍ͱཱͰ͖ͳ͍ » React͕͋Δ͜ͱͰɺFlux͕࣮༻Ͱ͖Δ
Α͘ݴΘΕΔ͜ͱ » ʮRedux (Flux)ͬͯεςʔτϚγϯ (༗ݶΦʔτϚτϯ)ͬΆ͍ΑͶʯ » ʮRedux (Flux)CQRSΛڧ੍Ͱ͖ΔΑͶʯ » (ͨͿΜFluxͷ͜ͱͳΜ͚ͩͲɺRedux͕༗໊ͳͷͰ໊ࢺͱͯ͠༻
͍ΒΕΔ)
༗ݶΦʔτϚτϯ σδλϧճ࿏ϓϩάϥϜͷઃܭͰΘΕΔ͜ͱ͕͋Γɺ͋ΔҰ࿈ͷঢ় ଶΛͱͬͨͱ͖ͲͷΑ͏ʹཧ͕ྲྀΕΔ͔ΛௐΔ͜ͱ͕Ͱ͖Δɻ ༗ݶ ݸͷʮঢ়ଶʯͷ͏ͪ1ͭͷঢ়ଶΛͱΔɻ͋Δ࣌Ͱ1ͭͷঢ়ଶ͔͠ͱΒ ͣɺͦΕΛͦͷ࣌ͷʮݱࡏঢ়ଶʯͱݺͿɻԿΒ͔ͷΠϕϯτ݅ʹ Αͬͯ͋Δঢ়ଶ͔Βผͷঢ়ଶͱҠߦ͠ɺͦΕΛʮભҠʯͱݺͿɻ ͦΕ ͧΕͷݱࡏঢ়ଶ͔ΒભҠ͠͏Δঢ়ଶͱɺભҠͷ͖͔͚ͬͱͳΔ݅Λྻ ڍ͢Δ͜ͱͰఆٛ͞ΕΔɻ
via. ༗ݶΦʔτϚτϯ - Wikipedia
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
CQRS » ίϚϯυΫΤϦ (Command and Query Responsibility Segregation) » ಡΈࠐΈͱॻ͖ࠐΈΛΠϯλʔϑΣʔεͱͯ͠໌֬ʹ͚Δݪଇ
» Command (ॻ͖ࠐΈ) ඞͣ෭࡞༻Λ࣋ͪɺQuery (ಡΈࠐΈ) ෭ ࡞༻Λ࣋ͨͳ͍ » ͜ΕΒΛ໌֬ʹ͚Δ͜ͱͰɺϓϩάϥϜͷৼΔ͍ͷཧղͷ͠͞ ͕ܰݮ͞ΕΔ via. ϝΠϠʔઌੜͷҒେ͞ͱCommand-Query
Fluxʹ͓͚ΔCQRS » ঢ়ଶͷมߋඞͣAction CreatorΛ௨Δ → Command » ݱࡏͷঢ়ଶStore͔͠Γಘͳ͍ → Query
» ͦΕͧΕͷཁૉʹରͯ͠ٯͷૢ࡞Λ͢Δ͜ͱͰ͖ͳ͍ » ͔ͨ͠ʹ…ʁ
ͭ·ΓͲ͏͍͏͜ͱͩͬͯΑʁ » Flux༗ݶΦʔτϚτϯͷΑ͏ʹৼΔΘͤΔ͜ͱ͕Ͱ͖Δ » FluxʹΑͬͯCQRS͕ڧ੍͞ΕΔ » React͕͋Δ͜ͱʹΑͬͯFlux͕࣮༻Ͱ͖Δ » ͭ·ΓɺFluxͱ͍͏εςʔτϚγϯͱɺReactͱ͍͏ಁաతϢʔβʔ ΠϯλʔϑΣʔεʹΑͬͯΞϓϦέʔγϣϯΛߏங͢Δ
» (༗ݶΦʔτϚτϯͱ͔CQRSͱ͔ʹ໌Δ͘ͳ͍ͷͰؒҧͬͯͨΒϚα ΧϦ͍ͩ͘͞)
ͦΜͳ͜ͱͰ͖Μͷ(ຊʹͰ͖ͯΜͷ)ʁ » ʮFluxͱReact͚ͩʯͰແཧ… » ֤ʑ͕࣌ؒ࣠Λ࣋ͭ֓೦Λѻ͏ͷ͕͍͠ » ඇಉظతॲཧΛͲ͏͢Δ͔ » ΞχϝʔγϣϯΛͲ͏͢Δ͔ »
ࣄ࣮ɺ࣌ʮFluxͷͲ͜ͰAjaxΛ͢Δ͔ʯͱ͍͏͍Ͱք۾͕ ৭ʑΞϨͨ͠
ͨͱ͑ʁ » ϢʔβʔϑΟʔυόοΫΛ͖ͪΜͱ͢ΔͳΛ࡞Δલఏ » Ϧετͷ߲Λϩʔυ(ߋ৽)͍ͨ͠ → ϩʔσΟϯάதʹͦͷࢫΛදࣔ ͍ͨ͠ » ϝοηʔδ(Action)͕2ͭಉ࣌ʹσΟεύον͞ΕΔඞཁ͕͋Δ
» StoreͷதͰྫ֎Τϥʔ͕ൃੜͨ͠ΒͲ͏͢Δ͔ʁ » ఘΊ͍ͨ » ௨ৗൃੜ͠ͳ͍Α͏ͳྫ֎ఘΊͯΫϥογϡ͍ͤͨ͞
͡Ό͋Ͳ͏͢Δ͔ʁ » Store͔ΒActionΛݺɺҰԠͰ͖Δ » ͱ͍͑ɺ͜ΕFluxͰېࢭ͞Ε͍ͯΔ » σʔλϑϩʔ͕୯ํͰ͋Δͱ͍͏ϝϦοτΛࣦͬͯ͠·͏ » Fluxͷ্ʹ͏ҰͭɺԿ͔Λෑ͘ඞཁ͕͋Δ
Fluxͷ্ʹԿ͔Λෑ͘ʁ » ʮϢʔεέʔεʯ : Ϣʔβʔೖྗ͔ΒɺAction CreatorΛฒྻɾ ྻʹΈ߹Θͤͯίʔϧ͢Δखଓ͖తͳ͕ඞཁ » redux-sagaɺredux-thunkɺredux-observable »
ReduxͷϛυϧΣΞͱͯ͠ɺಠࣗDSLͳͲͰϢʔεέʔεΛ࡞ Δ » ΫϦʔϯΞʔΩςΫνϟͳͲ » தنҎ্Ͱ͋Εɺ͖ͪΜͱͨ͠ΞʔΩςΫνϟʹͤΔͷ ख
ྫ Viewͱ༗ݶΦʔτϚτϯͱͯ͠ͷFlux͕ଘࡏɺͦͷؒʹUsecase
ͦͷଞ » iOSAndroidͰFluxͷ׆༻ྫ͕૿͖͑ͯͨ » ͱ͍͑ɺiOSAndroidʹVirtual DOMͳ͍ͷͰɺԿΒ͔ͷ Έඞཁ » facebook/componentkit »
zserge/anvil » ͱ͍͏͔ήʔϜͱ͔ͩͱɺ͜͏͍͏ΓํΛ͍ͯ͠Δͷ͕ଟ͍ » WebϑϩϯτΤϯυੜ࢈ੑΛམͱ͞ͳ͍ઃܭͰ։ൃ͍͖ͯ͠·͠ΐ ͏