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
350
Nuxt.js のbuid速度が早くなるオプションのいくつかについて / Increase-build-speed-for-Nuxt.js
sunecosuri
1
1.4k
about-vue-hooks.pdf
sunecosuri
1
720
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
210
マネージドクラウドのリリース速度を上げるお話 / Increase release speed for managed cloud
sunecosuri
2
330
Reconsider Content Security Policy for WEB Application
sunecosuri
0
98
Other Decks in Programming
See All in Programming
Team operations that are not burdened by SRE
kazatohiei
1
310
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
450
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
110
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
4.7k
VS Code Update for GitHub Copilot
74th
2
630
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
NPOでのDevinの活用
codeforeveryone
0
800
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
610
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
51
33k
PipeCDのプラグイン化で目指すところ
warashi
1
270
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
4
720
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
The Cult of Friendly URLs
andyhume
79
6.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Invisible Side of Design
smashingmag
301
51k
For a Future-Friendly Web
brad_frost
179
9.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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αϒηοτతͳܗͰαϙʔτ͢ΔͷͰɺ
ݱঢ়ແཧͯ͠Ҡߦ͢Δඞཁͳͦ͞͏ɻ ͳʹ͕ద͔νʔϜέʔεʹΑͬͯҟͳΔͷͰɺͪΐ͏Ͳ͍͍མ ͱ͠ॴΛݟ͚ͭΑ͏
͓͠·͍