Slide 1
Slide 1 text
ReactͰDecoratorsΛ͏
2018/03/07 React Beer Bash
ฏণ࢜ / @shisama
Slide 2
Slide 2 text
{
"about": {
"name": "Masashi Hirano",
"works": "Weblio, Inc.",
"twitter": "@shisama_",
"github": "shisama"
}
}
Slide 3
Slide 3 text
͜ͷൃදʹ͍ͭͯ
• JavaScriptͷ࠷ۙػೳΛઌऔΓͯ͠ReactͰ
͏ࣄྫΛհ
• Reactͬͨ͜ͱ͋Δਓ͚
• ίʔυΛ؆ܿʹॻ͖͍ͨਓ͚
Slide 4
Slide 4 text
Agenda
• Decoratorsͷհ
• Decoratorsͷ࣮ྫ
Slide 5
Slide 5 text
Decoratorsͱ
• EcmaScriptυϥϑτ(stage-2)ͷػೳ
• ॲཧΛՃͨ͠Γஔ͖͑ͨΓͰ͖Δ
• @ϚʔΫΛ͚ͨهड़
• JavaͷΞϊςʔγϣϯPythonͷσίϨʔ
λʔΈ͍ͨͳهड़
• ໊લͷ༝དྷGoFͷσίϨʔλʔύλʔϯ
Slide 6
Slide 6 text
ྫ͑ϓϩύςΟͷՃ
function name(name) {
return function (target) {
target.prototype.name = name;
}
}
ΫϥεʹOBNFͱ͍͏ϓϩύςΟΛՃ͢Δ
ؔΛఆٛ
Slide 7
Slide 7 text
@name(“React")
class App extends React.Component {
ɹrender() {
return (
Hello, {this.name}
);
}
}
ReactDOM.render(,
document.getElementById('app'));
͜ͷίϯϙʔωϯτࣗମOBNFͱ͍
͏ϓϩύςΟ͍࣋ͬͯͳ͍
σίϨʔλʔ
Slide 8
Slide 8 text
ϨϯμϦϯά݁Ռ
Hello, React
σίϨʔλʔؔʹΑͬͯOBNFͷϓ
ϩύςΟ͕Ճ͞Εͨ
Slide 9
Slide 9 text
DecoratorsΛ͏ํ๏
• Babel
• babel-plugin-transform-decorators-legacy
Λ͏ɻ
• TypeScript
• tsc --experimentalDecorators
Slide 10
Slide 10 text
Decoratorsͷࣄྫ
Slide 11
Slide 11 text
react-redux
https://github.com/reactjs/react-redux
Slide 12
Slide 12 text
react-redux
• ReduxͱstateΛཧ͢ΔϥΠϒϥϦ
• react-reduxReactͱReduxΛͭͳ͛ΔϥΠϒ
ϥϦ
Slide 13
Slide 13 text
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ؔɻ
Α͘ݟΔ͍ํ
Slide 14
Slide 14 text
react-redux
@connect(mapStateToProps, mapDispatchToProps)
class MyFancyComponent extends React.Component {
// ׂѪ
}
const mapStateToProps = (state) => {
return { users: state.users };
}
const mapDispatchToProps = (dispatch, ownProps)
{
return {// ׂѪ}
}
DPOOFDUΛσίϨʔλʔͱͯ͠$MBTT
ʹ͚Δ͜ͱ͕Ͱ͖Δ
Slide 15
Slide 15 text
MobX
https://mobx.js.org/best/decorators.html
Slide 16
Slide 16 text
MobX
• ReduxΈ͍ͨʹstateΛཧ͢ΔϥΠϒϥϦ
• ReduxΑΓ؆ܿʹॻ͚Δҹ
Slide 17
Slide 17 text
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ʹ͍ͯ͠Δ
Slide 18
Slide 18 text
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()
}
}
σίϨʔλʔΛͬͯ؆ܿʹॻ͚Δ
Slide 19
Slide 19 text
MobX
https://mobx.js.org/best/decorators.html
ެࣜʹࡌ͍ͬͯΔ
Slide 20
Slide 20 text
react-log-decorator
https://github.com/shisama/react-log-decorator
Slide 21
Slide 21 text
react-log-decorator
• ࡞ͬͨ
• npm install —save react-log-decoratorͰೖΔ
• rendercomponentDidMountͳͲͷϝιο
υ͕ݺΕͨͱ͖ʹpropsͱstateͱҾͷ
Λίϯιʔϧʹදࣔ͢ΔσόοΨʔ
Slide 22
Slide 22 text
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 (
)
}
}
࣮ߦ࣌ʹQSPQTTUBUFͷ༰Λίϯ
ιʔϧʹද͍ࣔͨ͠ϝιουʹ͚Δ
{this.props.message}
Slide 23
Slide 23 text
SFOEFS͕࣮ߦ͞ΕΔͨͼʹQSPQT
TUBUFͷΛදࣔ
react-log-decorator
Slide 24
Slide 24 text
pure-deep-equal
https://github.com/shisama/pure-deep-equal
Slide 25
Slide 25 text
pure-deep-equal
• ࡞ͬͨ
• npm install —save pure-deep-equalͰೖΔ
• shouldComponentUpdateͷதͰdeep
compare͢Δ
Slide 26
Slide 26 text
pure-deep-equal
࡞ͬͨܦҢ͜͜
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
pure-deep-equal
@PureDeepEqual
class Test extends React.Component {
render() {
return {this.props.message}
}
}
TIPVME$PNQPOFOU6QEBUFΛ࣮͠
ͳͯ͘σίϨʔλ͕ؔEFFQ
DPNQBSFͯ͘͠ΕΔ
Slide 29
Slide 29 text
Ͳ͏ͬͯ
Decorators࡞Δͷʁ
Slide 30
Slide 30 text
https://qiita.com/shisama/items/
45f07f39a46a9e7fa85a
Slide 31
Slide 31 text
࠷ޙʹ
• DecoratorsΛ͑ίʔυ͕؆ܿʹͳΔ
• ͚ͨΓ֎ͨ͠Γ͕؆୯ʹߦ͑ɺΞεϖΫτ
ࢦతʹ͑Δ
• ͨͩ͠ɺ·ͩఏҊதͷػೳͳͷͰ༷͕มΘ
ΔՄೳੑ͋Δ
Slide 32
Slide 32 text
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠