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
Vue.js × TypeScript でclass style componentを廃止した...
Search
sunecosuri
June 18, 2019
Programming
2
4.3k
Vue.js × TypeScript でclass style componentを廃止した話 / migrated-class-style-component -for-vuejs-and-typescrpit
https://fukuokats.connpass.com/event/131632/
sunecosuri
June 18, 2019
Tweet
Share
More Decks by sunecosuri
See All by sunecosuri
'Securing Web Apps with Modern Platform Features' を意訳してみる / Translate Securing Web Apps with Modern Platform Features
sunecosuri
2
360
Nuxt.js のbuid速度が早くなるオプションのいくつかについて / Increase-build-speed-for-Nuxt.js
sunecosuri
1
1.4k
about-vue-hooks.pdf
sunecosuri
1
730
Nuxt.js におけるCSPの連携について / content security policy for Nuxt.js
sunecosuri
0
2.5k
ロリポップマネージドクラウドでAlexaスキルを開発しよう / let's development alexa skill by lolipop managed cloud
sunecosuri
1
220
マネージドクラウドのリリース速度を上げるお話 / Increase release speed for managed cloud
sunecosuri
2
330
Reconsider Content Security Policy for WEB Application
sunecosuri
0
100
Other Decks in Programming
See All in Programming
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
190
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
180
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.6k
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
210
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
24
9.2k
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.8k
rage against annotate_predecessor
junk0612
0
140
Claude Codeで挑むOSSコントリビュート
eycjur
0
180
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
130
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
4 Signs Your Business is Dying
shpigford
184
22k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Building Adaptive Systems
keathley
43
2.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Transcript
ɹMigrated "class style component for Vue.js and TypeScrpit Vue.js ×
TypeScriptͰ class style componentΛ ഇࢭͨ͠ @sunecosuri Date: 2019-06-18 Fukuoka.ts #1
GMOϖύϘ ΤϯδχΞ ϗεςΟϯάࣄۀ෦ϗεςΟϯάάϧʔϓ ໐ւ ߂ً / @sunecosuri
ରऀ • V u e . j s ͱ T
y p e S c r i p t Ͱ ී ஈ ։ ൃ ͠ ͯ Δ ํ • v u e - c l a s s - c o m p o n e n t ͱ v u e - p r o p e r t y - d e c o r a t o r ར ༻ ऀ • V u e . j s ϓ ϩ δ Σ Ϋ τ ʹ ͓ ͍ ͯ T y p e S c r i p t ಋ ೖ Λ ݕ ౼ ͠ ͯ ͍ Δ ํ
͢͜ͱ • Ҡߦͨ͠ϓϩδΣΫτͷ֓ཁ • Vue.js ͱ TypeScript ͷؔ Object style
componentͱClass style component • Vue3.0ͷClass APIͷϓϩϙʔβϧͷಈͱ݁Ռ • Ҡߦʹ౿ΈΔͨΊʹஅͨ͜͠ͱ • Ҡߦͨ͠ײ
ͱ͋ΔϓϩδΣΫτ Nuxt.jsΛར༻ͯ͠։ൃ(JavaScript) 2017 TypeScript ͷಋೖɹʢ8݄ʣ 2017 Vue2.5 release ʢ10݄ʣ ɾTypeScript
͕ެࣜͰαϙʔτ͞ΕΔ 2019 Class style component͔Β Object style componentʹҠߦʢ6݄ʣ
Vue.js ͱ TypeScript ʹ͍ͭͯ
Some notatio ̎ͭͷॻ͖ํ͕ओྲྀ Object style Class style • Vue2.5Ҏ߱Ͱॻ͚Δॻ͖ํ •
Vue.extend() Ͱexportͨ͠Object Λϥοϓ͢Δॻ͖ํ • vue-class-component ओʹ͏ • σίϨʔλΛར༻ͨ͠Ϋϥεϕʔεͷ ه๏ͳͷͰAngularར༻ऀ͠Έ ͍͢
standard ඪ४ͷॻ͖ํ • ϘλϯΛΫϦοΫ͢ΔͱΧϯτΞοϓ͢Δcomponent • ֤componentͷscriptϒϩοΫΛݟͯΘ͔Δ௨Γɺ࣮ଶ ΦϒδΣΫτ
Class-style Class-style • vue-class-componentΛimport • τϥϯεύΠϧ࣌ʹObjectͱͯ͠ৼΔ· ͏ • ඪ४ͷه๏ͱେ͖͘ҧ͏ॻ͖ຯ •
AngularReactͷclass componentΛॻ ͍͍ͯΔਓൺֱత͠Έ͍͢ҹ • ҰํͰɺຊདྷͷObject styleͱͷϚοϐϯά ͕Ͱ͖ͳ͍ͱϋϚΓ͍͢
Object-style Object-style • vue-class-componentΛimport • Vue.extend() Ͱϥοϓ͢Δ͚ͩͰखܰʹܕิ͕͞Ε ͯෑډ͕͍ • τϥϯεύΠϧ࣌ʹObjectͱͯ͠ৼΔ·͏
• ඪ४ͷه๏ͱେ͖͘ҧ͏ॻ͖ຯ • Angularclass componentͷReactΛॻ͍͍ͯΔਓ ͠Έ͍͢ҹ • ҰํͰɺຊདྷͷObject styleͱͷϚοϐϯά͕Ͱ͖ͳ͍ ͱϋϚΓ͍͢
ͲͪΒ͕ΘΕͯΔ͔ w WVFQSPQFSUZEFDPSBUPSͱ WVFDMBTTDPNQPOFOUͷซ༻͕ΛΊΔ DMBTTTUZMF w 7VF$-*ͰϓϦηοτΛ5ZQF4DSJQUʹͯ͠ɺબࢶΛ͢ ͯʮ:&4ʯʹ͢Δͱ্هͷϥΠϒϥϦ͕Πϯετʔϧ ͞ΕΔ 5ZQF4DSJQUͰ7VFΛѻ͏ʹ͋ͨͬͯ
$MBTTTUZMFσϑΝΫτελϯμʔυͩͱ͍͑ΔͩΖ͏ ˞*$4.&%*"ͷࣛ͞ΜʹΑΔπΠʔτ
w 7VFҎલɺ7VFΠϯελϯεͷܕใ͕ਖ਼ৗʹղܾͰ͖ͣ ৗʹUIJT͕BOZͱͳΔݱ͕͋ͬͨ ʹ࣮࣭+4Λॻ͍͍ͯΔͷͱશ͘มΘΒͳ͍ঢ়ଶ w WVFDMBTTDPNQPOFOUWVFQSPQFSUZEFDPSBUPS Λಋೖ͢Δ͜ͱͰɺUIJTΛ࢝Ίͱͨ͠ΠϯελϯεͷܕใΛ ਖ਼ৗʹղܾ࣮ͯ͠ߦ͢Δ͜ͱ͕Ͱ͖Δ͜ͱΛϝϦοτͱײ͡ ࠾༻͍ͯͨ͠ ͜Ε·Ͱ$MBTT4UZMFΛ࠾༻͍ͯͨ͠എܠ
ͳͥDMBTTTUZMFΛഇࢭ͠ɺ 0CKFDUTUZMFͷҠߦΛܾΊͨͷ͔ʁ
͖͔͚ͬVue3.0ͷrfcϦϙδτϦͰVue.jsͷ࡞ऀ͕ Class styleΛඪ४Ͱαϙʔτ͢Δํ(Class API)ΛऔΓԼ͛ͨ IUUQTHJUIVCDPNWVFKTSGDTQVMMJTTVFDPNNFOU
ݱࡏͷClassAPIͷఏڙʹؔ͢Δ • ࣮ͷෳࡶ͞ ଟ༷ͳॻ͖ํΛڐ༰͢ΔͨΊʹClassͱObject Componentͷલޙʹม͢Δ ίʔυΛؚΊΔඞཁ͕͋Δ(tree shakingͰ͖ͳ͍) • ༧ޠͱͳͬͨϝιουͷωʔϜεϖʔεিಥ created,
mountedͱ͍ͬͨlifecycle methodͳͲͷ༧ޠͱͳΔϝιου໊ ͕ॏෳͨ࣌͠ͷղܾࡦ͕ͲΕެਖ਼͞Λܽ͘ ্هͷʹΑΓɺ༏ΕͨTypeScriptਪαϙʔτΛඋ͑ͨସAPIΛఏڙ͢Δ͜ ͱΛతͱ͍͕ͯͨ͠ୡͰ͖ͦ͏ʹͳ͍ ͬ͘͟Γҙ༁͢Δͱ
͜ΕΒΛ౿·͑ͯͦͷͱ͖νʔϜͰஅͨ͜͠ͱ • TypeScriptͷಋೖॳબࢶͱͯ͠Class styleҰ͕ͩͬͨɺ Object styleͷܕਪ͕େ෯ʹվળ͍ͯ͠Δݱࡏɺ ΠϨΪϡϥʔͳॻ͖ํͰ͋ΔClass styleʹͩ͜ΘΓଓ͚Δඞཁ͕ͳ͘ͳͬͨ • ϝδϟʔΞοϓσʔτޙͷҠߦΛݟӽͨ͠ͱ͖ɺ
େ͖Ίͷෛ࠴ʹͳΔ͔͠Εͳ͍ • ެࣜͷϥΠϒϥϦͱ͍͑ɺvue-class-component͕͍ͭ·Ͱϝϯς͞ΕΔ͔ Θ͔Βͳ͍ • Object StyleͩͱɺυΩϡϝϯτͱͷরΒ͠߹Θ͕͍ͤ͢͠ͷͰɺ ৽͘͠νʔϜϝϯόʔ͕ՃΘͬͨ࣌ͷϋʔυϧ͕͘ͳΓͦ͏
ิ vue-class-component Vue 3ͰҾ͖ଓ͖αϙʔτ͞Ε͍ͯ͘͜ͱΛޙ ίΞνʔϜϝϯόʔͷ @LinusBorg ͕ද໌ https://github.com/vuejs/vue-cli/issues/4086#issuecomment-498036338
0CKFDUTUZMFʹҠߦͨ͠ • 190ίϯϙʔωϯτۙ͘ෳਓͰ1िؒऑͰΤΠϠοͱҠߦͨ͠ ֤styleڞଘͰ͖ΔͷͰগͣͭ͠ஔ͖͑ΔͰΞϦ • υΩϡϝϯτͱͷরΒ͠߹Θ͕͍ͤ͢͠ͷͰɺ ৽͘͠νʔϜϝϯόʔ͕ՃΘͬͨ࣌ͷϋʔυϧ͕͘ͳͬͨ • props ͷܕఆٛPropTypeͱ͍͏interfaceΛ͏ඞཁ͕͋Δ
• DOMૢ࡞Λ͢Δࡍʹར༻͢Δthis.$refsʹؔͯ͠ as Ͱ͠ͷ͙ • render computed ʹΓΛannotation͢Δඞཁ͕͋Δ https://vuejs.org/v2/guide/typescript.html#Annotating-Return-Types
·ͱΊ • Vue.jsݱঢ়ෳͷॻ͖ํΛڐ༰͠·͕͢ɺಛʹͩ͜ΘΓ͕ͳ͚Ε ඪ४ͷॻ͖ํ͔Βҳͨ͠Class StyleΑΓ͔Object Styleʹ د͍ͤͯͬͨํ͕ࠓޙͷΞοϓσʔτʹै͍͢͠Մೳੑ͕ߴ͍ͱ அ͠Ҡߦʹ౿ΈΓ·ͨ͠ • Ҿ͖ଓ͖ClassStyleαϒηοτతͳܗͰαϙʔτ͢ΔͷͰɺ
ݱঢ়ແཧͯ͠Ҡߦ͢Δඞཁͳͦ͞͏ɻ ͳʹ͕ద͔νʔϜέʔεʹΑͬͯҟͳΔͷͰɺͪΐ͏Ͳ͍͍མ ͱ͠ॴΛݟ͚ͭΑ͏
͓͠·͍