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
450
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
250
チーム開発を円滑に進めるためのOSS / Lightning TechTalks 20231102
dachi023
0
430
なぜその技術を使うのか? / Connehito marche online 20201112
dachi023
0
820
リモートワークの導入から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
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
160
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
麻雀点数計算問題生成タスクから学ぶ Single Agentの限界と Agentic Workflowの底力
po3rin
5
2.1k
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
370
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
900
CSC305 Lecture 01
javiergs
PRO
1
400
明日から始めるリファクタリング
ryounasso
0
110
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
140
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
510
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
3
170
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
240
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
780
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Music & Morning Musume
bryan
46
6.8k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
BBQ
matthewcrist
89
9.8k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
KATA
mclloyd
32
15k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
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