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
4k
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
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.5k
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.2k
CSC305 Lecture 12
javiergs
PRO
0
240
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.2k
CSC305 Lecture 09
javiergs
PRO
0
320
マンガアプリViewerの大画面対応を考える
kk__777
0
380
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
16k
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
320
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
910
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
750
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
310
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Designing for Performance
lara
610
69k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
What's in a price? How to price your products and services
michaelherold
246
12k
Building an army of robots
kneath
305
46k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Side Projects
sachag
455
43k
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"ʹΑͦ͞͏ʁ ˠ͏ͪ·͍͍͔ͩͳʙ
࠷ޙʹ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ