reduxを使わずにreact+railsする

2016/09/27 React.js meetup #4 LT発表資料
http://reactjs-meetup.connpass.com/event/39793/

Transcript

1. SFEVYΛ࢖ΘͣʹSFBDU SBJMT͢Δ ೥݄೔
   ଜా༎հ
2.  ࣗݾ঺հ גࣜձࣾ"*τϥϕϧ
   $50
   ଜా༎հ
   SFBDU
   SBJMT
   BXT
   TXJGU !NVSBUBZVTVLF IUUQNVSBUBZVTVLFDPN ɹ
   ژ౎େֶܦࡁֶ෦ଔۀ
   ʙ
   ָఱͷਓࣄʢ৽ଔ࠾༻ʣ
   ʙ
   ָఱͷΤϯδχΞ
   ʙ
   #&45גࣜձࣾ$50
   ˞#&45גࣜձࣾˠגࣜձࣾ"*τϥϕϧʹ໊ࣾมߋ ུྺ
3.  ࡞͍ͬͯΔαʔϏεʢձࣾʣ IUUQTBJUSBWFMKQ
4.  ࡞͍ͬͯΔαʔϏεʢձࣾʣ IUUQTBJUSBWFMKQ
5.  ࡞͍ͬͯΔαʔϏεʢݸਓʣ IUUQTCJUMZNVMUJUFBN
6.  3FBDU 3BJMTΞϓϦͷมભ ɾ·ͣ͸࡞ͬͯΈΑ͏
   ɾϧʔςΟϯά͸3BJMT
   ɾඳը͸શͯ3FBDUʹ೚ͤΔ
   ɾϖʔδίϯϙʔωϯτ
   ɾGMVY΋ͱΓ͋͑ͣ΍ͬͯΈΔ
   ʢSFEVY͸౰࣌ͦΜͳʹϝδϟʔ͡Όͳ͔ͬͨؾ͕͢Δʣ ೥݄ʙ
7.  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
8.  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 ᶃ ᶄ ᶅ ᶆ ᶇ ᶈ ᶉ ϖʔδ఺ηοτɾɾɾʁ
9.  3FBDU 3BJMTΞϓϦͷมભ ɾϑΝΠϧଟ͗ͯ͢੾Γସ͕͑ͭΒ͍
   ɾͭͷػೳΛ௥Ճ͢Δ͚ͩͰDPNQPOFOUɺBDUJPOɺTUPSFΛ
   ɹߦͬͨΓདྷͨΓ
   ɾGMVYͳ͍͍ͯ͘ΜͪΌ͏ʁ ೥݄ʙ
10.  3FBDU 3BJMTΞϓϦͷมભ ɾ6*ϑϧϦχϡʔΞϧʹ߹Θͤͯ+4෦෼Λॻ͖௚͢
    ɾGMVY΍ΊͯΈΔ
    ɾKBEFಋೖ
    ɾBDUJPO͸DPNQPOFOUͷϝϯόؔ਺ʹ౷߹
    ɾTUPSFͷ୅ΘΓʹੜͷTUBUFΛ࢖͏ ೥݄ʙ
11.  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
12.  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 ᶃ ᶄ ᶅ ᶆ ᶇ ఺ηοτˠ఺ηοτʹվળʂ
13.  3FBDU 3BJMTΞϓϦͷมભ ೥݄ʙ ߏ੒Λ΄΅ͦͷ··͍͖ͨͩ·ͨ͠
    IUUQRJJUBDPNNJ[DIJJUFNTDDGGEBCED
14.  3FBDU 3BJMTΞϓϦͷมભ WJFXϑΝΠϧͷத਎
    WJFXTIPNFJOEFYIUNMIBNM = react_component('T.Home') ߦ͚ͩ
15.  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)
16.  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) ϑΥʔϜͷૹ৴ॲཧ
17.  3FBDU 3BJMTΞϓϦͷมભ KBEFϑΝΠϧͷத਎
    IPNFKBEF .home .home-pc form.some__form(onSubmit = handleSubmit) input(type = ‘text’, placeholder = ‘Կ͔Λೖྗ͍ͯͩ͘͠͞’)
18.  3FBDU 3BJMTΞϓϦͷมભ KBEFϑΝΠϧͷத਎
    IPNFKBEF .home .home-pc form.some__form(onSubmit = handleSubmit) input(type = ‘text’, placeholder = ‘Կ͔Λೖྗ͍ͯͩ͘͠͞’) ίϯϙʔωϯτͷϝϯόʔؔ਺Λ௚઀ݺΜ͡Ό͏
19.  3FBDU 3BJMTΞϓϦͷมભ ڞ༗෦෼͸ࢠڙίϯϙʔωϯτ
20.  3FBDU 3BJMTΞϓϦͷมભ ڞ༗෦෼͸ࢠڙίϯϙʔωϯτ τοϓϖʔδશମɿIPNFDPGGFF
21.  3FBDU 3BJMTΞϓϦͷมભ ڞ༗෦෼͸ࢠڙίϯϙʔωϯτ ݕࡧ෦෼ɿTFBSDIDPGGFF
22.  3FBDU 3BJMTΞϓϦͷมભ ڞ༗෦෼͸ࢠڙίϯϙʔωϯτ τοϓϖʔδશମɿIPNFDPGGFF
23.  3FBDU 3BJMTΞϓϦͷมભ ڞ༗෦෼͸ࢠڙίϯϙʔωϯτ Ϟʔμϧ෦෼ʢ҉͘͢ΔˍதԝͷശʣɿNPEBMDPGGFF
24.  3FBDU 3BJMTΞϓϦͷมભ ڞ༗෦෼͸ࢠڙίϯϙʔωϯτ ശͷத਎ɿTFBSDIDPGGFF
25.  3FBDU 3BJMTΞϓϦͷมભ ࢠڙίϯϙʔωϯτ͸఺ηοτ . ├── app │ │ └── stylesheets │ │ └── search.scss └── js └── src └── components ├── search.coffee └── templates └── search.jade ᶃ ᶄ ᶅ
26.  3FBDU 3BJMTΞϓϦͷมભ ɾϑΝΠϧ਺͸͍ͩͿϚγʹͳͬͨ
    ɾػೳΛ௥Ճ͢Δ࣌͸DPNQPOFOUͱKBEF
    ɾ6*Λ͍͡Δ࣌͸KBEFͱTDTT
    ɾΞϓϦ͕େ͖͘ͳ͖ͬͯͨΒ·ͨGMVY࢖͍ͨ͘ͳΔ͔΋ʁ ೥݄ʙ
27.  3FBDU 3BJMTΞϓϦͷมભ ɾϑΝΠϧ਺͸͍ͩͿϚγʹͳͬͨ
    ɾػೳΛ௥Ճ͢Δ࣌͸DPNQPOFOUͱKBEF
    ɾ6*Λ͍͡Δ࣌͸KBEFͱTDTT
    ɾΞϓϦ͕େ͖͘ͳ͖ͬͯͨΒ·ͨGMVY࢖͍ͨ͘ͳΔ͔΋ʁ ೥݄ʙ
28.  qVYͷ࢖͍Ͳ͜Ζ ͲΕ͙Β͍େ͖͘ͳͬͨΒͲ͜Ͱ࢖͏ʁ
29.  qVYͷ࢖͍Ͳ͜Ζ w EJTQBUDIFSɺBDUJPOɺTUPSFͳͲɺύʔπ୯ҐͰ৭Μͳ DPNQPOFOUͱγΣΞͰ͖Δ
    w ංେԽͨ͠DPNQPOFOUʹ٧Ίࠐ·Ε͍ͯΔ΋ͷ͕͍͍ײ͡ʹ ෼ׂͰ͖Δ GMVYͷ͏·ΈʢΠϝʔδʣ
30.  qVYͷ࢖͍Ͳ͜Ζ w EJTQBUDIFSɺBDUJPOɺTUPSFͳͲɺύʔπ୯ҐͰ৭Μͳ DPNQPOFOUͱγΣΞͰ͖Δ
    w ංେԽͨ͠DPNQPOFOUʹ٧Ίࠐ·Ε͍ͯΔ΋ͷ͕͍͍ײ͡ʹ ෼ׂͰ͖Δ GMVYͷ͏·ΈʢΠϝʔδʣ
31.  qVYͷ࢖͍Ͳ͜Ζ w ୯७ͳࢠڙDPNQPOFOUͰҙ֎ͱ͍͚ͪΌ͏ʢBDUJPO୯ମɺ TUPSF୯ମͰ࢖͍·Θ͍ͨ͜͠ͱ͕΄΅ͳ͍ʣ
    w ݱঢ়QSPNJTFͰ௚઀ϦΫΤετ౤͛ͯͪ͝Όͪ͝Όॻ͍ͯΔͷ ͰɺBDUJPOΛ"1*ϥούʔతʹ࢖͏ʁ
    w ؔ਺୯ҐͰڞ༗͍ͨ࣌͠͸VUJMTDPGGFFʹͱΓ͋͑ͣҠ͢ ύʔπ୯ҐͷγΣΞ
32.  qVYͷ࢖͍Ͳ͜Ζ w EJTQBUDIFSɺBDUJPOɺTUPSFͳͲɺύʔπ୯ҐͰ৭Μͳ DPNQPOFOUͱγΣΞͰ͖Δ
    w ංେԽͨ͠DPNQPOFOUʹ٧Ίࠐ·Ε͍ͯΔ΋ͷ͕͍͍ײ͡ ʹ෼ׂͰ͖Δ GMVYͷ͏·ΈʢΠϝʔδʣ
33.  qVYͷ࢖͍Ͳ͜Ζ w ௕ա͗ΔϑΝΠϧ
    WT
    ଟ͗͢ΔϑΝΠϧͷτϨʔυΦϑ
    w SFRVJSFͯ͠Δ΍ͭΛॻ͍ͪΌ͑͹GMVY΋ϑΝΠϧͰΑ͔ͬͨ ΍Μ
    w ͨͩࣅͨΑ͏ͳ͜ͱΛBDUJPOͱTUPSFʹճॻ͘ΊΜͲ͕͞ ϑΝΠϧͷ෼ׂ
34.  SFEVYͷ୆಄ ೥ʙ w GMVY࣮૷͸SFEVYҰ୒ײ IUUQEIBUFOBOFKQUPNPZB
35.  SFEVYͷ୆಄ ೥ʙ w GMVYͷTUPSFʹॻ͍ͯͨϩδοΫ͕SFEVDFSʹҠΔͬΆ͍
    w BDUJPOʹॻ໊͍ͨલΛSFEVDFSͷTXJUDIDBTFʹ΋͔͍ͬॻ ͘·ͲΖͬ͜͠͞͸݈ࡏͬΆ͍
    w NJEEMFXBSFͪΌΜͱ࢖͑͹៉ྷʹॻ͚ͦ͏ͳͱ͜Ζ͸ͪΒ΄ Β
36.  ݁࿦ ݱࡏ w ೥Ҏ্։ൃΛଓ͚ͯɺͦͦ͜͜ίʔυ͸େ͖͘ͳͬͯΔ
    w ݱࡏίϯϙʔωϯτɺҰ൪௕͍ϑΝΠϧͰߦ͙Β͍
    w ϖʔδίϯϙʔωϯτ ཁॴͰࢠڙίϯϙʔωϯτ࡞ઓ͕͍ ͍ײ͡ͰɺSFEVYͰઃܭ͕ܶతʹΑ͘ͳΔΠϝʔδ͸͋Μ·Γ ͳ͍
    w 41"ʹ͸Αͦ͞͏ʁ ˠ
    ͏ͪ͸·͍͍͔ͩͳʙ
37.  ࠷ޙʹ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ