Tweet
Tweet

Slide 1

Slide 1 text

ES7 Decorators @armorik83 Sep 29, 2015 ୈ60ճHTML5ͱ͔ษڧձ

Slide 2

Slide 2 text

• @armorik83ɾ • -ɾ • ژ౎ࢢग़਎A • AngularϢʔβάϧʔϓ ng-kyoto୅ද Hello

Slide 3

Slide 3 text

AngularJSΞϯνύλʔϯूɺDestructuring assignmentͷ͝ར༻͸ܭըతʹɺͳͲ

Slide 4

Slide 4 text

Decorators Syntax

Slide 5

Slide 5 text

• ECMAScriptͱ͸ʢׂѪʣ • Babelͷදهʹ฿ͬͯES2015, ES7Ͱ౷Ұ͠·͢ ES7

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Decorators͸ԿΛ͢Δ? • ES2015 Class΍ϓϩύςΟʹରͯ͠ɺDecoratorsߏจʹ
 Αͬͯ૷০ɺ஫ऍͰ͖Δ • ௚ԼͷClass΍ϓϩύςΟɺϝιουʹ༗ޮ

Slide 8

Slide 8 text

JSʹ͓͚ΔDecoratorsͷىݯ • 2014೥4݄ɺECMAϛʔςΟϯά TC39 ʹͯwycatsࢯ͔Β
 ఏग़͞Εͨϓϩϙʔβϧ • 2014೥10݄ɺϓϩϙʔβϧΛ஌͔ͬͯ஌Β͔ͣAngular։ൃ νʔϜ͕"AtScript"ͳΔಠࣗߏจΛൃදʢDart༝དྷͬΆ͍ʣ • 2015೥3݄ɺAngularνʔϜͱMicrosoft͕ࣾڠྗ͢Δ͜ͱΛ
 ද໌ɺTypeScript 1.5ʹͯ࢓༷ͱͯ͠࠾༻

Slide 9

Slide 9 text

ES7 Decorators • 2015೥9݄ݱࡏɺECMA262 Proposals Stage 1 • ෳ਺ͷProposalsʹؔ༩͍ͯ͠ΔYehuda Katz (wycats) ࢯͱɺ MicrosoftࣾͷJonathan Turnerࢯ͕ࡦఆͷத৺ͱͳ͍ͬͯΔ • BabelͰར༻Մ

Slide 10

Slide 10 text

TypeScript Decorators • 2015೥9݄ݱࡏɺTypeScript 1.6.2Ͱར༻Մ • ҆ఆ൛ʹؚ·Ε͓ͯΓʢ͓ͦΒ͘಺෦తʹ͸ʣ࢓༷΋͋Δ͕ɺ ࢓༷ॻʹ͸هࡌ͞Ε͍ͯͳ͍ • ໌֬ͳ࢓༷͸ɺECMAଆͷࡦఆʹ߹ΘͤΑ͏ͱ͍ͯ͠Δͱਪଌ • Babelଆ͸ECMA Proposalsʹݫີʹ४ڌ͍ͯ͠ΔͨΊɺඍົ ʹTypeScriptଆͷڍಈͱ͕ࠩ͋Δ • ྫ͑͹TypeScriptͷΈҾ਺ʹରͯ͠΋ద༻Ͱ͖Δ

Slide 11

Slide 11 text

࢖͍ํ • Babel • babel --optional es7.decorators • TypeScript • tsc --experimentalDecorators • ·ͩ྆ํͱ΋࣮ݧஈ֊ѻ͍ͰΦϓγϣϯ͕ඞཁ

Slide 12

Slide 12 text

ଞݴޠͰͷDecorators • C#ͷMetadataߏจʹىݯ͕͋ΔΑ͏Ͱɺ2001೥͔Β֬ೝ
 ͞Ε͍ͯΔ֓೦ • @Ͱॻ͖࢝ΊΔݴޠ͸Java, PythonͳͲ • ࠓճɺJavaScript͕Կ͔ੜΈग़ͨ͠༁Ͱ͸ͳ͘ɺଞݴޠ͔Β ࠾ΓೖΕ͍ͯΔ • [Qiita JavaScript Decorators] [ݕࡧ]

Slide 13

Slide 13 text

༻్

Slide 14

Slide 14 text

Angular 2 • ϑϨʔϜϫʔΫ"AngularJS"ͷ࣍ظϝδϟʔόʔδϣϯ • API͸AngularJS 1ܥ͔Βେ෯ʹมߋ • ৽APIͰ͸౰વͷΑ͏ʹDecoratorsߏจ͕૊Έࠐ·Ε͍ͯΔ • Microsoftࣾ TypeScript։ൃνʔϜͱ࿈ܞ͍ͯ͠Δ • Decoratorsߏจ͕ʢଟগͷमਖ਼͸͋ΕͲʣഇҊʹͳΔ͜ͱ ͸ແ͍ͱΈ͍ͯΔ

Slide 15

Slide 15 text

Angular 2 • TypeScriptͰ͔͠࢖༻Ͱ͖ͳ͍Decoratorsߏจͷ࢖͍ํ
 ͭ·ΓBabelͰΤϥʔͱͳΔ࢖͍ํ͸ɺAngular 2ઐ༻ͱ
 ࢥ͓͍ͬͯͯ΋͍͍. • DecoratorsߏจΛ༻͍ͯԿ͔ࣗ࡞͢Δࡍɺ͜ͷ࢖͍ํ͸
 ECMAతʹ͸কདྷ͕໿ଋ͞Ε͍ͯͳ͍ class MyComponent { constructor(@Attribute('title') title: string) { // } }

Slide 16

Slide 16 text

Redux • ReduxͰ͸react-redux bindingʹ͓͍ͯɺDecoratorsߏจʹ ΑΔ؆қͳه๏΋༻ҙ͞Ε͍ͯΔ • ͔ͤͬ͘ͳͷͰ৐͔ͬͬͯΈΔ͔ʁ • ڧ੍Ͱ͸ͳ͍ͷͰɺ࢖Θͳͯ͘΋Α͍ @connect(mapStateToProps) export default class CounterContainer { // }

Slide 17

Slide 17 text

core-decorators.js • https://github.com/jayphelps/core-decorators.js ɾ • DecoratorsߏจΛϑϧ׆༻ͨ͠ϥΠϒϥϦू • @readonly, @override, @deprecate, @debounceͳͲ
 ໿10छྨ͕༻ҙ͞Ε͍ͯΔ • ͜ͷOSS΍ɺଞݴޠͰͷDecoratorsߏจͷ࢖ΘΕํͳͲ΋
 ࢀߟʹ͢Δͱࣗ࡞͠΍͘͢ͳΔ͸ͣ

Slide 18

Slide 18 text

࡞ͬͯΈͨ

Slide 19

Slide 19 text

wrasse CC0 Roban Kramer / Bluehead Wrasse

Slide 20

Slide 20 text

wrasse • https://github.com/chatwork/wrasse ɾ • npm i -S wrasse ɾ • ChatWorkࣾॳͷnpm OSSͱͳΓ·ͨ͠ • ࣾ಺ίʔυωʔϜʹڕͷ΋ͷ͕͋ͬͨͨΊɺؔ࿈ͤ͞Α͏ • ೔ຊޠͰ͸ϕϥɺ۝भͰ͸ΫαϏͱ΋ݺ͹ΕΔڕ • ϫοηʔͱ͔ϥοηʔͱ͔ϫογϣΠͱ͔޷͖ʹݺ΂͹͍͍

Slide 21

Slide 21 text

wrasse͸ԿΛ͢Δ΋ͷ? • ΫαϏ͚ͩ͋ͬͯɺDependency InjectionϥΠϒϥϦͰ͢ • AngularJSͰͷDIܦݧ΍ɺNode.js, ES2015 moduleϕʔεʹ ͓͚ΔϞοΫςετΛͲ͏ߦ͏͔ʹ͍ͭͯߟ͑ͨ຤ͷػߏ @wr.inject({ ComponentA, ComponentB, ComponentC }) export default class Application { // }

Slide 22

Slide 22 text

ͨͿΜ࣌ؒແ͍͚Ͳ ࢖͍ํ

Slide 23

Slide 23 text

࢖͍ํ 1/5 • WrasseΠϯελϯεΛੜ੒͢Δ import Wrasse from 'wrasse'; const wr = new Wrasse(); export default wr;

Slide 24

Slide 24 text

• ੜ੒ͨ͠WrasseΠϯελϯεΛimportͯ͠ϞδϡʔϧΛొ࿥ JNQPSUXSGSPNXSBTTFTJOHMFUPO8SBTTF؎ٝأةٝأ JNQPSU@$PNQPOFOU"GSPNDPNQPOFOUB㹋⡤׾JNQPSU JNQPSU@$PNQPOFOU#GSPNDPNQPOFOUC JNQPSU\ $PNQPOFOU" $PNQPOFOU# ^GSPNNPEVMFLFZT㹋⡤׾ㄎן⳿ׅ׋׭ךؗ٦׾JNQPSU XSTFU $PNQPOFOU" @$PNQPOFOU" ؗ٦ה㹋⡤׾秡➰ֽג涫ꐮ XSTFU $PNQPOFOU# @$PNQPOFOU# FYQPSUEFGBVMUXS ࢖͍ํ 2/5

Slide 25

Slide 25 text

• ొ࿥ͨ͠ϞδϡʔϧΛݺͿͨΊͷΩʔΛએݴ 㛙暕ח׃׋ֽ׸ל4ZNCPM崞欽 FYQPSUDPOTU$PNQPOFOU"4ZNCPM $PNQPOFOU" FYQPSUDPOTU$PNQPOFOU#4ZNCPM $PNQPOFOU# 4ZNCPMָ䱰欽׃חְֻ㜥さכ俑㶵⴨ד׮圓׻זְ FYQPSUDPOTU$PNQPOFOU$$PNQPOFOU$ FYQPSUDPOTU$PNQPOFOU%$PNQPOFOU% ࢖͍ํ 3/5

Slide 26

Slide 26 text

• ࣮૷಺Ͱ͸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

Slide 27

Slide 27 text

• ςετ಺Ͱ͸CFGPSF&BDIͳͲͰ湫䱸4FU EFTDSJCF *OKFDUNPDL \ CFGPSF&BDI \ ٌحؙ䊴׃剏ִ "QQMJDBUJPOQSPUPUZQF$PNQPOFOU#.PDL$PNQPOFOU# ^ JU TIPVMECFJOKFDUFE.PDL$PNQPOFOU$ \ DPOTUBQQOFX"QQMJDBUJPO BQQ$PNQPOFOU$.PDL$PNQPOFOU$JUⰻד׮〳 ^ ^ ࢖͍ํ 5/5

Slide 28

Slide 28 text

Կʹ࢖͏͔ • ௚઀ͷϩδοΫΛ࣋ͨͳ͍Singleton ControllerͷΑ͏ͳՕॴ
 ͷϞοΫςετରࡦ • ࣾ಺Ҋ݅ͰطʹwrasseΛ࠾༻͍ͯ͠Δ
 ʢਅ૬͸ٯͰɺۀ຿ίʔυ͔ΒDIػߏͷΈநग़ͨ͠ʣ • ࣾ಺Ҋ݅Ͱ࠾༻ͱ͍͏͜ͱ͸ɺBabel --optional΋࢖༻த • @kyo_agoŰƅŘŤƃͷԼͰɺׂͱ޷͖উख΍Βͤͯ΋Βͬͯ·͢

Slide 29

Slide 29 text

·ͱΊ

Slide 30

Slide 30 text

·ͱΊ • Decoratorsߏจ͸Stage 1͚ͩͲTypeScriptਞӦ΋ਐΊ͍ͯΔ ෆࢥٞͳཱͪҐஔͷϓϩϙʔβϧ • Angular 2͕ຊ֨తʹ࠾༻ͪ͠ΌͬͨͨΊɺͨͿΜੜ͖࢒Δ • ES7ͬΆ͞ΛઌऔΓ͢ΔͳΒDecorators΍ͬͯΈ·ͤΜ͔

Slide 31

Slide 31 text

એ఻ • AngularϢʔβάϧʔϓ ng-kyoto ͷୈࡾճͱͳΔMeetup͕
 ։࠵ܾఆ • ng-kyoto Angular Meetup #3 ɾ • 2015೥11݄22೔ʢ೔ʣ • ։࠵஍͸બఆதɺ͓ͦΒ͘ژ౎ࢢ಺ • ਖ਼ࣜͳࠂ஌ɺืू։࢝͸10݄தΛ༧ఆ • ΈΜͳདྷͯͶ

Slide 32

Slide 32 text

Thank you for listening! Sep 29, 2015 ୈ60ճHTML5ͱ͔ษڧձ @armorik83