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
220
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.6k
安全なJavaScriptを書く
axross
22
8.2k
Introduction to Redux
axross
34
21k
作るのにデザイナーもエンジニアもない
axross
15
6.9k
なぜprottか
axross
4
2.5k
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
axross
0
310
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.3k
gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン
axross
2
970
Other Decks in Programming
See All in Programming
自作ソフト(VMagicMirror)がVRMA対応してる話+実装のTips
bakudreameater
0
110
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
490
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
120
どうしてこうなった命名集 ~🔥編~ / OOC 2024 LT
pictiny
4
2.8k
WebComponentsで フレームワークを1ページに共存させる
webuilder240
0
150
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
LPIXEL×CADDi_kaerururu
kaerururu
3
300
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
3.2k
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
130
Honoとhtmx
yusukebe
6
1.2k
受託開発でGitLab CI を活用していく
xiombatsg
1
100
プロンプトエンジニアリング入門
tomokusaba
2
970
Featured
See All Featured
Clear Off the Table
cherdarchuk
82
310k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
How STYLIGHT went responsive
nonsquared
92
4.7k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
Designing Experiences People Love
moore
135
23k
Become a Pro
speakerdeck
PRO
8
4.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
The Cult of Friendly URLs
andyhume
72
5.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
57
14k
Infographics Made Easy
chrislema
237
18k
RailsConf 2023
tenderlove
0
510
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ϑϩϯτΤϯυੜ࢈ੑΛམͱ͞ͳ͍ઃܭͰ։ൃ͍͖ͯ͠·͠ΐ ͏