ReactでDecoratorsを使う

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

Transcript

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

   View Slide

2. {
   "about": {
   "name": "Masashi Hirano",
   "works": "Weblio, Inc.",
   "twitter": "@shisama_",
   "github": "shisama"
   }
   }
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. ྫ͑͹ϓϩύςΟͷ௥Ճ
   function name(name) {
   return function (target) {
   target.prototype.name = name;
   }
   }
   ΫϥεʹOBNFͱ͍͏ϓϩύςΟΛ௥Ճ͢Δ
   ؔ਺Λఆٛ
   

   View Slide

7. @name(“React")
   class App extends React.Component {
   ɹrender() {
   return (
   
   Hello, {this.name}
   
   );
   }
   }
   ReactDOM.render(,
   document.getElementById('app'));
   ͜ͷίϯϙʔωϯτࣗମ͸OBNFͱ͍
   ͏ϓϩύςΟ͸͍࣋ͬͯͳ͍
   σίϨʔλʔ
   

   View Slide

8. ϨϯμϦϯά݁Ռ
   Hello, React
   σίϨʔλʔؔ਺ʹΑͬͯOBNFͷϓ
   ϩύςΟ͕௥Ճ͞Εͨ
   

   View Slide

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

   View Slide

10. Decoratorsͷࣄྫ
    

    View Slide

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

    View Slide

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

    View Slide

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ؔ਺ɻ
    Α͘ݟΔ࢖͍ํ
    

    View Slide

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
    ʹ෇͚Δ͜ͱ͕Ͱ͖Δ
    

    View Slide

15. MobX
    https://mobx.js.org/best/decorators.html
    

    View Slide

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

    View Slide

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ʹ͍ͯ͠Δ
    

    View Slide

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()
    }
    }
    σίϨʔλʔΛ࢖ͬͯ؆ܿʹॻ͚Δ
    

    View Slide

19. MobX
    https://mobx.js.org/best/decorators.html
    ެࣜʹࡌ͍ͬͯΔ
    

    View Slide

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

    View Slide

21. react-log-decorator
    • ࡞ͬͨ
    • npm install —save react-log-decoratorͰೖΔ
    • render΍componentDidMountͳͲͷϝιο
    υ͕ݺ͹Εͨͱ͖ʹpropsͱstateͱҾ਺ͷ஋
    Λίϯιʔϧʹදࣔ͢ΔσόοΨʔ
    

    View Slide

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 (
    
    
    {this.props.message}
    
    )
    }
    }
    ࣮ߦ࣌ʹQSPQT΍TUBUFͷ಺༰Λίϯ
    ιʔϧʹද͍ࣔͨ͠ϝιουʹ෇͚Δ
    

    View Slide

23. SFOEFS͕࣮ߦ͞ΕΔͨͼʹQSPQT΍
    TUBUFͷ஋Λදࣔ
    react-log-decorator
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. pure-deep-equal
    class Test extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
    return !deepEqual(this.props, nextProps) ||
    !deepEqual(this.state, nextState);
    }
    render() {
    return {this.props.message}
    }
    }
    TIPVME$PNQPOFOU6QEBUFͷதͰ
    EFFQDPNQBSF
    

    View Slide

28. pure-deep-equal
    @PureDeepEqual
    class Test extends React.Component {
    render() {
    return {this.props.message}
    }
    }
    TIPVME$PNQPOFOU6QEBUFΛ࣮૷͠
    ͳͯ͘΋σίϨʔλؔ਺͕EFFQ
    DPNQBSFͯ͘͠ΕΔ
    

    View Slide

29. Ͳ͏΍ͬͯ
    Decorators࡞Δͷʁ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide