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
380
beginner_react_flux
dachi023
July 29, 2016
Tweet
Share
More Decks by dachi023
See All by dachi023
チーム開発を円滑に進めるためのOSS / Lightning TechTalks 20231102
dachi023
0
290
なぜその技術を使うのか? / Connehito marche online 20201112
dachi023
0
730
リモートワークの導入から3ヶ月 / Connehito marche online 20200311
dachi023
2
2.8k
急に大量のHTMLが必要になったこと、ありませんか? / BIT VALLEY INSIDE vol8
dachi023
0
7.8k
ママリのweb技術の今と未来 / mamari's front-end present and future
dachi023
2
1.3k
2年運用したサービスのフロントをReactで書き換えたい話
dachi023
5
2k
エンジニアがUIデザインをしてみた話
dachi023
1
1.2k
Other Decks in Programming
See All in Programming
Temporalを取り巻く仕様を整理する
sajikix
0
110
【Go言語】golangci-lintの使い方
tomo1227
0
270
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
1
380
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
生成AIをkintoneに連携してみた
hideg
0
230
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Navigating Team Friction
lara
181
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
For a Future-Friendly Web
brad_frost
173
9.2k
Documentation Writing (for coders)
carmenintech
63
4.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Unsuck your backbone
ammeep
666
57k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Making Projects Easy
brettharned
111
5.7k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
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