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
260
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.4k
Introduction to Redux
axross
34
22k
作るのにデザイナーもエンジニアもない
axross
15
7.2k
なぜprottか
axross
4
2.7k
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
axross
0
400
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.4k
gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン
axross
2
1k
Other Decks in Programming
See All in Programming
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
Select API from Kotlin Coroutine
jmatsu
1
220
RailsGirls IZUMO スポンサーLT
16bitidol
0
160
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
230
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
930
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
32k
C++20 射影変換
faithandbrave
0
560
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
100
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
280
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
Thoughts on Productivity
jonyablonski
69
4.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Why Our Code Smells
bkeepers
PRO
337
57k
It's Worth the Effort
3n
185
28k
Building an army of robots
kneath
306
45k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
A better future with KSS
kneath
239
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
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ϑϩϯτΤϯυੜ࢈ੑΛམͱ͞ͳ͍ઃܭͰ։ൃ͍͖ͯ͠·͠ΐ ͏