Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ReactでDecoratorsを使う
Search
Masashi Hirano
March 07, 2018
Programming
0
1.1k
ReactでDecoratorsを使う
React Beer Bash! (
https://react-beer-bash.connpass.com/event/78112/
) でLTしました
Masashi Hirano
March 07, 2018
Tweet
Share
More Decks by Masashi Hirano
See All by Masashi Hirano
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.5k
Protocol Buffers and Connect for Frontend Development
masashi
0
110
You may not need XXX in Node.js
masashi
5
1.5k
OSSとコミュニティを支える
masashi
1
1.5k
英語ができなかった自分達が、グローバルチーム立ち上げに挑戦!?
masashi
1
3.5k
フロントエンド開発のためのセキュリティ入門について
masashi
1
540
フロントエンド開発のためのセキュリティ入門
masashi
50
18k
Node.jsの2022年と未来 / Node.js in 2022 and Future
masashi
1
1.1k
Corepack ~Node.jsに追加されたパッケージマネージャーマネージャー~ / #tng37
masashi
3
13k
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
650
チームの境界をブチ抜いていけ
tokai235
0
230
技術的負債の正体を知って向き合う
irof
0
260
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
300
AkarengaLT vol.38
hashimoto_kei
1
120
Google Opalで使える37のライブラリ
mickey_kubo
3
150
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
430
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
Go言語はstack overflowの夢を見るか?
logica0419
0
610
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
760
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Practical Orchestrator
shlominoach
190
11k
Facilitating Awesome Meetings
lara
57
6.6k
Typedesign – Prime Four
hannesfritz
42
2.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Pragmatic Product Professional
lauravandoore
36
7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Why Our Code Smells
bkeepers
PRO
340
57k
Automating Front-end Workflow
addyosmani
1371
200k
Transcript
ReactͰDecoratorsΛ͏ 2018/03/07 React Beer Bash ฏণ࢜ / @shisama
{ "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter":
"@shisama_", "github": "shisama" } }
͜ͷൃදʹ͍ͭͯ • JavaScriptͷ࠷ۙػೳΛઌऔΓͯ͠ReactͰ ͏ࣄྫΛհ • Reactͬͨ͜ͱ͋Δਓ͚ • ίʔυΛ؆ܿʹॻ͖͍ͨਓ͚
Agenda • Decoratorsͷհ • Decoratorsͷ࣮ྫ
Decoratorsͱ • EcmaScriptυϥϑτ(stage-2)ͷػೳ • ॲཧΛՃͨ͠Γஔ͖͑ͨΓͰ͖Δ • @ϚʔΫΛ͚ͨهड़ • JavaͷΞϊςʔγϣϯPythonͷσίϨʔ λʔΈ͍ͨͳهड़
• ໊લͷ༝དྷGoFͷσίϨʔλʔύλʔϯ
ྫ͑ϓϩύςΟͷՃ function name(name) { return function (target) { target.prototype.name =
name; } } ΫϥεʹOBNFͱ͍͏ϓϩύςΟΛՃ͢Δ ؔΛఆٛ
@name(“React") class App extends React.Component { ɹrender() { return (
<div> Hello, {this.name} </div> ); } } ReactDOM.render(<App />, document.getElementById('app')); ͜ͷίϯϙʔωϯτࣗମOBNFͱ͍ ͏ϓϩύςΟ͍࣋ͬͯͳ͍ σίϨʔλʔ
ϨϯμϦϯά݁Ռ Hello, React σίϨʔλʔؔʹΑͬͯOBNFͷϓ ϩύςΟ͕Ճ͞Εͨ
DecoratorsΛ͏ํ๏ • Babel • babel-plugin-transform-decorators-legacy Λ͏ɻ • TypeScript • tsc
--experimentalDecorators
Decoratorsͷࣄྫ
react-redux https://github.com/reactjs/react-redux
react-redux • ReduxͱstateΛཧ͢ΔϥΠϒϥϦ • react-reduxReactͱReduxΛͭͳ͛ΔϥΠϒ ϥϦ
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ؔɻ Α͘ݟΔ͍ํ
react-redux @connect(mapStateToProps, mapDispatchToProps) class MyFancyComponent extends React.Component { // ׂѪ
} const mapStateToProps = (state) => { return { users: state.users }; } const mapDispatchToProps = (dispatch, ownProps) { return {// ׂѪ} } DPOOFDUΛσίϨʔλʔͱͯ͠$MBTT ʹ͚Δ͜ͱ͕Ͱ͖Δ
MobX https://mobx.js.org/best/decorators.html
MobX • ReduxΈ͍ͨʹstateΛཧ͢ΔϥΠϒϥϦ • ReduxΑΓ؆ܿʹॻ͚Δҹ
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ʹ͍ͯ͠Δ
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() } } σίϨʔλʔΛͬͯ؆ܿʹॻ͚Δ
MobX https://mobx.js.org/best/decorators.html ެࣜʹࡌ͍ͬͯΔ
react-log-decorator https://github.com/shisama/react-log-decorator
react-log-decorator • ࡞ͬͨ • npm install —save react-log-decoratorͰೖΔ • rendercomponentDidMountͳͲͷϝιο
υ͕ݺΕͨͱ͖ʹpropsͱstateͱҾͷ Λίϯιʔϧʹදࣔ͢ΔσόοΨʔ
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> ) } } ࣮ߦ࣌ʹQSPQTTUBUFͷ༰Λίϯ ιʔϧʹද͍ࣔͨ͠ϝιουʹ͚Δ
SFOEFS͕࣮ߦ͞ΕΔͨͼʹQSPQT TUBUFͷΛදࣔ react-log-decorator
pure-deep-equal https://github.com/shisama/pure-deep-equal
pure-deep-equal • ࡞ͬͨ • npm install —save pure-deep-equalͰೖΔ • shouldComponentUpdateͷதͰdeep
compare͢Δ
pure-deep-equal ࡞ͬͨܦҢ͜͜
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
pure-deep-equal @PureDeepEqual class Test extends React.Component { render() { return
<span>{this.props.message}</h1> } } TIPVME$PNQPOFOU6QEBUFΛ࣮͠ ͳͯ͘σίϨʔλ͕ؔEFFQ DPNQBSFͯ͘͠ΕΔ
Ͳ͏ͬͯ Decorators࡞Δͷʁ
https://qiita.com/shisama/items/ 45f07f39a46a9e7fa85a
࠷ޙʹ • DecoratorsΛ͑ίʔυ͕؆ܿʹͳΔ • ͚ͨΓ֎ͨ͠Γ͕؆୯ʹߦ͑ɺΞεϖΫτ ࢦతʹ͑Δ • ͨͩ͠ɺ·ͩఏҊதͷػೳͳͷͰ༷͕มΘ ΔՄೳੑ͋Δ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠