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
reduxを使わずにreact+railsする
Search
Yusuke Murata
September 27, 2016
Programming
3
3.9k
reduxを使わずにreact+railsする
2016/09/27 React.js meetup #4 LT発表資料
http://reactjs-meetup.connpass.com/event/39793/
Yusuke Murata
September 27, 2016
Tweet
Share
More Decks by Yusuke Murata
See All by Yusuke Murata
RxSwiftで作るAPIラッパーのパターン
muratayusuke
1
1.6k
Other Decks in Programming
See All in Programming
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
480
Amazon Neptuneで始めてみるグラフDB-OpenSearchによるグラフの全文検索-
satoshi256kbyte
4
330
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.4k
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
現場で役立つモデリング 超入門
masuda220
PRO
13
2.9k
Java ジェネリクス入門 2024
nagise
0
600
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
330
Server Driven Compose With Firebase
skydoves
0
400
Identifying User Idenity
moro
6
7.8k
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.5k
Vue.js学習の振り返り
hiro_xre
2
130
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
132
8.9k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Done Done
chrislema
181
16k
Bash Introduction
62gerente
608
210k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
Happy Clients
brianwarren
97
6.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Transcript
SFEVYΛΘͣʹSFBDU SBJMT͢Δ ݄ଜా༎հ
ࣗݾհ גࣜձࣾ"*τϥϕϧ$50ଜా༎հ SFBDU SBJMT BXT TXJGU !NVSBUBZVTVLF IUUQNVSBUBZVTVLFDPN ɹژେֶܦࡁֶ෦ଔۀ
ʙָఱͷਓࣄʢ৽ଔ࠾༻ʣ ʙָఱͷΤϯδχΞ ʙ#&45גࣜձࣾ$50 ˞#&45גࣜձࣾˠגࣜձࣾ"*τϥϕϧʹ໊ࣾมߋ ུྺ
࡞͍ͬͯΔαʔϏεʢձࣾʣ IUUQTBJUSBWFMKQ
࡞͍ͬͯΔαʔϏεʢձࣾʣ IUUQTBJUSBWFMKQ
࡞͍ͬͯΔαʔϏεʢݸਓʣ IUUQTCJUMZNVMUJUFBN
3FBDU 3BJMTΞϓϦͷมભ ɾ·ͣ࡞ͬͯΈΑ͏ ɾϧʔςΟϯά3BJMT ɾඳըશͯ3FBDUʹͤΔ ɾϖʔδίϯϙʔωϯτ ɾGMVYͱΓ͋͑ͣͬͯΈΔ ʢSFEVY࣌ͦΜͳʹϝδϟʔ͡Όͳ͔ͬͨؾ͕͢Δʣ ݄ʙ
3FBDU 3BJMTΞϓϦͷมભ ݄ʙ app ├── assets │ ├── javascripts
│ │ ├── actions │ │ │ └── homeActions.js.coffee │ │ ├── components │ │ │ └── home.js.jsx.coffee │ │ ├── dispatcher │ │ │ ├── dispatcher.js.coffee │ │ │ └── homeDispatcher.js.coffee │ │ └── stores │ │ ├── events.js.coffee │ │ ├── homeStore.js.coffee │ │ └── store.js.coffee │ └── stylesheets │ └── home.scss ├── controllers/home_controller.rb └── views/home/index.html.haml
3FBDU 3BJMTΞϓϦͷมભ ݄ʙ app ├── assets │ ├── javascripts
│ │ ├── actions │ │ │ └── homeActions.js.coffee │ │ ├── components │ │ │ └── home.js.jsx.coffee │ │ ├── dispatcher │ │ │ ├── dispatcher.js.coffee │ │ │ └── homeDispatcher.js.coffee │ │ └── stores │ │ ├── events.js.coffee │ │ ├── homeStore.js.coffee │ │ └── store.js.coffee │ └── stylesheets │ └── home.scss ├── controllers/home_controller.rb └── views/home/index.html.haml ᶃ ᶄ ᶅ ᶆ ᶇ ᶈ ᶉ ϖʔδηοτɾɾɾʁ
3FBDU 3BJMTΞϓϦͷมભ ɾϑΝΠϧଟ͗ͯ͢Γସ͕͑ͭΒ͍ ɾͭͷػೳΛՃ͢Δ͚ͩͰDPNQPOFOUɺBDUJPOɺTUPSFΛ ɹߦͬͨΓདྷͨΓ ɾGMVYͳ͍͍ͯ͘ΜͪΌ͏ʁ ݄ʙ
3FBDU 3BJMTΞϓϦͷมભ ɾ6*ϑϧϦχϡʔΞϧʹ߹Θͤͯ+4෦Λॻ͖͢ ɾGMVYΊͯΈΔ ɾKBEFಋೖ ɾBDUJPODPNQPOFOUͷϝϯόؔʹ౷߹ ɾTUPSFͷΘΓʹੜͷTUBUFΛ͏ ݄ʙ
3FBDU 3BJMTΞϓϦͷมભ ݄ʙ . ├── app │ ├── assets
│ │ ├── javascripts │ │ │ └── application.js │ │ └── stylesheets │ │ └── home.scss │ ├── controllers │ │ └── home_controller.rb │ └── views │ └── home │ └── index.html.haml └── js └── src └── components ├── home.coffee └── templates └── home.jade
3FBDU 3BJMTΞϓϦͷมભ ݄ʙ . ├── app │ ├── assets
│ │ ├── javascripts │ │ │ └── application.js │ │ └── stylesheets │ │ └── home.scss │ ├── controllers │ │ └── home_controller.rb │ └── views │ └── home │ └── index.html.haml └── js └── src └── components ├── home.coffee └── templates └── home.jade ᶃ ᶄ ᶅ ᶆ ᶇ ηοτˠηοτʹվળʂ
3FBDU 3BJMTΞϓϦͷมભ ݄ʙ ߏΛ΄΅ͦͷ··͍͖ͨͩ·ͨ͠ IUUQRJJUBDPNNJ[DIJJUFNTDDGGEBCED
3FBDU 3BJMTΞϓϦͷมભ WJFXϑΝΠϧͷத WJFXTIPNFJOEFYIUNMIBNM = react_component('T.Home') ߦ͚ͩ
3FBDU 3BJMTΞϓϦͷมભ ίϯϙʔωϯτϑΝΠϧͷத IPNFDPGGFF template = require('./templates/home') module.exports =
MyReact.createClass mixins: [LinkedStateMixin, LinkedStateRadioGroupMixin] getInitialState: -> ... getDefaultProps: -> ... componentDidMount: -> ... handleActionChange: (index) -> ... handleSubmit: (e) -> ... render: -> template(_.assign @, @props, @state)
3FBDU 3BJMTΞϓϦͷมભ ίϯϙʔωϯτϑΝΠϧͷத IPNFDPGGFF template = require('./templates/home') module.exports =
MyReact.createClass mixins: [LinkedStateMixin, LinkedStateRadioGroupMixin] getInitialState: -> ... getDefaultProps: -> ... componentDidMount: -> ... handleActionChange: (index) -> ... handleSubmit: (e) -> ... render: -> template(_.assign @, @props, @state) ϑΥʔϜͷૹ৴ॲཧ
3FBDU 3BJMTΞϓϦͷมભ KBEFϑΝΠϧͷத IPNFKBEF .home .home-pc form.some__form(onSubmit = handleSubmit)
input(type = ‘text’, placeholder = ‘Կ͔Λೖྗ͍ͯͩ͘͠͞’)
3FBDU 3BJMTΞϓϦͷมભ KBEFϑΝΠϧͷத IPNFKBEF .home .home-pc form.some__form(onSubmit = handleSubmit)
input(type = ‘text’, placeholder = ‘Կ͔Λೖྗ͍ͯͩ͘͠͞’) ίϯϙʔωϯτͷϝϯόʔؔΛݺΜ͡Ό͏
3FBDU 3BJMTΞϓϦͷมભ ڞ༗෦ࢠڙίϯϙʔωϯτ
3FBDU 3BJMTΞϓϦͷมભ ڞ༗෦ࢠڙίϯϙʔωϯτ τοϓϖʔδશମɿIPNFDPGGFF
3FBDU 3BJMTΞϓϦͷมભ ڞ༗෦ࢠڙίϯϙʔωϯτ ݕࡧ෦ɿTFBSDIDPGGFF
3FBDU 3BJMTΞϓϦͷมભ ڞ༗෦ࢠڙίϯϙʔωϯτ τοϓϖʔδશମɿIPNFDPGGFF
3FBDU 3BJMTΞϓϦͷมભ ڞ༗෦ࢠڙίϯϙʔωϯτ Ϟʔμϧ෦ʢ҉͘͢ΔˍதԝͷശʣɿNPEBMDPGGFF
3FBDU 3BJMTΞϓϦͷมભ ڞ༗෦ࢠڙίϯϙʔωϯτ ശͷதɿTFBSDIDPGGFF
3FBDU 3BJMTΞϓϦͷมભ ࢠڙίϯϙʔωϯτηοτ . ├── app │ │ └──
stylesheets │ │ └── search.scss └── js └── src └── components ├── search.coffee └── templates └── search.jade ᶃ ᶄ ᶅ
3FBDU 3BJMTΞϓϦͷมભ ɾϑΝΠϧ͍ͩͿϚγʹͳͬͨ ɾػೳΛՃ͢Δ࣌DPNQPOFOUͱKBEF ɾ6*Λ͍͡Δ࣌KBEFͱTDTT ɾΞϓϦ͕େ͖͘ͳ͖ͬͯͨΒ·ͨGMVY͍ͨ͘ͳΔ͔ʁ ݄ʙ
3FBDU 3BJMTΞϓϦͷมભ ɾϑΝΠϧ͍ͩͿϚγʹͳͬͨ ɾػೳΛՃ͢Δ࣌DPNQPOFOUͱKBEF ɾ6*Λ͍͡Δ࣌KBEFͱTDTT ɾΞϓϦ͕େ͖͘ͳ͖ͬͯͨΒ·ͨGMVY͍ͨ͘ͳΔ͔ʁ ݄ʙ
qVYͷ͍Ͳ͜Ζ ͲΕ͙Β͍େ͖͘ͳͬͨΒͲ͜Ͱ͏ʁ
qVYͷ͍Ͳ͜Ζ w EJTQBUDIFSɺBDUJPOɺTUPSFͳͲɺύʔπ୯ҐͰ৭Μͳ DPNQPOFOUͱγΣΞͰ͖Δ w ංେԽͨ͠DPNQPOFOUʹ٧Ίࠐ·Ε͍ͯΔͷ͕͍͍ײ͡ʹ ׂͰ͖Δ GMVYͷ͏·ΈʢΠϝʔδʣ
qVYͷ͍Ͳ͜Ζ w EJTQBUDIFSɺBDUJPOɺTUPSFͳͲɺύʔπ୯ҐͰ৭Μͳ DPNQPOFOUͱγΣΞͰ͖Δ w ංେԽͨ͠DPNQPOFOUʹ٧Ίࠐ·Ε͍ͯΔͷ͕͍͍ײ͡ʹ ׂͰ͖Δ GMVYͷ͏·ΈʢΠϝʔδʣ
qVYͷ͍Ͳ͜Ζ w ୯७ͳࢠڙDPNQPOFOUͰҙ֎ͱ͍͚ͪΌ͏ʢBDUJPO୯ମɺ TUPSF୯ମͰ͍·Θ͍ͨ͜͠ͱ͕΄΅ͳ͍ʣ w ݱঢ়QSPNJTFͰϦΫΤετ͛ͯͪ͝Όͪ͝Όॻ͍ͯΔͷ ͰɺBDUJPOΛ"1*ϥούʔతʹ͏ʁ w ؔ୯ҐͰڞ༗͍ͨ࣌͠VUJMTDPGGFFʹͱΓ͋͑ͣҠ͢
ύʔπ୯ҐͷγΣΞ
qVYͷ͍Ͳ͜Ζ w EJTQBUDIFSɺBDUJPOɺTUPSFͳͲɺύʔπ୯ҐͰ৭Μͳ DPNQPOFOUͱγΣΞͰ͖Δ w ංେԽͨ͠DPNQPOFOUʹ٧Ίࠐ·Ε͍ͯΔͷ͕͍͍ײ͡ ʹׂͰ͖Δ GMVYͷ͏·ΈʢΠϝʔδʣ
qVYͷ͍Ͳ͜Ζ w ա͗ΔϑΝΠϧWTଟ͗͢ΔϑΝΠϧͷτϨʔυΦϑ w SFRVJSFͯ͠ΔͭΛॻ͍ͪΌ͑GMVYϑΝΠϧͰΑ͔ͬͨ Μ w ͨͩࣅͨΑ͏ͳ͜ͱΛBDUJPOͱTUPSFʹճॻ͘ΊΜͲ͕͞ ϑΝΠϧͷׂ
SFEVYͷ಄ ʙ w GMVY࣮SFEVYҰײ IUUQEIBUFOBOFKQUPNPZB
SFEVYͷ಄ ʙ w GMVYͷTUPSFʹॻ͍ͯͨϩδοΫ͕SFEVDFSʹҠΔͬΆ͍ w BDUJPOʹॻ໊͍ͨલΛSFEVDFSͷTXJUDIDBTFʹ͔͍ͬॻ ͘·ͲΖ݈ͬ͜͠͞ࡏͬΆ͍ w NJEEMFXBSFͪΌΜͱ͑៉ྷʹॻ͚ͦ͏ͳͱ͜ΖͪΒ΄
Β
݁ ݱࡏ w Ҏ্։ൃΛଓ͚ͯɺͦͦ͜͜ίʔυେ͖͘ͳͬͯΔ w ݱࡏίϯϙʔωϯτɺҰ൪͍ϑΝΠϧͰߦ͙Β͍ w ϖʔδίϯϙʔωϯτ ཁॴͰࢠڙίϯϙʔωϯτ࡞ઓ͕͍
͍ײ͡ͰɺSFEVYͰઃܭ͕ܶతʹΑ͘ͳΔΠϝʔδ͋Μ·Γ ͳ͍ w 41"ʹΑͦ͞͏ʁ ˠ͏ͪ·͍͍͔ͩͳʙ
࠷ޙʹ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ