Upgrade to Pro — share decks privately, control downloads, hide ads and more …

reduxを使わずにreact+railsする

2b9ba93ec8bfedf143fbd4fc23eac269?s=47 Yusuke Murata
September 27, 2016

 reduxを使わずにreact+railsする

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

2b9ba93ec8bfedf143fbd4fc23eac269?s=128

Yusuke Murata

September 27, 2016
Tweet

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.  ࠷ޙʹ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ