Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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 ᶃ ᶄ ᶅ ᶆ ᶇ ᶈ ᶉ ϖʔδ఺ηοτɾɾɾʁ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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 ᶃ ᶄ ᶅ ᶆ ᶇ ఺ηοτˠ఺ηοτʹվળʂ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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)

Slide 16

Slide 16 text

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) ϑΥʔϜͷૹ৴ॲཧ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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