ES7 Decorators

第60回HTML5とか勉強会 - ECMAScript 2015 & 2016での発表に使用した資料です

Transcript

1. ES7 Decorators @armorik83 Sep 29, 2015 ୈ60ճHTML5ͱ͔ษڧձ
2. • @armorik83ɾ • -ɾ • ژ౎ࢢग़਎A • AngularϢʔβάϧʔϓ ng-kyoto୅ද Hello
3. AngularJSΞϯνύλʔϯूɺDestructuring assignmentͷ͝ར༻͸ܭըతʹɺͳͲ
4. Decorators Syntax
5. • ECMAScriptͱ͸ʢׂѪʣ • Babelͷදهʹ฿ͬͯES2015, ES7Ͱ౷Ұ͠·͢ ES7
6. Decoratorsͱ͸? class Person { @nonenumerable get kidCount() { return this.children.length; } } function nonenumerable(target, name, descriptor) { descriptor.enumerable = false; return descriptor; } https://github.com/wycats/javascript-decorators#detailed-design
7. Decorators͸ԿΛ͢Δ? • ES2015 Class΍ϓϩύςΟʹରͯ͠ɺDecoratorsߏจʹ
 Αͬͯ૷০ɺ஫ऍͰ͖Δ • ௚ԼͷClass΍ϓϩύςΟɺϝιουʹ༗ޮ
8. JSʹ͓͚ΔDecoratorsͷىݯ • 2014೥4݄ɺECMAϛʔςΟϯά TC39 ʹͯwycatsࢯ͔Β
 ఏग़͞Εͨϓϩϙʔβϧ • 2014೥10݄ɺϓϩϙʔβϧΛ஌͔ͬͯ஌Β͔ͣAngular։ൃ νʔϜ͕"AtScript"ͳΔಠࣗߏจΛൃදʢDart༝དྷͬΆ͍ʣ • 2015೥3݄ɺAngularνʔϜͱMicrosoft͕ࣾڠྗ͢Δ͜ͱΛ
 ද໌ɺTypeScript 1.5ʹͯ࢓༷ͱͯ͠࠾༻
9. ES7 Decorators • 2015೥9݄ݱࡏɺECMA262 Proposals Stage 1 • ෳ਺ͷProposalsʹؔ༩͍ͯ͠ΔYehuda Katz (wycats) ࢯͱɺ MicrosoftࣾͷJonathan Turnerࢯ͕ࡦఆͷத৺ͱͳ͍ͬͯΔ • BabelͰར༻Մ
10. TypeScript Decorators • 2015೥9݄ݱࡏɺTypeScript 1.6.2Ͱར༻Մ • ҆ఆ൛ʹؚ·Ε͓ͯΓʢ͓ͦΒ͘಺෦తʹ͸ʣ࢓༷΋͋Δ͕ɺ ࢓༷ॻʹ͸هࡌ͞Ε͍ͯͳ͍ • ໌֬ͳ࢓༷͸ɺECMAଆͷࡦఆʹ߹ΘͤΑ͏ͱ͍ͯ͠Δͱਪଌ • Babelଆ͸ECMA Proposalsʹݫີʹ४ڌ͍ͯ͠ΔͨΊɺඍົ ʹTypeScriptଆͷڍಈͱ͕ࠩ͋Δ • ྫ͑͹TypeScriptͷΈҾ਺ʹରͯ͠΋ద༻Ͱ͖Δ
11. ࢖͍ํ • Babel • babel --optional es7.decorators • TypeScript • tsc --experimentalDecorators • ·ͩ྆ํͱ΋࣮ݧஈ֊ѻ͍ͰΦϓγϣϯ͕ඞཁ
12. ଞݴޠͰͷDecorators • C#ͷMetadataߏจʹىݯ͕͋ΔΑ͏Ͱɺ2001೥͔Β֬ೝ
 ͞Ε͍ͯΔ֓೦ • @Ͱॻ͖࢝ΊΔݴޠ͸Java, PythonͳͲ • ࠓճɺJavaScript͕Կ͔ੜΈग़ͨ͠༁Ͱ͸ͳ͘ɺଞݴޠ͔Β ࠾ΓೖΕ͍ͯΔ • [Qiita JavaScript Decorators] [ݕࡧ]
13. ༻్
14. Angular 2 • ϑϨʔϜϫʔΫ"AngularJS"ͷ࣍ظϝδϟʔόʔδϣϯ • API͸AngularJS 1ܥ͔Βେ෯ʹมߋ • ৽APIͰ͸౰વͷΑ͏ʹDecoratorsߏจ͕૊Έࠐ·Ε͍ͯΔ • Microsoftࣾ TypeScript։ൃνʔϜͱ࿈ܞ͍ͯ͠Δ • Decoratorsߏจ͕ʢଟগͷमਖ਼͸͋ΕͲʣഇҊʹͳΔ͜ͱ ͸ແ͍ͱΈ͍ͯΔ
15. Angular 2 • TypeScriptͰ͔͠࢖༻Ͱ͖ͳ͍Decoratorsߏจͷ࢖͍ํ
 ͭ·ΓBabelͰΤϥʔͱͳΔ࢖͍ํ͸ɺAngular 2ઐ༻ͱ
 ࢥ͓͍ͬͯͯ΋͍͍. • DecoratorsߏจΛ༻͍ͯԿ͔ࣗ࡞͢Δࡍɺ͜ͷ࢖͍ํ͸
 ECMAతʹ͸কདྷ͕໿ଋ͞Ε͍ͯͳ͍ class MyComponent { constructor(@Attribute('title') title: string) { // } }
16. Redux • ReduxͰ͸react-redux bindingʹ͓͍ͯɺDecoratorsߏจʹ ΑΔ؆қͳه๏΋༻ҙ͞Ε͍ͯΔ • ͔ͤͬ͘ͳͷͰ৐͔ͬͬͯΈΔ͔ʁ • ڧ੍Ͱ͸ͳ͍ͷͰɺ࢖Θͳͯ͘΋Α͍ @connect(mapStateToProps) export default class CounterContainer { // }
17. core-decorators.js • https://github.com/jayphelps/core-decorators.js ɾ • DecoratorsߏจΛϑϧ׆༻ͨ͠ϥΠϒϥϦू • @readonly, @override, @deprecate, @debounceͳͲ
 ໿10छྨ͕༻ҙ͞Ε͍ͯΔ • ͜ͷOSS΍ɺଞݴޠͰͷDecoratorsߏจͷ࢖ΘΕํͳͲ΋
 ࢀߟʹ͢Δͱࣗ࡞͠΍͘͢ͳΔ͸ͣ
18. ࡞ͬͯΈͨ
19. wrasse CC0 Roban Kramer / Bluehead Wrasse
20. wrasse • https://github.com/chatwork/wrasse ɾ • npm i -S wrasse ɾ • ChatWorkࣾॳͷnpm OSSͱͳΓ·ͨ͠ • ࣾ಺ίʔυωʔϜʹڕͷ΋ͷ͕͋ͬͨͨΊɺؔ࿈ͤ͞Α͏ • ೔ຊޠͰ͸ϕϥɺ۝भͰ͸ΫαϏͱ΋ݺ͹ΕΔڕ • ϫοηʔͱ͔ϥοηʔͱ͔ϫογϣΠͱ͔޷͖ʹݺ΂͹͍͍
21. wrasse͸ԿΛ͢Δ΋ͷ? • ΫαϏ͚ͩ͋ͬͯɺDependency InjectionϥΠϒϥϦͰ͢ • AngularJSͰͷDIܦݧ΍ɺNode.js, ES2015 moduleϕʔεʹ ͓͚ΔϞοΫςετΛͲ͏ߦ͏͔ʹ͍ͭͯߟ͑ͨ຤ͷػߏ @wr.inject({ ComponentA, ComponentB, ComponentC }) export default class Application { // }
22. ͨͿΜ࣌ؒແ͍͚Ͳ ࢖͍ํ
23. ࢖͍ํ 1/5 • WrasseΠϯελϯεΛੜ੒͢Δ import Wrasse from 'wrasse'; const wr = new Wrasse(); export default wr;
24. • ੜ੒ͨ͠WrasseΠϯελϯεΛimportͯ͠ϞδϡʔϧΛొ࿥ JNQPSU
    XS
    GSPN
    XSBTTFTJOHMFUPO
    
    8SBTTF؎ٝأةٝأ
    JNQPSU
    @$PNQPOFOU"
    GSPN
    DPNQPOFOUB
    
    㹋⡤׾JNQPSU
    JNQPSU
    @$PNQPOFOU#
    GSPN
    DPNQPOFOUC
    JNQPSU
    \
    
    
    $PNQPOFOU"
    
    
    $PNQPOFOU#
    ^
    GSPN
    NPEVMFLFZT
    
    㹋⡤׾ㄎן⳿ׅ׋׭ךؗ٦׾JNQPSU
    XSTFU $PNQPOFOU"
    @$PNQPOFOU" 
    
    ؗ٦ה㹋⡤׾秡➰ֽג涫ꐮ
    XSTFU $PNQPOFOU#
    @$PNQPOFOU# 
    FYQPSU
    EFGBVMU
    XS ࢖͍ํ 2/5
25. • ొ࿥ͨ͠ϞδϡʔϧΛݺͿͨΊͷΩʔΛએݴ 
    㛙暕ח׃׋ֽ׸ל4ZNCPM崞欽
    FYQPSU
    DPOTU
    $PNQPOFOU"
    
    4ZNCPM $PNQPOFOU" 
    FYQPSU
    DPOTU
    $PNQPOFOU#
    
    4ZNCPM $PNQPOFOU# 
    
    4ZNCPMָ䱰欽׃חְֻ㜥さכ俑㶵⴨ד׮圓׻זְ
    FYQPSU
    DPOTU
    $PNQPOFOU$
    
    $PNQPOFOU$
    FYQPSU
    DPOTU
    $PNQPOFOU%
    
    $PNQPOFOU% ࢖͍ํ 3/5
26. • ࣮૷಺Ͱ͸XSJOKFDU Ͱએݴ͢ΔͱɺUIJT͔ΒऔಘͰ͖Δ JNQPSU
    XS
    GSPN
    SFHJTUFSEFQFOEFODJFT
    JNQPSU
    \
    
    
    $PNQPOFOU"
    
    
    $PNQPOFOU#
    ^
    GSPN
    NPEVMFLFZT
    !XSJOKFDU \
    
    
    ֿֿח%FDPSBUPST圓俑
    
    
    $PNQPOFOU"
    
    ؗ٦׾&4䕎䒭ך0CKFDUד♷ִ׷
    \B
    B
    C
    C^׾\B
    C^ה剅ֽ׷װא
    
    
    $PNQPOFOU#
    ^
    FYQPSU
    EFGBVMU
    DMBTT
    "QQMJDBUJPO
    \
    
    
    DPOTUSVDUPS
    \
    
    
    
    
    DPOTPMFMPH UIJT$PNQPOFOU" 
    
    呓秛幥׫
    
    
    ^
    ^ ࢖͍ํ 4/5
27. • ςετ಺Ͱ͸CFGPSF&BDIͳͲͰ湫䱸4FU EFTDSJCF *OKFDU
    NPDL
    
    
    \
    
    
    CFGPSF&BDI
    
    \
    
    
    
    
    
    ٌحؙ䊴׃剏ִ
    
    
    
    
    "QQMJDBUJPOQSPUPUZQF$PNQPOFOU#
    
    .PDL$PNQPOFOU#
    
    
    ^ 
    
    
    JU TIPVME
    CF
    JOKFDUFE
    .PDL
    $PNQPOFOU$
    
    
    \
    
    
    
    
    DPOTU
    BQQ
    
    OFX
    "QQMJDBUJPO 
    
    
    
    
    BQQ$PNQPOFOU$
    
    .PDL
    $PNQPOFOU$
    
    JUⰻד׮〳
    
    
    ^ 
    ^  ࢖͍ํ 5/5
28. Կʹ࢖͏͔ • ௚઀ͷϩδοΫΛ࣋ͨͳ͍Singleton ControllerͷΑ͏ͳՕॴ
 ͷϞοΫςετରࡦ • ࣾ಺Ҋ݅ͰطʹwrasseΛ࠾༻͍ͯ͠Δ
 ʢਅ૬͸ٯͰɺۀ຿ίʔυ͔ΒDIػߏͷΈநग़ͨ͠ʣ • ࣾ಺Ҋ݅Ͱ࠾༻ͱ͍͏͜ͱ͸ɺBabel --optional΋࢖༻த • @kyo_agoŰƅŘŤƃͷԼͰɺׂͱ޷͖উख΍Βͤͯ΋Βͬͯ·͢
29. ·ͱΊ
30. ·ͱΊ • Decoratorsߏจ͸Stage 1͚ͩͲTypeScriptਞӦ΋ਐΊ͍ͯΔ ෆࢥٞͳཱͪҐஔͷϓϩϙʔβϧ • Angular 2͕ຊ֨తʹ࠾༻ͪ͠ΌͬͨͨΊɺͨͿΜੜ͖࢒Δ • ES7ͬΆ͞ΛઌऔΓ͢ΔͳΒDecorators΍ͬͯΈ·ͤΜ͔
31. એ఻ • AngularϢʔβάϧʔϓ ng-kyoto ͷୈࡾճͱͳΔMeetup͕
 ։࠵ܾఆ • ng-kyoto Angular Meetup #3 ɾ • 2015೥11݄22೔ʢ೔ʣ • ։࠵஍͸બఆதɺ͓ͦΒ͘ژ౎ࢢ಺ • ਖ਼ࣜͳࠂ஌ɺืू։࢝͸10݄தΛ༧ఆ • ΈΜͳདྷͯͶ
32. Thank you for listening! Sep 29, 2015 ୈ60ճHTML5ͱ͔ษڧձ @armorik83