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
VS Code Update for GitHub Copilot
74th
2
630
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
11
2.9k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
650
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
510
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
160
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
5
2.2k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
280
RailsGirls IZUMO スポンサーLT
16bitidol
0
170
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
4
6.4k
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
430
Featured
See All Featured
Done Done
chrislema
184
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Bash Introduction
62gerente
614
210k
Code Review Best Practice
trishagee
69
18k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Making Projects Easy
brettharned
116
6.3k
Designing for Performance
lara
610
69k
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αϒηοτతͳܗͰαϙʔτ͢ΔͷͰɺ
ݱঢ়ແཧͯ͠Ҡߦ͢Δඞཁͳͦ͞͏ɻ ͳʹ͕ద͔νʔϜέʔεʹΑͬͯҟͳΔͷͰɺͪΐ͏Ͳ͍͍མ ͱ͠ॴΛݟ͚ͭΑ͏
͓͠·͍