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
270
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.8k
安全なJavaScriptを書く
axross
22
8.5k
Introduction to Redux
axross
34
22k
作るのにデザイナーもエンジニアもない
axross
14
7.2k
なぜprottか
axross
4
2.7k
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
axross
0
410
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.4k
gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン
axross
2
1k
Other Decks in Programming
See All in Programming
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
120
Ruby Parser progress report 2025
yui_knk
1
460
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
rage against annotate_predecessor
junk0612
0
170
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
個人軟體時代
ethanhuang13
0
330
楽して成果を出すためのセルフリソース管理
clipnote
0
190
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
OSS開発者という働き方
andpad
5
1.7k
Reading Rails 1.0 Source Code
okuramasafumi
0
250
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Producing Creativity
orderedlist
PRO
347
40k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The World Runs on Bad Software
bkeepers
PRO
70
11k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Rails Girls Zürich Keynote
gr2m
95
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
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ϑϩϯτΤϯυੜ࢈ੑΛམͱ͞ͳ͍ઃܭͰ։ൃ͍͖ͯ͠·͠ΐ ͏