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

ReactでDecoratorsを使う

 ReactでDecoratorsを使う

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

Masashi Hirano

March 07, 2018
Tweet

More Decks by Masashi Hirano

Other Decks in Programming

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