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
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
300
NPOでのDevinの活用
codeforeveryone
0
440
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
340
GoのGenericsによるslice操作との付き合い方
syumai
3
690
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
460
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
200
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
220
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
820
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How GitHub (no longer) Works
holman
314
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
The Cult of Friendly URLs
andyhume
79
6.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Automating Front-end Workflow
addyosmani
1370
200k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
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