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.7k
Other Decks in Programming
See All in Programming
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.1k
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
300
primeNumberでのRBS導入の現在 && RBS::Traceでinline RBSを拡充してみた
mnmandahalf
0
260
Use Perl as Better Shell Script
karupanerura
0
660
PT AI без купюр
v0lka
0
200
Perlで痩せる
yuukis
1
660
Efficiency and Rock 'n’ Roll (Really!)
hollycummins
0
600
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
yasulab
PRO
1
130
FastMCPでMCPサーバー/クライアントを構築してみる
ttnyt8701
2
100
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
220
Interface vs Types ~型推論が過多推論~
hirokiomote
1
230
Blueskyのプラグインを作ってみた
hakkadaikon
1
290
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
KATA
mclloyd
29
14k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.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"ʹΑͦ͞͏ʁ ˠ͏ͪ·͍͍͔ͩͳʙ
࠷ޙʹ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ