ReactでDecoratorsを使う

 ReactでDecoratorsを使う

React Beer Bash! (https://react-beer-bash.connpass.com/event/78112/) でLTしました

5cf7e9533a457726cd51232e06c1da9a?s=128

Masashi Hirano

March 07, 2018
Tweet

Transcript

  1. ReactͰDecoratorsΛ࢖͏ 2018/03/07 React Beer Bash ฏ໺ণ࢜ / @shisama

  2. { "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter":

    "@shisama_", "github": "shisama" } }
  3. ͜ͷൃදʹ͍ͭͯ • JavaScriptͷ࠷ۙػೳΛઌऔΓͯ͠ReactͰ࢖ ͏ࣄྫΛ঺հ • React࢖ͬͨ͜ͱ͋Δਓ޲͚ • ίʔυΛ؆ܿʹॻ͖͍ͨਓ޲͚

  4. Agenda • Decoratorsͷ঺հ • Decoratorsͷ࣮ྫ

  5. Decoratorsͱ͸ • EcmaScriptυϥϑτ(stage-2)ͷػೳ • ॲཧΛ௥Ճͨ͠Γஔ͖׵͑ͨΓͰ͖Δ • @ϚʔΫΛ෇͚ͨهड़ • JavaͷΞϊςʔγϣϯ΍PythonͷσίϨʔ λʔΈ͍ͨͳهड़

    • ໊લͷ༝དྷ͸GoFͷσίϨʔλʔύλʔϯ
  6. ྫ͑͹ϓϩύςΟͷ௥Ճ function name(name) { return function (target) { target.prototype.name =

    name; } } ΫϥεʹOBNFͱ͍͏ϓϩύςΟΛ௥Ճ͢Δ ؔ਺Λఆٛ
  7. @name(“React") class App extends React.Component { ɹrender() { return (

    <div> Hello, {this.name} </div> ); } } ReactDOM.render(<App />, document.getElementById('app')); ͜ͷίϯϙʔωϯτࣗମ͸OBNFͱ͍ ͏ϓϩύςΟ͸͍࣋ͬͯͳ͍ σίϨʔλʔ
  8. ϨϯμϦϯά݁Ռ Hello, React σίϨʔλʔؔ਺ʹΑͬͯOBNFͷϓ ϩύςΟ͕௥Ճ͞Εͨ

  9. DecoratorsΛ࢖͏ํ๏ • Babel • babel-plugin-transform-decorators-legacy Λ࢖͏ɻ • TypeScript • tsc

    --experimentalDecorators
  10. Decoratorsͷࣄྫ

  11. react-redux https://github.com/reactjs/react-redux

  12. react-redux • Reduxͱ͸stateΛ؅ཧ͢ΔϥΠϒϥϦ • react-redux͸ReactͱReduxΛͭͳ͛ΔϥΠϒ ϥϦ

  13. react-redux class MyFancyComponent extends React.Component { // ׂѪ } const

    mapStateToProps = (state) => { return { users: state.users }; } const mapDispatchToProps = (dispatch, ownProps) { return {// ׂѪ} } export default connect(mapStateToProps, mapDispatchToProps)(MyFancyComponent) SFBDUSFEVYͷDPOOFDUؔ਺ɻ Α͘ݟΔ࢖͍ํ
  14. react-redux @connect(mapStateToProps, mapDispatchToProps) class MyFancyComponent extends React.Component { // ׂѪ

    } const mapStateToProps = (state) => { return { users: state.users }; } const mapDispatchToProps = (dispatch, ownProps) { return {// ׂѪ} } DPOOFDUΛσίϨʔλʔͱͯ͠$MBTT ʹ෇͚Δ͜ͱ͕Ͱ͖Δ
  15. MobX https://mobx.js.org/best/decorators.html

  16. MobX • ReduxΈ͍ͨʹstateΛ؅ཧ͢ΔϥΠϒϥϦ • ReduxΑΓ؆ܿʹॻ͚Δҹ৅

  17. MobX class Timer { constructor() { extendObservable(this, { start: Date.now(),

    current: Date.now(), get elapsedTime() { return (this.current - this.start) }, tick: action(function() { this.current = Date.now() }) }) } } FYUFOE0CTFSWBCMFؔ਺Λ࢖ͬͯ PCTFSWBCMFʹ͍ͯ͠Δ
  18. MobX class Timer { @observable start = Date.now(); @observable current

    = Date.now(); @computed get elapsedTime() { return (this.current - this.start) } @action tick() { this.current = Date.now() } } σίϨʔλʔΛ࢖ͬͯ؆ܿʹॻ͚Δ
  19. MobX https://mobx.js.org/best/decorators.html ެࣜʹࡌ͍ͬͯΔ

  20. react-log-decorator https://github.com/shisama/react-log-decorator

  21. react-log-decorator • ࡞ͬͨ • npm install —save react-log-decoratorͰೖΔ • render΍componentDidMountͳͲͷϝιο

    υ͕ݺ͹Εͨͱ͖ʹpropsͱstateͱҾ਺ͷ஋ Λίϯιʔϧʹදࣔ͢ΔσόοΨʔ
  22. react-log-decorator import logger from 'react-log-decorator'; const log = logger(process.env.NODE_ENV ===

    'development'); export default class MyComponent extends Component { @log render() { return ( <div> <input type="text" onChange = {this.props.onChange} /> <p>{this.props.message}</p> </div> ) } } ࣮ߦ࣌ʹQSPQT΍TUBUFͷ಺༰Λίϯ ιʔϧʹද͍ࣔͨ͠ϝιουʹ෇͚Δ
  23. SFOEFS͕࣮ߦ͞ΕΔͨͼʹQSPQT΍ TUBUFͷ஋Λදࣔ react-log-decorator

  24. pure-deep-equal https://github.com/shisama/pure-deep-equal

  25. pure-deep-equal • ࡞ͬͨ • npm install —save pure-deep-equalͰೖΔ • shouldComponentUpdateͷதͰdeep

    compare͢Δ
  26. pure-deep-equal ࡞ͬͨܦҢ͸͜͜

  27. pure-deep-equal class Test extends React.Component { shouldComponentUpdate(nextProps, nextState) { return

    !deepEqual(this.props, nextProps) || !deepEqual(this.state, nextState); } render() { return <span>{this.props.message}</h1> } } TIPVME$PNQPOFOU6QEBUFͷதͰ EFFQDPNQBSF
  28. pure-deep-equal @PureDeepEqual class Test extends React.Component { render() { return

    <span>{this.props.message}</h1> } } TIPVME$PNQPOFOU6QEBUFΛ࣮૷͠ ͳͯ͘΋σίϨʔλؔ਺͕EFFQ DPNQBSFͯ͘͠ΕΔ
  29. Ͳ͏΍ͬͯ Decorators࡞Δͷʁ

  30. https://qiita.com/shisama/items/ 45f07f39a46a9e7fa85a

  31. ࠷ޙʹ • DecoratorsΛ࢖͑͹ίʔυ͕؆ܿʹͳΔ • ෇͚ͨΓ֎ͨ͠Γ͕؆୯ʹߦ͑ɺΞεϖΫτ ࢦ޲తʹ࢖͑Δ • ͨͩ͠ɺ·ͩఏҊதͷػೳͳͷͰ࢓༷͕มΘ ΔՄೳੑ͸͋Δ

  32. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠