ES7 Decorators

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