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

ES7 Decorators

2bedb1eb8f841cd3c3ae584600b016e0?s=47 OKUNOKENTARO
September 29, 2015

ES7 Decorators

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

2bedb1eb8f841cd3c3ae584600b016e0?s=128

OKUNOKENTARO

September 29, 2015
Tweet

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ͯ͠ϞδϡʔϧΛొ࿥ JNQPSUXSGSPNXSBTTFTJOHMFUPO8SBTTF؎ٝأةٝأ JNQPSU@$PNQPOFOU"GSPNDPNQPOFOUB㹋⡤׾JNQPSU JNQPSU@$PNQPOFOU#GSPNDPNQPOFOUC JNQPSU\ $PNQPOFOU"  $PNQPOFOU# ^GSPNNPEVMFLFZT㹋⡤׾ㄎן⳿ׅ׋׭ךؗ٦׾JNQPSU

    XSTFU $PNQPOFOU" @$PNQPOFOU" ؗ٦ה㹋⡤׾秡➰ֽג涫ꐮ XSTFU $PNQPOFOU# @$PNQPOFOU#  FYQPSUEFGBVMUXS ࢖͍ํ 2/5
  25. • ొ࿥ͨ͠ϞδϡʔϧΛݺͿͨΊͷΩʔΛએݴ 㛙暕ח׃׋ֽ׸ל4ZNCPM崞欽 FYQPSUDPOTU$PNQPOFOU"4ZNCPM $PNQPOFOU"  FYQPSUDPOTU$PNQPOFOU#4ZNCPM $PNQPOFOU#  4ZNCPMָ䱰欽׃חְֻ㜥さכ俑㶵⴨ד׮圓׻זְ

    FYQPSUDPOTU$PNQPOFOU$$PNQPOFOU$ FYQPSUDPOTU$PNQPOFOU%$PNQPOFOU% ࢖͍ํ 3/5
  26. • ࣮૷಺Ͱ͸XSJOKFDU Ͱએݴ͢ΔͱɺUIJT͔ΒऔಘͰ͖Δ JNQPSUXSGSPNSFHJTUFSEFQFOEFODJFT JNQPSU\ $PNQPOFOU"  $PNQPOFOU# ^GSPNNPEVMFLFZT !XSJOKFDU

    \ֿֿח%FDPSBUPST圓俑 $PNQPOFOU" ؗ٦׾&4䕎䒭ך0CKFDUד♷ִ׷\BB CC^׾\B C^ה剅ֽ׷װא $PNQPOFOU# ^  FYQPSUEFGBVMUDMBTT"QQMJDBUJPO\ DPOTUSVDUPS \ DPOTPMFMPH UIJT$PNQPOFOU" 呓秛幥׫ ^ ^ ࢖͍ํ 4/5
  27. • ςετ಺Ͱ͸CFGPSF&BDIͳͲͰ湫䱸4FU EFTDSJCF *OKFDUNPDL  \ CFGPSF&BDI \ ٌحؙ䊴׃剏ִ "QQMJDBUJPOQSPUPUZQF$PNQPOFOU#.PDL$PNQPOFOU#

    ^  JU TIPVMECFJOKFDUFE.PDL$PNQPOFOU$  \ DPOTUBQQOFX"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