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
beginner_react_flux
Search
dachi023
July 29, 2016
Programming
1
430
beginner_react_flux
dachi023
July 29, 2016
Tweet
Share
More Decks by dachi023
See All by dachi023
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
210
チーム開発を円滑に進めるためのOSS / Lightning TechTalks 20231102
dachi023
0
410
なぜその技術を使うのか? / Connehito marche online 20201112
dachi023
0
800
リモートワークの導入から3ヶ月 / Connehito marche online 20200311
dachi023
2
3k
急に大量のHTMLが必要になったこと、ありませんか? / BIT VALLEY INSIDE vol8
dachi023
0
8k
ママリのweb技術の今と未来 / mamari's front-end present and future
dachi023
2
1.4k
2年運用したサービスのフロントをReactで書き換えたい話
dachi023
5
2.1k
エンジニアがUIデザインをしてみた話
dachi023
1
1.3k
Other Decks in Programming
See All in Programming
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
2.9k
20250528 AWS Startupイベント登壇資料:AIコーディングの取り組み
procrustes5
0
160
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
180
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
150
GoのGenericsによるslice操作との付き合い方
syumai
1
350
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
5
520
Blueskyのプラグインを作ってみた
hakkadaikon
1
480
GoのWebAssembly活用パターン紹介
syumai
3
9.6k
Datadog RUM 本番導入までの道
shinter61
1
220
FastMCPでMCPサーバー/クライアントを構築してみる
ttnyt8701
2
130
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
0
110
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.7k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
900
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
A Tale of Four Properties
chriscoyier
159
23k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Building Applications with DynamoDB
mza
95
6.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
680
Code Reviewing Like a Champion
maltzj
524
40k
A designer walks into a library…
pauljervisheath
206
24k
Rails Girls Zürich Keynote
gr2m
94
14k
Transcript
ॳ৺ऀ͚ͷ Α͘Θ͔ΔReactͱFlux 1
͜Μͳਓ͚ͷࢿྉͰ͢ • ReactΛ͜Ε͔Β͍࢝ΊΔ, ͍࢝ΊΑ͏ͱࢥ͍ͬͯΔ • ReactͰίϯϙʔωϯτͷωετʹർฐͨ͠ • FluxͷData flow͕Α͔͘Βͳ͍ •
FluxͰͦΕͧΕͷཁૉͷ͕Γ͚ΒΕͳ͍ • jQueryͷDOMࢀরࠈ͔Βղ์͞Ε͍ͨ 2
Reactʹ͍ͭͯ 3
Reactʹ͍ͭͯ • FacebookࣾͷJavaScriptϥΠϒϥϦ View (UI)Λ࡞ΔͨΊͷͷ • ෳͷίϯϙʔωϯτ (= UIύʔπ)Ͱը໘Λߏ ex.
ϔομʔ, αΠυόʔ, ϑολʔ etc • state, propsʹΑͬͯίϯϙʔωϯτͷঢ়ଶΛཧ, ൖ • JSXͱ͍͏ಠࣗه๏ʹΑΔJS্ͰͷϚʔΫΞοϓ • VirtualDOMΛ࠾༻ 4
ReactͷϝϦοτ • ίϯϙʔωϯτ͕࠶ར༻Մೳ ˠ Material-UI, React-Bootstrap ͱ͍ͬͨUIϥΠϒϥϦ • ViewϥΠϒϥϦͳͷͰଞͷϑϨʔϜϫʔΫͱ࿈ܞՄೳ Backbone.ViewΛগͣͭ͠Reactʹ͢ΔͳͲ
• ͍ͦͦ͜͜ (jQueryͳͲʹൺͯ) • αʔόαΠυϨϯμϦϯάՄೳ • ͷঢ়ଶ͕ߋ৽͞ΕΔ ˠ ࢠʹ͖͍ͬͯͯΔʹࣗಈͰө͞ΕΔ 5
ReactͰ͋Γ͕ͪͳࣦഊ • jQueryΛೖΕͯΞχϝʔγϣϯͪ͠Ό͏ ˠ ReactࣗମϦονUIΛఏڙ͢ΔϥΠϒϥϦͰͳ͍ ˠˠ CSSͰؤுΖ͏ • ViewʹશͯΛ࣮͢Δ APIݺͼग़͠,
Viewͱͯ͠ͷҎ্ͷϩδοΫ etc • ίϯϙʔωϯτͷࢠؔʹΑΔίʔϧόοΫࠈ ࢠ͕ʹ௨ͯ͠͞Βʹͦͷʹ௨ͯ͠… 6
͍ ͭ ͷ ɾ ɾ ɾ ε ύ ή
ο ς Ο ࣮ ͡ Ό ͳ ͍ Ͱ ͢ ͔ ɾ ɾ ɾ 7
ͱɺͳΒͳ͍ͨΊʹ 8
Flux 9
Fluxʹ͍ͭͯ • Facebook͕ࣾఏএ͢ΔΞʔΩςΫνϟ • ओʹ4ͭͷཁૉʹΑͬͯߏ͞ΕΔ • Action (Action Creator) •
Dispatcher • Store • View (React Component) • σʔλͷྲྀΕৗʹҰํ 10
Action (Action Creator) • σʔλΛऔಘ͢Δॲཧ, ඞཁ͕͋ΕՃ·Ͱߦ͏ API௨৴ͳͲ͜͜Ͱߦ͏ (Action Creator) •
σʔλΛઃఆͯ͠DispatcherʹҾ͖͢ ActionΛผ͢ΔͨΊͷλΠϓҰॹʹઃఆ͢Δ 11
Dispatcher • Dispatcherʹొ͞ΕͨίʔϧόοΫΛ࣮ߦ͢Δ (ίʔϧόοΫStore͔Βొ͞ΕΔ) • ίʔϧόοΫ͕ෳ͋Δ߹ʹͦͷॱ൪Λ੍ޚ͢Δ 12
Store • σʔλͱϏδωεϩδοΫΛѻ͏ • DispatcherʹίʔϧόοΫΛొ͓ͯ͘͠ ActionͷλΠϓʹԠͯ͡ԿΛͲ͏ॲཧ͢Δ͔ܾΊΔ • σʔλͷมߋDispatcher͔Βͷݺͼग़͔͠ΒͷΈԠ͡Δ 13
View (React Component) • ը໘্ͷUIΛཧ, ඳը͢Δ • Store͔ΒσʔλΛड͚औΓදࣔ͢Δ • ը໘্ͷૢ࡞ͳͲͷΠϕϯτͱActionΛඥ͚ͮΔ
ΠϕϯτʹରԠͨ͠ActionΛݺͼग़͢ 14
σʔλͷྲྀΕৗʹҰํ • Action: σʔλΛऔಘͯ͠λΠϓͱڞʹDispatcherʹ͢ • Dispatcher: Store͔Βઃఆ͞ΕͨίʔϧόοΫΛ࣮ߦ • Store: σʔλͷཧ,
৽͍͠σʔλΛViewʹฦ͢ • View: σʔλͷදࣔ, ActionΛݺͼग़͢ 15
͜ΕΒΛ࣮͢ΔͨΊͷ ࠷ݶͷϥΠϒϥϦ 16
Flux Utils 17
Flux Utilsʹ͍ͭͯ • FacebookࣾͷFluxϥΠϒϥϦ • ࠷ݶͷ࣮ͷΈ༻ҙ͞Ε͍ͯΔ • StoreͱViewͷϕʔεͱͳΔΫϥε͕༻ҙ͞Ε͍ͯΔ • ͜Μͳ࣌ʹΦεεϝ
• ॳΊͯFluxͰ࣮ͯ͠ΈΔ • ଞͷFluxϑϨʔϜϫʔΫ͕͗͢Δ • https://github.com/facebook/flux 18
Flux Utilsͷఏڙ͢Δ4ͭͷΫϥε • Store ଞStoreͷϕʔεʹͳ͍ͬͯΔΫϥε • ReduceStore reduce()͢ΔͱStoreͷঢ়ଶ͕ߋ৽͞ΕΔ • MapStore
ReduceStoreΛܧঝͨ͠Immutable.jsʹґଘ͢ΔΫϥε • Container React ComponentͷϥούʔͰStoreΛొͰ͖Δ ContainerԼͷComponentʹStoreͷมߋΛ௨ 19
ReduceStore • Storeͷ֦ுΫϥε • Immutable.jsΛΘͳ͍߹ReduceStoreΛ͏ • StateΛอ͍࣋ͯ͠Δ • Dispatcher͔Β͞ΕͨStateͱAction͔Β ৽͍͠StateΛੜͯ͠Container͢
20
Container • Store͔ΒStateΛड͚औΔReact Componentͷ֦ு • ࣗͷࢠڙͱͳΔComponentʹStateͷมߋΛ௨͢Δ • ContainerΛ͏ࡍʹؾΛ͚ͭΔ͜ͱ • StateͳΔ͘Container͕ҰׅͰཧ͢Δ
ࢠڙ͕StateΛ࣋ͨͳ͍͜ͱͰཧָ͕ʹͳΔ • UIprops (= Componentͱͯ͠ͷػೳ)Λ࣋ͨͳ͍ Containerͱͯ͠ప͠ɺUIComponentͨͪʹͤΔ 21
dispatcher.js 22
dispatcher.js • FacebookࣾͷDispatcherϥΠϒϥϦ • register() ͰίʔϧόοΫΛొ ReduceStoreͳΒStoreͷconstructorʹDispatcherΛ͢ ˠ reduce() ΛίʔϧόοΫͱͯ͠ొͯ͘͠ΕΔ
• ղআ͢Δ࣌unregister() ͰղআͰ͖Δ • Action͕dispatch() Λίʔϧ͢Δͱregister() Ͱొ͞Εͨ ίʔϧόοΫͰActionͷλΠϓ͕Ұக͢Δॲཧ͕࣮ߦ • https://github.com/facebook/flux/blob/master/src/Dispatcher.js 23
࣮αϯϓϧ • https://github.com/dachi023/react-flux-example • ࠷ݶͷ෦Λαϯϓϧ࣮ • Action • Dispatcher (dispatcher.js)
• Store (ReduceStore) • View (Container, React Component) • APIίʔϧ (axios.js) • webpackͰͷJS, CSSͷϏϧυ࣮ • Babel, PostCSS 24
·ͱΊ • React୯ମͩͱσʔλཧ, ൖ่͕յ͢Δ • FluxΛ༻͍Δ͜ͱͰҰํʹσʔλ͕ྲྀΕΔ • FacebookࣾͷϥΠϒϥϦͰ࠷ݶͷߏ͕࡞ΕΔ • ͖ͪΜͱΛҙ࣮ࣝͯ͢͠Δ͜ͱ͕ॏཁ
• Action: σʔλऔಘ(APIίʔϧؚΉ), dispatch()࣮ߦ • Dispatcher: ొίʔϧόοΫͷ࣮ߦ • Store: σʔλͷཧ, ৽نStateͷൃߦ, ίʔϧόοΫͷొ • View: • Container: StateͷҰׅཧ • Component: σʔλͷදࣔ, UIͷඳը 25
͓͠·͍ 26