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.8k
Other Decks in Programming
See All in Programming
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
600
Team operations that are not burdened by SRE
kazatohiei
1
290
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
260
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
0
470
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
720
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
3
1.4k
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
480
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
620
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Adopting Sorbet at Scale
ufuk
77
9.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Become a Pro
speakerdeck
PRO
28
5.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
A designer walks into a library…
pauljervisheath
207
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
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"ʹΑͦ͞͏ʁ ˠ͏ͪ·͍͍͔ͩͳʙ
࠷ޙʹ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ