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.3k
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
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
180
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
670
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
900
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
330
AIともっと楽するE2Eテスト
myohei
8
2.9k
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.7k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
250
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
370
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
14k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
310
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Cult of Friendly URLs
andyhume
79
6.5k
The Language of Interfaces
destraynor
158
25k
For a Future-Friendly Web
brad_frost
179
9.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Documentation Writing (for coders)
carmenintech
72
4.9k
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