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
Flux層の責務について考える
Search
yukinm7
January 23, 2019
Programming
3
2.4k
Flux層の責務について考える
yukinm7
January 23, 2019
Tweet
Share
More Decks by yukinm7
See All by yukinm7
モダンJavaScriptフレームワークで技術的負債を作らないために
yukinm7
0
1.5k
Other Decks in Programming
See All in Programming
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
210
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.2k
理論と実務のギャップを超える
eycjur
0
120
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
140
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
540
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
160
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
790
明日から始めるリファクタリング
ryounasso
0
130
CSC509 Lecture 05
javiergs
PRO
0
300
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
24
12k
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
株式会社 Sun terras カンパニーデック
sunterras
0
260
Featured
See All Featured
The Language of Interfaces
destraynor
162
25k
We Have a Design System, Now What?
morganepeng
53
7.8k
Statistics for Hackers
jakevdp
799
220k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
A better future with KSS
kneath
239
18k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Transcript
Fluxͷʹ͍ͭͯߟ͑Δ גࣜձࣾϠϓϦ َ༔و #Yappli_Tech
َ༔و ▸ 20172݄ʹϠϓϦʹೖࣾ ▸ ೖࣾޙΠϯϑϥɺόοΫΤϯυɺϑϩϯτΤϯυΛ ܦݧ ▸ AWSɺAnsibleɺPHPɺLaravelɺRubyɺRuby on RailsɺJavaScriptɺTypeScriptɺReact.jsɺVue.jsɺ
Golang ▸ ݱCMSͷҰ෦ΛReact.jsɺReduxͰ։ൃ ▸ ݱࡏ৽CMSͷαʔόʔαΠυʢGolangʣɺϑϩϯ τΤϯυʢVue.jsɺNuxt.jsʣͷ࣮ ▸ ৽CMSͷFluxΛઃܭ ࣗݾհ #Yappli_Tech @yukinm71
Fluxͱ View state Component Dispatcher Action State Server Flux Store
#Yappli_Tech
StateͱStateΛมߋ͢ΔͨΊͷؔͷྲྀΕʢFluxແ͠ʣ View State ؔ ίϯϙʔωϯτ #Yappli_Tech
StateͱStateΛมߋ͢ΔͨΊͷؔͷྲྀΕʢFlux༗Γʣ View Flux ίϯϙʔωϯτ State Action #Yappli_Tech
Fluxઃܭͷ͠͞ ▸ FluxଆͱComponentଆͷൣғͷܾఆ ▸ FluxΛͲͷ୯ҐͰׂ͢Δͷ͕ਖ਼͍͔͠ͷஅ͕͍͠ ▸ தنҎ্ͷઃܭαϯϓϧ͕গͳ͍ɺ͜Ε͕ਖ਼͍͠ͱ͍͏ͷ͕ͳ͍ ࣗ༝͕ߴ͘ɺਖ਼ղ͕Θ͔Βͳ͍ͱ͍͏͠͞ #Yappli_Tech
ࣗ༝ͷߴ͞ͱ͍͏͠͞ʹཱ͔ͪ͏ͨΊʹ ϧʔϧΛܾΊ͍͕ͨϑϩϯτͷෳࡶੑʹΑΓ͡Ί͔ΒܾΊΕͳ͍෦ ଟ͍ͷͰɺنͷ֦େʹ͑ΒΕΔ֦ுੑɾ౷ҰੑΛ࣋ͬͨ ઃܭͱϧʔϧΛܾΊͯΓग़͢ ▸ StoreׂͷϧʔϧΛܾΊΔ ▸ FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ ϠϓϦͷϑϩϯτΤϯυઃܭͰ֦ுੑͱ౷ҰੑΛ୲อ͢ΔͨΊʹͬͯΑ͔ͬ ͨɺଞͷதʙେنΞϓϦέʔγϣϯʹ൚༻ੑ͕͋Γͦ͏ͩͱײ্ͨ͡ه
ͷ̎ͭʹ͍ͭͯհ͍͖ͤͯͨͩ͞·͢ #Yappli_Tech
StoreׂͷϧʔϧΛܾΊΔ Fluxઃܭͷ͠͞ʹཱ͔ͪ͏ͨΊʹ StoreׂͷϧʔϧΛܾΊΔ #Yappli_Tech
StoreׂͷϧʔϧΛܾΊΔ தنҎ্ͷΞϓϦέʔγϣϯͩͱ։ൃ͕ਐΉʹͭΕStoreංେԽ͍ͯ͠ ͘ͷͰStoreͷׂΛߦ͏ඞཁ͕ग़ͯ͘Δ͕ɺͦΕΛͲͷ୯ҐͰߦ͏͔ Store video photo account permiss ion StoreׂͷϧʔϧΛܾΊΔ
#Yappli_Tech State
ΞϓϦέʔγϣϯશମ + ը໘୯ҐͰ͚Δ தʙେنΞϓϦέʔγϣϯ։ൃͷ߹ StoreׂͷϧʔϧΛܾΊΔ #Yappli_Tech
Storeͷmoduleׂ (photo) Store root Store (book) Store (Video) Store permiss
ion isInitiali zed account contents contents contents StoreׂͷϧʔϧΛܾΊΔ #Yappli_Tech
ΞϓϦέʔγϣϯશମ+ը໘୯ҐͰStoreׂ͢Δ ͜ͱʹΑΔ֦ுੑɺ౷Ұੑͷ୲อ ▸ ׂ୯Ґ͕໌֬Ͱ໎͏͜ͱ͕ͳ͍ʢ֦ுੑɺ౷Ұੑʣ StoreׂͷϧʔϧΛܾΊΔ #Yappli_Tech
ΞϓϦέʔγϣϯશମ+ը໘୯ҐͰStoreׂ͢ΔϝϦοτ ▸ ը໘ʹඞཁͳใͷΈऔಘͰ͖Δ ▸ ֤module StoreͦͷϖʔδͷӬଓԽ͖͢σʔλʹؔ͢ΔϩδοΫʹ ूதͰ͖Δ StoreׂͷϧʔϧΛܾΊΔ #Yappli_Tech
FluxଆͱViewଆͷ ൣғͷϧʔϧΛܾΊΔ Fluxઃܭͷ͠͞ʹཱ͔ͪ͏ͨΊʹ FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ #Yappli_Tech
FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ View Flux Component Component Component Store State State ComponentͱStoreͷͲͪΒͷStateʹঢ়ଶΛ͔࣋ͭ
FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ #Yappli_Tech
ϑϩϯτͰཧ͢Δ༷ʑͳσʔλ ▸ αʔόʔଆ͔Βऔಘ͖ͯͨ͠ӬଓԽσʔλɹˠɹStoreଆͷState ▸ ը໘ͷঢ়ଶɹˠɹComponentଆͷState ▸ αʔόʔଆ͔Βऔಘͨ͠ӬଓԽσʔλ͕ݩͰɺϢʔβʔʹΑͬͯҰ࣌తʹ ฤू͞ΕΔσʔλɹˠɹʁʁʁ FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ #Yappli_Tech
ϢʔβʔʹΑͬͯߋ৽͞ΕΔσʔλͷཧΛߟ͑Δ 1. ࠨଆͷϦετ͔Βฤू͢Δίϯς ϯπΛબ͢Δ 2. ίϯςϯπΛฤू͢Δ 3. ίϯςϯπΛอଘ͢Δɻอଘޙ ࠨଆͷϦετʹө͞ΕΔ ͜ͷ෦ͷ
ঢ়ଶཧʹ ͍ͭͯߟ͑Δ FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ #Yappli_Tech
ӬଓԽσʔλʹؔ͢Δͷશͯ StoreଆͷStateͰཧ͢Δ தʙେنΞϓϦέʔγϣϯ։ൃͷ߹ FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ #Yappli_Tech
StoreଆͷStateͰཧ͢Δ StoreʢVuexʣ contents editContent changeTitle save FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ
ӬଓԽσʔλʹؔ͢ΔͷશͯStoreଆʹஔ͘ ͜ͱʹΑΔ֦ுੑɺ౷Ұੑͷ୲อ ▸ σʔλ͕ͲͷStateʹରԠ͢Δ͔ͱ͍͏͜ͱʹ͍ͭͯ໎Θͳ͘ͳΔʢ౷Ұ ੑʣ ▸ ίϯϙʔωϯτ͕ଟॏͷ߹ͰίϯϙʔωϯτؒͰStateΛड͚͢ඞ ཁ͕ͳ͍ͷͰதʙେنΞϓϦέʔγϣϯ։ൃʹڧ͍ʢ֦ுੑʣ #Yappli_Tech FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ
ӬଓԽσʔλʹؔ͢ΔͷશͯStoreଆʹஔ͘߹ͷϝϦοτ ▸ αʔόʔଆʹอଘ͢Δσʔλʹؔ͢ΔϩδοΫ͕ҰՕॴʹ·ͱ·ΔͷͰ ςετ͍͢͠ ▸ ViewଆViewଆͷॲཧʹूதͰ͖Δ FluxଆͱViewଆͷൣғͷϧʔϧΛܾΊΔ #Yappli_Tech
(photo) Store root Store (book) Store contents contents photo state
(video) Store (shop) Store contents contents shop state video state book state View account permiss ion Flux ֤ϖʔδͷӬଓԽσʔλʹ ؔ͢ΔState Componentͷݟͨʹ ؔ͢ΔState ը໘શମʹ ؔ͢ΔState ࠷ऴతͳߏͱ֦ுੑɾ౷Ұੑʹ͍ͭͯ
·ͱΊ ▸ ઃܭʹਖ਼ղͳ͍͕ɺ͜ͷߏͰ͋ΔఔͷΞϓϦέʔγϣϯશମͷ֦ ுੑɺ౷ҰੑΛ୲อͰ͖Δ ▸ ͋Δఔͷઃܭج൫͕Ͱ͖ͯ։ൃελʔτͨ͠ޙFluxࣗ༝͕ߴ͍ ͨΊFluxͷػೳΛษڧͨ͠Γɺ͍ʹ͍͘෦ϝϯόʔͱର͠ͳ͕ ΒϧʔϧΛܾΊ͍ͯ͘͜ͱ͕େࣄ ▸ ϧʔϧͷఆணԽʹΊΔ͜ͱॏཁʢϧʔϧͷυΩϡϝϯτԽɺϨϏϡʔ
ͷΈʣ #Yappli_Tech
GitHubͷWikiʹυΩϡϝϯτԽ #Yappli_Tech
ϓϧϦΫϝϯόʔʹΑΔApproveඞਢɺ QAલʹϨϏϡΞʔʹΑΔػೳ࠷ऴνΣοΫ #Yappli_Tech
ଞʹ͜Μͳࣄͬͯ·͢ ▸ FluxશମΛλΠϓηʔϑ ▸ GRPC௨৴ʹΑΔ௨৴෦ؚΊͯλΠϓηʔϑ ▸ ActionsɺMutationsͷ໋໊نଇܾΊ ▸ ଟݴޠԽରԠ ▸
watcherʹΑΔStore Stateͷࢹ #Yappli_Tech