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.8k
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
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
380
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
Advanced App Shrinking Techniques
cbeyls
2
150
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Rust.Nagoya #1
codemountains
0
170
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
iOSアプリでクリップボードにコピーしたことをユーザーに伝えるちょうど良いフィードバックを探す
ski
0
100
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
CSC307 Lecture 05
javiergs
PRO
0
210
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Navigating Team Friction
lara
181
13k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
GitHub's CSS Performance
jonrohan
1026
450k
Rails Girls Zürich Keynote
gr2m
93
13k
Designing the Hi-DPI Web
ddemaree
276
34k
Infographics Made Easy
chrislema
238
18k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
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"ʹΑͦ͞͏ʁ ˠ͏ͪ·͍͍͔ͩͳʙ
࠷ޙʹ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ