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

reduxを使わずにreact+railsする

Yusuke Murata
September 27, 2016

 reduxを使わずにreact+railsする

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

Yusuke Murata

September 27, 2016
Tweet

More Decks by Yusuke Murata

Other Decks in Programming

Transcript

  1. SFEVYΛ࢖ΘͣʹSFBDUSBJMT͢Δ
    ೥݄೔ଜా༎հ

    View full-size slide


  2. ࣗݾ঺հ
    גࣜձࣾ"*τϥϕϧ$50ଜా༎հ
    SFBDU SBJMT BXT TXJGU
    !NVSBUBZVTVLF
    IUUQNVSBUBZVTVLFDPN
    ɹژ౎େֶܦࡁֶ෦ଔۀ
    ʙָఱͷਓࣄʢ৽ଔ࠾༻ʣ
    ʙָఱͷΤϯδχΞ
    ʙ#&45גࣜձࣾ$50
    ˞#&45גࣜձࣾˠגࣜձࣾ"*τϥϕϧʹ໊ࣾมߋ
    ུྺ

    View full-size slide


  3. ࡞͍ͬͯΔαʔϏεʢձࣾʣ
    IUUQTBJUSBWFMKQ

    View full-size slide


  4. ࡞͍ͬͯΔαʔϏεʢձࣾʣ
    IUUQTBJUSBWFMKQ

    View full-size slide


  5. ࡞͍ͬͯΔαʔϏεʢݸਓʣ
    IUUQTCJUMZNVMUJUFBN

    View full-size slide


  6. 3FBDU3BJMTΞϓϦͷมભ
    ɾ·ͣ͸࡞ͬͯΈΑ͏
    ɾϧʔςΟϯά͸3BJMT
    ɾඳը͸શͯ3FBDUʹ೚ͤΔ
    ɾϖʔδίϯϙʔωϯτ
    ɾGMVY΋ͱΓ͋͑ͣ΍ͬͯΈΔ
    ʢSFEVY͸౰࣌ͦΜͳʹϝδϟʔ͡Όͳ͔ͬͨؾ͕͢Δʣ
    ೥݄ʙ

    View full-size slide


  7. 3FBDU3BJMTΞϓϦͷมભ
    ೥݄ʙ
    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

    View full-size slide


  8. 3FBDU3BJMTΞϓϦͷมભ
    ೥݄ʙ
    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







    ϖʔδ఺ηοτɾɾɾʁ

    View full-size slide


  9. 3FBDU3BJMTΞϓϦͷมભ
    ɾϑΝΠϧଟ͗ͯ͢੾Γସ͕͑ͭΒ͍
    ɾͭͷػೳΛ௥Ճ͢Δ͚ͩͰDPNQPOFOUɺBDUJPOɺTUPSFΛ
    ɹߦͬͨΓདྷͨΓ
    ɾGMVYͳ͍͍ͯ͘ΜͪΌ͏ʁ
    ೥݄ʙ

    View full-size slide


  10. 3FBDU3BJMTΞϓϦͷมભ
    ɾ6*ϑϧϦχϡʔΞϧʹ߹Θͤͯ+4෦෼Λॻ͖௚͢
    ɾGMVY΍ΊͯΈΔ
    ɾKBEFಋೖ
    ɾBDUJPO͸DPNQPOFOUͷϝϯόؔ਺ʹ౷߹
    ɾTUPSFͷ୅ΘΓʹੜͷTUBUFΛ࢖͏
    ೥݄ʙ

    View full-size slide


  11. 3FBDU3BJMTΞϓϦͷมભ
    ೥݄ʙ
    .
    ├── 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

    View full-size slide


  12. 3FBDU3BJMTΞϓϦͷมભ
    ೥݄ʙ
    .
    ├── 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





    ఺ηοτˠ఺ηοτʹվળʂ

    View full-size slide


  13. 3FBDU3BJMTΞϓϦͷมભ
    ೥݄ʙ
    ߏ੒Λ΄΅ͦͷ··͍͖ͨͩ·ͨ͠
    IUUQRJJUBDPNNJ[DIJJUFNTDDGGEBCED

    View full-size slide


  14. 3FBDU3BJMTΞϓϦͷมભ
    WJFXϑΝΠϧͷத਎
    WJFXTIPNFJOEFYIUNMIBNM
    = react_component('T.Home')
    ߦ͚ͩ

    View full-size slide


  15. 3FBDU3BJMTΞϓϦͷมભ
    ίϯϙʔωϯτϑΝΠϧͷத਎
    IPNFDPGGFF
    template = require('./templates/home')
    module.exports = MyReact.createClass
    mixins: [LinkedStateMixin, LinkedStateRadioGroupMixin]
    getInitialState: ->
    ...
    getDefaultProps: ->
    ...
    componentDidMount: ->
    ...
    handleActionChange: (index) ->
    ...
    handleSubmit: (e) ->
    ...
    render: ->
    template(_.assign @, @props, @state)

    View full-size slide


  16. 3FBDU3BJMTΞϓϦͷมભ
    ίϯϙʔωϯτϑΝΠϧͷத਎
    IPNFDPGGFF
    template = require('./templates/home')
    module.exports = MyReact.createClass
    mixins: [LinkedStateMixin, LinkedStateRadioGroupMixin]
    getInitialState: ->
    ...
    getDefaultProps: ->
    ...
    componentDidMount: ->
    ...
    handleActionChange: (index) ->
    ...
    handleSubmit: (e) ->
    ...
    render: ->
    template(_.assign @, @props, @state)
    ϑΥʔϜͷૹ৴ॲཧ

    View full-size slide


  17. 3FBDU3BJMTΞϓϦͷมભ
    KBEFϑΝΠϧͷத਎
    IPNFKBEF
    .home
    .home-pc
    form.some__form(onSubmit = handleSubmit)
    input(type = ‘text’, placeholder = ‘Կ͔Λೖྗ͍ͯͩ͘͠͞’)

    View full-size slide


  18. 3FBDU3BJMTΞϓϦͷมભ
    KBEFϑΝΠϧͷத਎
    IPNFKBEF
    .home
    .home-pc
    form.some__form(onSubmit = handleSubmit)
    input(type = ‘text’, placeholder = ‘Կ͔Λೖྗ͍ͯͩ͘͠͞’)
    ίϯϙʔωϯτͷϝϯόʔؔ਺Λ௚઀ݺΜ͡Ό͏

    View full-size slide


  19. 3FBDU3BJMTΞϓϦͷมભ
    ڞ༗෦෼͸ࢠڙίϯϙʔωϯτ

    View full-size slide


  20. 3FBDU3BJMTΞϓϦͷมભ
    ڞ༗෦෼͸ࢠڙίϯϙʔωϯτ
    τοϓϖʔδશମɿIPNFDPGGFF

    View full-size slide


  21. 3FBDU3BJMTΞϓϦͷมભ
    ڞ༗෦෼͸ࢠڙίϯϙʔωϯτ
    ݕࡧ෦෼ɿTFBSDIDPGGFF

    View full-size slide


  22. 3FBDU3BJMTΞϓϦͷมભ
    ڞ༗෦෼͸ࢠڙίϯϙʔωϯτ
    τοϓϖʔδશମɿIPNFDPGGFF

    View full-size slide


  23. 3FBDU3BJMTΞϓϦͷมભ
    ڞ༗෦෼͸ࢠڙίϯϙʔωϯτ
    Ϟʔμϧ෦෼ʢ҉͘͢ΔˍதԝͷശʣɿNPEBMDPGGFF

    View full-size slide


  24. 3FBDU3BJMTΞϓϦͷมભ
    ڞ༗෦෼͸ࢠڙίϯϙʔωϯτ
    ശͷத਎ɿTFBSDIDPGGFF

    View full-size slide


  25. 3FBDU3BJMTΞϓϦͷมભ
    ࢠڙίϯϙʔωϯτ͸఺ηοτ
    .
    ├── app
    │ │ └── stylesheets
    │ │ └── search.scss
    └── js
    └── src
    └── components
    ├── search.coffee
    └── templates
    └── search.jade



    View full-size slide


  26. 3FBDU3BJMTΞϓϦͷมભ
    ɾϑΝΠϧ਺͸͍ͩͿϚγʹͳͬͨ
    ɾػೳΛ௥Ճ͢Δ࣌͸DPNQPOFOUͱKBEF
    ɾ6*Λ͍͡Δ࣌͸KBEFͱTDTT
    ɾΞϓϦ͕େ͖͘ͳ͖ͬͯͨΒ·ͨGMVY࢖͍ͨ͘ͳΔ͔΋ʁ
    ೥݄ʙ

    View full-size slide


  27. 3FBDU3BJMTΞϓϦͷมભ
    ɾϑΝΠϧ਺͸͍ͩͿϚγʹͳͬͨ
    ɾػೳΛ௥Ճ͢Δ࣌͸DPNQPOFOUͱKBEF
    ɾ6*Λ͍͡Δ࣌͸KBEFͱTDTT
    ɾΞϓϦ͕େ͖͘ͳ͖ͬͯͨΒ·ͨGMVY࢖͍ͨ͘ͳΔ͔΋ʁ
    ೥݄ʙ

    View full-size slide


  28. qVYͷ࢖͍Ͳ͜Ζ
    ͲΕ͙Β͍େ͖͘ͳͬͨΒͲ͜Ͱ࢖͏ʁ

    View full-size slide


  29. qVYͷ࢖͍Ͳ͜Ζ
    w EJTQBUDIFSɺBDUJPOɺTUPSFͳͲɺύʔπ୯ҐͰ৭Μͳ
    DPNQPOFOUͱγΣΞͰ͖Δ
    w ංେԽͨ͠DPNQPOFOUʹ٧Ίࠐ·Ε͍ͯΔ΋ͷ͕͍͍ײ͡ʹ
    ෼ׂͰ͖Δ
    GMVYͷ͏·ΈʢΠϝʔδʣ

    View full-size slide


  30. qVYͷ࢖͍Ͳ͜Ζ
    w EJTQBUDIFSɺBDUJPOɺTUPSFͳͲɺύʔπ୯ҐͰ৭Μͳ
    DPNQPOFOUͱγΣΞͰ͖Δ
    w ංେԽͨ͠DPNQPOFOUʹ٧Ίࠐ·Ε͍ͯΔ΋ͷ͕͍͍ײ͡ʹ
    ෼ׂͰ͖Δ
    GMVYͷ͏·ΈʢΠϝʔδʣ

    View full-size slide


  31. qVYͷ࢖͍Ͳ͜Ζ
    w ୯७ͳࢠڙDPNQPOFOUͰҙ֎ͱ͍͚ͪΌ͏ʢBDUJPO୯ମɺ
    TUPSF୯ମͰ࢖͍·Θ͍ͨ͜͠ͱ͕΄΅ͳ͍ʣ
    w ݱঢ়QSPNJTFͰ௚઀ϦΫΤετ౤͛ͯͪ͝Όͪ͝Όॻ͍ͯΔͷ
    ͰɺBDUJPOΛ"1*ϥούʔతʹ࢖͏ʁ
    w ؔ਺୯ҐͰڞ༗͍ͨ࣌͠͸VUJMTDPGGFFʹͱΓ͋͑ͣҠ͢
    ύʔπ୯ҐͷγΣΞ

    View full-size slide


  32. qVYͷ࢖͍Ͳ͜Ζ
    w EJTQBUDIFSɺBDUJPOɺTUPSFͳͲɺύʔπ୯ҐͰ৭Μͳ
    DPNQPOFOUͱγΣΞͰ͖Δ
    w ංେԽͨ͠DPNQPOFOUʹ٧Ίࠐ·Ε͍ͯΔ΋ͷ͕͍͍ײ͡
    ʹ෼ׂͰ͖Δ
    GMVYͷ͏·ΈʢΠϝʔδʣ

    View full-size slide


  33. qVYͷ࢖͍Ͳ͜Ζ
    w ௕ա͗ΔϑΝΠϧWTଟ͗͢ΔϑΝΠϧͷτϨʔυΦϑ
    w SFRVJSFͯ͠Δ΍ͭΛॻ͍ͪΌ͑͹GMVY΋ϑΝΠϧͰΑ͔ͬͨ
    ΍Μ
    w ͨͩࣅͨΑ͏ͳ͜ͱΛBDUJPOͱTUPSFʹճॻ͘ΊΜͲ͕͞
    ϑΝΠϧͷ෼ׂ

    View full-size slide


  34. SFEVYͷ୆಄
    ೥ʙ
    w GMVY࣮૷͸SFEVYҰ୒ײ
    IUUQEIBUFOBOFKQUPNPZB

    View full-size slide


  35. SFEVYͷ୆಄
    ೥ʙ
    w GMVYͷTUPSFʹॻ͍ͯͨϩδοΫ͕SFEVDFSʹҠΔͬΆ͍
    w BDUJPOʹॻ໊͍ͨલΛSFEVDFSͷTXJUDIDBTFʹ΋͔͍ͬॻ
    ͘·ͲΖͬ͜͠͞͸݈ࡏͬΆ͍
    w NJEEMFXBSFͪΌΜͱ࢖͑͹៉ྷʹॻ͚ͦ͏ͳͱ͜Ζ͸ͪΒ΄
    Β

    View full-size slide


  36. ݁࿦
    ݱࡏ
    w ೥Ҏ্։ൃΛଓ͚ͯɺͦͦ͜͜ίʔυ͸େ͖͘ͳͬͯΔ
    w ݱࡏίϯϙʔωϯτɺҰ൪௕͍ϑΝΠϧͰߦ͙Β͍
    w ϖʔδίϯϙʔωϯτཁॴͰࢠڙίϯϙʔωϯτ࡞ઓ͕͍
    ͍ײ͡ͰɺSFEVYͰઃܭ͕ܶతʹΑ͘ͳΔΠϝʔδ͸͋Μ·Γ
    ͳ͍
    w 41"ʹ͸Αͦ͞͏ʁ
    ˠ͏ͪ͸·͍͍͔ͩͳʙ

    View full-size slide


  37. ࠷ޙʹ
    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View full-size slide