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.5k
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
画像コンペでのベースラインモデルの育て方
tattaka
3
1.6k
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
100
Reactの歴史を振り返る
tutinoko
1
180
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
280
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
860
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
4
2.7k
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
520
Flutterと Vibe Coding で個人開発!
hyshu
1
250
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
300
Webinar: AI-Powered Development: Transformiere deinen Workflow mit Coding Tools und MCP Servern
danielsogl
0
130
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
450
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
980
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Become a Pro
speakerdeck
PRO
29
5.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Scaling GitHub
holman
462
140k
Facilitating Awesome Meetings
lara
54
6.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Producing Creativity
orderedlist
PRO
347
40k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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ϑϩϯτΤϯυੜ࢈ੑΛམͱ͞ͳ͍ઃܭͰ։ൃ͍͖ͯ͠·͠ΐ ͏