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
ES7 Decorators
Search
OKUNOKENTARO
September 29, 2015
Programming
3
3.2k
ES7 Decorators
第60回HTML5とか勉強会 - ECMAScript 2015 & 2016での発表に使用した資料です
OKUNOKENTARO
September 29, 2015
Tweet
Share
More Decks by OKUNOKENTARO
See All by OKUNOKENTARO
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
110
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
30
9.5k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
1.9k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.2k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.5k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
580
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
13
5.9k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
920
any禁止 絶対に型付けを諦めないための便利なユーティリティ関数 / techstand6
okunokentaro
21
6.3k
Other Decks in Programming
See All in Programming
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Elm 0.19.0 Changes
bkuhlmann
0
490
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
240
"config" ってなんだ? / What is "config"?
okashoi
0
240
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
370
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
920
GitHub Copilotのススメ
marcy731
1
200
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
370
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
200
Ruby Function Composition
bkuhlmann
1
330
Featured
See All Featured
Web development in the modern age
philhawksworth
202
10k
Designing for humans not robots
tammielis
248
25k
A Philosophy of Restraint
colly
197
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Clear Off the Table
cherdarchuk
84
310k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Done Done
chrislema
178
15k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Bash Introduction
62gerente
604
210k
Become a Pro
speakerdeck
PRO
11
4.5k
How to Ace a Technical Interview
jacobian
272
22k
Transcript
ES7 Decorators @armorik83 Sep 29, 2015 ୈ60ճHTML5ͱ͔ษڧձ
• @armorik83ɾ • -ɾ • ژࢢग़A • AngularϢʔβάϧʔϓ ng-kyotoද Hello
AngularJSΞϯνύλʔϯूɺDestructuring assignmentͷ͝ར༻ܭըతʹɺͳͲ
Decorators Syntax
• ECMAScriptͱʢׂѪʣ • Babelͷදهʹ฿ͬͯES2015, ES7Ͱ౷Ұ͠·͢ ES7
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
DecoratorsԿΛ͢Δ? • ES2015 ClassϓϩύςΟʹରͯ͠ɺDecoratorsߏจʹ Αͬͯ০ɺऍͰ͖Δ • ԼͷClassϓϩύςΟɺϝιουʹ༗ޮ
JSʹ͓͚ΔDecoratorsͷىݯ • 20144݄ɺECMAϛʔςΟϯά TC39 ʹͯwycatsࢯ͔Β ఏग़͞Εͨϓϩϙʔβϧ • 201410݄ɺϓϩϙʔβϧΛ͔ͬͯΒ͔ͣAngular։ൃ νʔϜ͕"AtScript"ͳΔಠࣗߏจΛൃදʢDart༝དྷͬΆ͍ʣ •
20153݄ɺAngularνʔϜͱMicrosoft͕ࣾڠྗ͢Δ͜ͱΛ ද໌ɺTypeScript 1.5ʹ༷ͯͱͯ͠࠾༻
ES7 Decorators • 20159݄ݱࡏɺECMA262 Proposals Stage 1 • ෳͷProposalsʹؔ༩͍ͯ͠ΔYehuda Katz
(wycats) ࢯͱɺ MicrosoftࣾͷJonathan Turnerࢯ͕ࡦఆͷத৺ͱͳ͍ͬͯΔ • BabelͰར༻Մ
TypeScript Decorators • 20159݄ݱࡏɺTypeScript 1.6.2Ͱར༻Մ • ҆ఆ൛ʹؚ·Ε͓ͯΓʢ͓ͦΒ͘෦తʹʣ༷͋Δ͕ɺ ༷ॻʹهࡌ͞Ε͍ͯͳ͍ • ໌֬ͳ༷ɺECMAଆͷࡦఆʹ߹ΘͤΑ͏ͱ͍ͯ͠Δͱਪଌ
• BabelଆECMA Proposalsʹݫີʹ४ڌ͍ͯ͠ΔͨΊɺඍົ ʹTypeScriptଆͷڍಈͱ͕ࠩ͋Δ • ྫ͑TypeScriptͷΈҾʹରͯ͠ద༻Ͱ͖Δ
͍ํ • Babel • babel --optional es7.decorators • TypeScript •
tsc --experimentalDecorators • ·ͩ྆ํͱ࣮ݧஈ֊ѻ͍ͰΦϓγϣϯ͕ඞཁ
ଞݴޠͰͷDecorators • C#ͷMetadataߏจʹىݯ͕͋ΔΑ͏Ͱɺ2001͔Β֬ೝ ͞Ε͍ͯΔ֓೦ • @Ͱॻ͖࢝ΊΔݴޠJava, PythonͳͲ • ࠓճɺJavaScript͕Կ͔ੜΈग़ͨ͠༁Ͱͳ͘ɺଞݴޠ͔Β ࠾ΓೖΕ͍ͯΔ
• [Qiita JavaScript Decorators] [ݕࡧ]
༻్
Angular 2 • ϑϨʔϜϫʔΫ"AngularJS"ͷ࣍ظϝδϟʔόʔδϣϯ • APIAngularJS 1ܥ͔Βେ෯ʹมߋ • ৽APIͰવͷΑ͏ʹDecoratorsߏจ͕Έࠐ·Ε͍ͯΔ •
Microsoftࣾ TypeScript։ൃνʔϜͱ࿈ܞ͍ͯ͠Δ • Decoratorsߏจ͕ʢଟগͷमਖ਼͋ΕͲʣഇҊʹͳΔ͜ͱ ແ͍ͱΈ͍ͯΔ
Angular 2 • TypeScriptͰ͔͠༻Ͱ͖ͳ͍Decoratorsߏจͷ͍ํ ͭ·ΓBabelͰΤϥʔͱͳΔ͍ํɺAngular 2ઐ༻ͱ ࢥ͓͍͍͍ͬͯͯ. • DecoratorsߏจΛ༻͍ͯԿ͔ࣗ࡞͢Δࡍɺ͜ͷ͍ํ ECMAతʹকདྷ͕ଋ͞Ε͍ͯͳ͍
class MyComponent { constructor(@Attribute('title') title: string) { // } }
Redux • ReduxͰreact-redux bindingʹ͓͍ͯɺDecoratorsߏจʹ ΑΔ؆қͳه๏༻ҙ͞Ε͍ͯΔ • ͔ͤͬ͘ͳͷͰ͔ͬͬͯΈΔ͔ʁ • ڧ੍Ͱͳ͍ͷͰɺΘͳͯ͘Α͍ @connect(mapStateToProps)
export default class CounterContainer { // }
core-decorators.js • https://github.com/jayphelps/core-decorators.js ɾ • DecoratorsߏจΛϑϧ׆༻ͨ͠ϥΠϒϥϦू • @readonly, @override, @deprecate,
@debounceͳͲ 10छྨ͕༻ҙ͞Ε͍ͯΔ • ͜ͷOSSɺଞݴޠͰͷDecoratorsߏจͷΘΕํͳͲ ࢀߟʹ͢Δͱࣗ࡞͘͢͠ͳΔͣ
࡞ͬͯΈͨ
wrasse CC0 Roban Kramer / Bluehead Wrasse
wrasse • https://github.com/chatwork/wrasse ɾ • npm i -S wrasse ɾ
• ChatWorkࣾॳͷnpm OSSͱͳΓ·ͨ͠ • ࣾίʔυωʔϜʹڕͷͷ͕͋ͬͨͨΊɺؔ࿈ͤ͞Α͏ • ຊޠͰϕϥɺभͰΫαϏͱݺΕΔڕ • ϫοηʔͱ͔ϥοηʔͱ͔ϫογϣΠͱ͔͖ʹݺ͍͍
wrasseԿΛ͢Δͷ? • ΫαϏ͚ͩ͋ͬͯɺDependency InjectionϥΠϒϥϦͰ͢ • AngularJSͰͷDIܦݧɺNode.js, ES2015 moduleϕʔεʹ ͓͚ΔϞοΫςετΛͲ͏ߦ͏͔ʹ͍ͭͯߟ͑ͨͷػߏ @wr.inject({
ComponentA, ComponentB, ComponentC }) export default class Application { // }
ͨͿΜ࣌ؒແ͍͚Ͳ ͍ํ
͍ํ 1/5 • WrasseΠϯελϯεΛੜ͢Δ import Wrasse from 'wrasse'; const wr
= new Wrasse(); export default wr;
• ੜͨ͠WrasseΠϯελϯεΛimportͯ͠ϞδϡʔϧΛొ JNQPSUXSGSPNXSBTTFTJOHMFUPO8SBTTF؎ٝأةٝأ JNQPSU@$PNQPOFOU"GSPNDPNQPOFOUB㹋⡤JNQPSU JNQPSU@$PNQPOFOU#GSPNDPNQPOFOUC JNQPSU\ $PNQPOFOU" $PNQPOFOU# ^GSPNNPEVMFLFZT㹋⡤ㄎן⳿ׅךؗ٦JNQPSU
XSTFU $PNQPOFOU" @$PNQPOFOU" ؗ٦ה㹋⡤秡➰ֽג涫ꐮ XSTFU $PNQPOFOU# @$PNQPOFOU# FYQPSUEFGBVMUXS ͍ํ 2/5
• ొͨ͠ϞδϡʔϧΛݺͿͨΊͷΩʔΛએݴ 㛙暕ח׃ֽל4ZNCPM崞欽 FYQPSUDPOTU$PNQPOFOU"4ZNCPM $PNQPOFOU" FYQPSUDPOTU$PNQPOFOU#4ZNCPM $PNQPOFOU# 4ZNCPMָ䱰欽׃חְֻ㜥さכ俑㶵ד圓זְ
FYQPSUDPOTU$PNQPOFOU$$PNQPOFOU$ FYQPSUDPOTU$PNQPOFOU%$PNQPOFOU% ͍ํ 3/5
• ࣮Ͱ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
• ςετͰCFGPSF&BDIͳͲͰ湫䱸4FU EFTDSJCF *OKFDUNPDL \ CFGPSF&BDI \ ٌحؙ䊴׃剏ִ "QQMJDBUJPOQSPUPUZQF$PNQPOFOU#.PDL$PNQPOFOU#
^ JU TIPVMECFJOKFDUFE.PDL$PNQPOFOU$ \ DPOTUBQQOFX"QQMJDBUJPO BQQ$PNQPOFOU$.PDL$PNQPOFOU$JUⰻד〳 ^ ^ ͍ํ 5/5
Կʹ͏͔ • ͷϩδοΫΛ࣋ͨͳ͍Singleton ControllerͷΑ͏ͳՕॴ ͷϞοΫςετରࡦ • ࣾҊ݅ͰطʹwrasseΛ࠾༻͍ͯ͠Δ ʢਅ૬ٯͰɺۀίʔυ͔ΒDIػߏͷΈநग़ͨ͠ʣ • ࣾҊ݅Ͱ࠾༻ͱ͍͏͜ͱɺBabel
--optional༻த • @kyo_agoŰƅŘŤƃͷԼͰɺׂͱ͖উखΒͤͯΒͬͯ·͢
·ͱΊ
·ͱΊ • DecoratorsߏจStage 1͚ͩͲTypeScriptਞӦਐΊ͍ͯΔ ෆࢥٞͳཱͪҐஔͷϓϩϙʔβϧ • Angular 2͕ຊ֨తʹ࠾༻ͪ͠ΌͬͨͨΊɺͨͿΜੜ͖Δ • ES7ͬΆ͞ΛઌऔΓ͢ΔͳΒDecoratorsͬͯΈ·ͤΜ͔
એ • AngularϢʔβάϧʔϓ ng-kyoto ͷୈࡾճͱͳΔMeetup͕ ։࠵ܾఆ • ng-kyoto Angular Meetup
#3 ɾ • 201511݄22ʢʣ • ։࠵બఆதɺ͓ͦΒ͘ژࢢ • ਖ਼ࣜͳࠂɺืू։࢝10݄தΛ༧ఆ • ΈΜͳདྷͯͶ
Thank you for listening! Sep 29, 2015 ୈ60ճHTML5ͱ͔ษڧձ @armorik83