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.3k
ES7 Decorators
第60回HTML5とか勉強会 - ECMAScript 2015 & 2016での発表に使用した資料です
OKUNOKENTARO
September 29, 2015
Tweet
Share
More Decks by OKUNOKENTARO
See All by OKUNOKENTARO
トレタO/X アーキテクチャ移行記 Next.js App Router化への道のり / TORETA TECH UPDATE 1
okunokentaro
5
11k
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
190
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
10k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.3k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.5k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.7k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
670
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.4k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1.1k
Other Decks in Programming
See All in Programming
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
480
童醫院敏捷轉型的實踐經驗
cclai999
0
180
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
130
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
340
エラーって何種類あるの?
kajitack
5
300
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
150
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
17
3.3k
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
300
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
140
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
430
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
92
6.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Facilitating Awesome Meetings
lara
54
6.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Thoughts on Productivity
jonyablonski
69
4.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Making Projects Easy
brettharned
116
6.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Practical Orchestrator
shlominoach
188
11k
GitHub's CSS Performance
jonrohan
1031
460k
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