reduxを使わずにreact+railsする

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