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.2k
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
310
Nuxt.js のbuid速度が早くなるオプションのいくつかについて / Increase-build-speed-for-Nuxt.js
sunecosuri
1
1.2k
about-vue-hooks.pdf
sunecosuri
1
660
スーパーエンジニアを「育て」られるか? / how-to-let-an-engineer-to-grow-up-into-a-hacker
sunecosuri
0
1.3k
Nuxt.js におけるCSPの連携について / content security policy for Nuxt.js
sunecosuri
0
2.3k
ロリポップマネージドクラウドでAlexaスキルを開発しよう / let's development alexa skill by lolipop managed cloud
sunecosuri
1
160
マネージドクラウドのリリース速度を上げるお話 / Increase release speed for managed cloud
sunecosuri
2
310
Reconsider Content Security Policy for WEB Application
sunecosuri
0
83
Other Decks in Programming
See All in Programming
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
580
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
1
470
Prolog入門
qnighy
4
1k
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.6k
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
Jakarta EE meets AI
ivargrimstad
1
520
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
150
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
180
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
A Philosophy of Restraint
colly
202
16k
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
RailsConf 2023
tenderlove
28
810
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
Building Your Own Lightsaber
phodgson
101
6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Agile that works and the tools we love
rasmusluckow
327
20k
Into the Great Unknown - MozCon
thekraken
29
1.4k
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αϒηοτతͳܗͰαϙʔτ͢ΔͷͰɺ
ݱঢ়ແཧͯ͠Ҡߦ͢Δඞཁͳͦ͞͏ɻ ͳʹ͕ద͔νʔϜέʔεʹΑͬͯҟͳΔͷͰɺͪΐ͏Ͳ͍͍མ ͱ͠ॴΛݟ͚ͭΑ͏
͓͠·͍