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
410
beginner_react_flux
dachi023
July 29, 2016
Tweet
Share
More Decks by dachi023
See All by dachi023
チーム開発を円滑に進めるためのOSS / Lightning TechTalks 20231102
dachi023
0
390
なぜその技術を使うのか? / Connehito marche online 20201112
dachi023
0
780
リモートワークの導入から3ヶ月 / Connehito marche online 20200311
dachi023
2
2.9k
急に大量のHTMLが必要になったこと、ありませんか? / BIT VALLEY INSIDE vol8
dachi023
0
7.9k
ママリのweb技術の今と未来 / mamari's front-end present and future
dachi023
2
1.4k
2年運用したサービスのフロントをReactで書き換えたい話
dachi023
5
2k
エンジニアがUIデザインをしてみた話
dachi023
1
1.3k
Other Decks in Programming
See All in Programming
バイセルでの AI を用いた開発の取り組み ~ Devin, Cursor の活用事例・知見共有 ~
umaidashi
0
130
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
240
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
300
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
430
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
190
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
9
2.7k
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
230
はじめてのIssueOps - GitHub Actionsで実現するコメント駆動オペレーション
tmknom
5
1.7k
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
170
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
370
Swift Testingのモチベを上げたい
stoticdev
2
220
Introduction to C Extensions
sylph01
3
130
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
429
65k
Visualization
eitanlees
146
15k
A Philosophy of Restraint
colly
203
16k
Designing for Performance
lara
605
68k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
BBQ
matthewcrist
87
9.5k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Statistics for Hackers
jakevdp
797
220k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
The Cult of Friendly URLs
andyhume
78
6.2k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
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