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.3k
about-vue-hooks.pdf
sunecosuri
1
680
スーパーエンジニアを「育て」られるか? / 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
84
Other Decks in Programming
See All in Programming
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
as(型アサーション)を書く前にできること
marokanatani
10
2.7k
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
190
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Agile that works and the tools we love
rasmusluckow
327
21k
Scaling GitHub
holman
458
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Building an army of robots
kneath
302
43k
The Cult of Friendly URLs
andyhume
78
6k
A Tale of Four Properties
chriscoyier
156
23k
Docker and Python
trallard
40
3.1k
Six Lessons from altMBA
skipperchong
27
3.5k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Fireside Chat
paigeccino
34
3k
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αϒηοτతͳܗͰαϙʔτ͢ΔͷͰɺ
ݱঢ়ແཧͯ͠Ҡߦ͢Δඞཁͳͦ͞͏ɻ ͳʹ͕ద͔νʔϜέʔεʹΑͬͯҟͳΔͷͰɺͪΐ͏Ͳ͍͍མ ͱ͠ॴΛݟ͚ͭΑ͏
͓͠·͍