Slide 1
Slide 1 text
"VH
W@UPLZP5BLVNB)"/"5"/*!QPUBUPE
Vue.js with TSX
From Vue 2.x to Vue 3
Slide 2
Slide 2 text
## Role
- LINE Corp. Senior Frontend Enginner
- ElevenBack LLC. CEO
## OSS Activity
- @nuxtjs/dayjs creator and maintainer
- Vue.js Japanese Official Document Co-maintainer
## Coding Style
- User Interface First
- Nuxt.js with TSX and Provider/Injection
Takuma HANATANI
@potato4d
Slide 3
Slide 3 text
Agenda
- Vue.js ͱ TSX
- TSX Λར༻͢ΔγνϡΤʔγϣϯ
- ͜Ε·Ͱͱ͜Ε͔Β From Vue 2.x to Vue 3
- SFC ͱ TSX ͷ͍͚
- TSX Λར༻͢Δ্Ͱͷҙ
Slide 4
Slide 4 text
Vue.js ͱ TSX
Slide 5
Slide 5 text
Vue.js ͱ͍͑4'$
HTML, CSS, JS ͕ηοτͷ SFC ͕ಛత
Slide 6
Slide 6 text
Vue.js Ͱ JSX
ϑΝΠϧࣗମ JS Ͱ style ͳ͚Ε Vue Template Ͱͳ͍
Slide 7
Slide 7 text
Vue.js Ͱ TSX
Vue + TypeScript ࣌ TypeScript JSX ͱͯ͠هड़͢Δ
Slide 8
Slide 8 text
Vue 3.0
Native TSX Support
Slide 9
Slide 9 text
Why?
Slide 10
Slide 10 text
How?
Slide 11
Slide 11 text
TSX Λར༻͢ΔγνϡΤʔγϣϯ
Slide 12
Slide 12 text
case 1: ϑΝΠϧͰͷίϯϙʔωϯτͷׂ
Slide 13
Slide 13 text
case 1: ϑΝΠϧͰͷίϯϙʔωϯτͷׂ
ͦΕͧΕ li Ͱදݱ͍ͨ͠
Slide 14
Slide 14 text
case 1: ϑΝΠϧͰͷίϯϙʔωϯτͷׂ
ͦΕͧΕ li Ͱදݱ͍ͨ͠
ISO8601 to YYYY/MM/DD͍ͨ͠
Slide 15
Slide 15 text
case 1: ϑΝΠϧͰͷίϯϙʔωϯτͷׂ
ͦΕͧΕ li Ͱදݱ͍ͨ͠
ISO8601 to YYYY/MM/DD͍ͨ͠
্ͱԼͷ border ඃΒͣදݱ͢Δ
Slide 16
Slide 16 text
case 1: ϑΝΠϧͰͷίϯϙʔωϯτͷׂ
ͦΕͧΕ li Ͱදݱ͍ͨ͠
ISO8601 to YYYY/MM/DD͍ͨ͠
্ͱԼͷ border ඃΒͣදݱ͢Δ
ϑΝΠϧΛ͚Δʁ
Slide 17
Slide 17 text
case 1: ϑΝΠϧͰͷίϯϙʔωϯτͷׂ
ͦΕͧΕ li Ͱදݱ͍ͨ͠
ISO8601 to YYYY/MM/DD͍ͨ͠
্ͱԼͷ border ඃΒͣදݱ͢Δ
ϑΝΠϧΛ͚Δʁ
pMUFS DPNQVUFE ͚Δ
Slide 18
Slide 18 text
case 1: ϑΝΠϧͰͷίϯϙʔωϯτͷׂ
TheItemList.tsx
·ͣී௨ʹࢠίϯϙʔωϯτΛׂޙɺͰݺͼग़͢
Slide 19
Slide 19 text
case 1: ϑΝΠϧͰͷίϯϙʔωϯτͷׂ
TheItemList.tsx
TheItemList.tsx
·ͣී௨ʹࢠίϯϙʔωϯτΛׂޙɺͰݺͼग़͢
Slide 20
Slide 20 text
case 1: ϑΝΠϧͰͷίϯϙʔωϯτͷׂ
TheItemList.tsx
TheItemList.tsx
ಉ͡ϑΝΠϧͰׂΛ࣮ݱ
-σʔλͷม͕ࢠίϯϙʔωϯτʹҠৡ͞Εݟ௨͕͠ྑ͍
-ҰํͰࢠίϯϙʔωϯτexport͞Ε͍ͯͳ͍ͷͰ҆શ
Slide 21
Slide 21 text
case 2: ίϯύΠϥϨΠϠʔͰͷ HTML ྖҬͷܕݕࠪ
Slide 22
Slide 22 text
case 2: ίϯύΠϥϨΠϠʔͰͷ HTML ྖҬͷܕݕࠪ
Slide 23
Slide 23 text
case 2: ίϯύΠϥϨΠϠʔͰͷ HTML ྖҬͷܕݕࠪ
Slide 24
Slide 24 text
Έ Pros / Cons ͕྆ํ͋Δཁૉ
w .tsxͷ߹CSSΛॻ͘༨͕ͳ͘ͳΔ
w CSSͷϧʔϧ͕ͳ͍߹୯७ʹίʔυ࣭ͷԼΛট͘
w ҰํͰTailwindͳͲΛར༻͍ͯ͠Δ߹ͳͲͰɺscopedͷཞ༻Λආ͚ΒΕΔ
w named export ͕Ͱ͖Δ
w default export named export ͱൺֱͯ͠ྼΔ෦͕ଟ͍
• ৄࡉ https://engineering.linecorp.com/ja/blog/you-dont-need-default-export/
Slide 25
Slide 25 text
From Vue 2.x to Vue 3
Slide 26
Slide 26 text
From Vue 2.x
Slide 27
Slide 27 text
Vue 2 ڥʹ͓͍ͯඞཁͳͷ
w Vue 2
w JSXΛղऍͰ͖ΔTypeScriptͷ։ൃڥ
w ΧελϜͷܕఆٛ
w ೖ͍ͬͯͳ͍߹babel-plugin-transform-vue-jsx
w vue-tsx-support (wonderful-panda/vue-tsx-support)
Slide 28
Slide 28 text
$ yarn add -D babel-plugin-transform-vue-jsx ...
Slide 29
Slide 29 text
$ yarn add -D babel-plugin-transform-vue-jsx ...
Slide 30
Slide 30 text
$ yarn add -D typescript
Slide 31
Slide 31 text
$ yarn add -D typescript
Slide 32
Slide 32 text
@1
Slide 33
Slide 33 text
this.$emit('foo') ʹରԠ͢Δ onFoo ͕ఆٛͰ͖ͳ͍
Slide 34
Slide 34 text
props ͷܕใ͕Ҿ͖ճͤͳ͍
Slide 35
Slide 35 text
$ yarn add -D vue-tsx-support # ͪͳΈʹେମܕఆٛ
Slide 36
Slide 36 text
onFoo ͕ΤϥʔʹͳΔ͜ͱΛ੍
Slide 37
Slide 37 text
props ͷܕใΛਖ਼͘͠ݕՄೳʹ
Slide 38
Slide 38 text
To Vue 3
Slide 39
Slide 39 text
Vue 3 ڥʹ͓͍ͯඞཁͱ͞ΕΔͷ
w Vue 3
w Vue + TypeScript ڥ
w ೖ͍ͬͯͳ͍߹@vue/babel-plugin-transform-vue-jsx
Slide 40
Slide 40 text
Vue.js ίΞ (runtime-dom) ʹ TSX ͷܕఆ͕ٛՃ͞Εɺಠࣗఆ͕ٛෆཁʹ
https://github.com/vuejs/vue-next/blob/master/packages/runtime-dom/types/jsx.d.ts
Slide 41
Slide 41 text
ΦϑΟγϟϧ JSX ϓϥάΠϯ Babel 7 Ҏ߱ͷܗࣜʹ
https://github.com/vuejs/jsx
Slide 42
Slide 42 text
جຊతͳTSXͷར༻ܕݕࠪࠐΈͰωΠςΟϒͰར༻Մೳ
Slide 43
Slide 43 text
Ͱ͖ͳ͍͜ͱ
Slide 44
Slide 44 text
5ZQF4DSJQU$PNQJMFS͚ͩͰશʹಈ͔ͳ͍
https://github.com/potato4d/vue-next-tsx-only-tsc
Slide 45
Slide 45 text
TypeScript Compiler ͚ͩͰಈ͔ͳ͍ཧ༝ ڵຯ͋Δਓ͚
w Vue 3 Ͱ3FOEFS'VODUJPOͷத͕มΘͬͯ3FBDUͱ΄΅͍ۙ"1*ʹͳͬͨ
w ҰํͰશʹ$PNQBUJCMFͰͳ͘ɺDIJMESFOͷऔΓѻ͍ʹҧ͍͕͋Δ
w Өڹ͕ग़Δͷ childNode ͕ෳ͋Δ߹ͷղऍ͕ҧ͏͜ͱ
w ݁Ռͱͯ͠ childNode ͕ෳͷ߹ʹ͏·͘ಈ࡞͠ͳ͍
w ͦͷͨΊ…
7VFKTͰ+49Λ͏߹ॾʑͷ߹ΛٵऩͰ͖Δ#BCFMϓϥάΠϯ͕ඞਢͱͳΔ
Slide 46
Slide 46 text
emits Λఆٛͯ͠ onXXX ·ͩແཧ
Slide 47
Slide 47 text
emits / on ͕ಈ͔ͳ͍ཧ༝ ڵຯ͋Δਓ͚
w emits string[] Λड͚औΔ͕ as const ͨ͠ͱͯͦ͠Εจࣈྻͱͯ͠ॲཧ͞ΕΔ
w ίϯϙʔωϯτʹthis[`on${this.emits[0]}`] ͱͯͦ͠ͷղऍϥϯλΠϜ
w ϏϧυλΠϜͰ Literal Ͱ͋ͬͯҰҙʹܾఆͰ͖ͳ͍
w ͦͷͨΊ…
FNJUTPO999ٕज़తʹͦ͠͏
Slide 48
Slide 48 text
vue-tsx-supportVue 3Ͱണ͕͢
Slide 49
Slide 49 text
SFC or TSX
Slide 50
Slide 50 text
Comparison of SFC and TSX
Vue Template ͕એݴతͰ͋Γར༻͍͢͠
ಛʹslotߏจͳͲTSXͰදݱͮ͠Β͍
Scoped CSS Λ࢝Ίͱͨ͠ॊೈͳελΠϧهड़
Vue 3 ͰJSͷมΛCSSͰऔΓճͤΔ
vue-template-compilerͰ࠷దԽ͞ΕΔ
ProductionͰ࠷దͳHTMLΛग़ՙͰ͖Δ
ԿʹͤΑ࠷Ұൠతͳه๏Ͱ͋Δ
σϑΥϧτͰेʹར༻Ͱ͖Δ
ଟ͘ͷݱͰར༻͍͢͠
ίϯϙʔωϯτͷཻΛখ͘͞อ͍ͪ͢
SFCංେԽ͍͢͠
ܕݕ͕ࠪίϯύΠϥͰͷϏϧυλΠϜ
ΤσΟλͱࠜຊతʹҧ͏Ξϓϩʔν͕Մೳ
CSSϑϨʔϜϫʔΫΛ९क͍ͤ͢͞
੍ݶ͕ڧ͍͜ͱͷཪฦ͠Ͱ͋Δ
named export ͳͲSFC͕Ͱ͖ͳ͍දݱ͕Մೳ
NativeͳJavaScriptͰ͋Δʹ༏Ґੑ͕͋Δ
Slide 51
Slide 51 text
Style-First / Slot-First =
JavaScript First =
Slide 52
Slide 52 text
ར༻্ͷҙ
Slide 53
Slide 53 text
Vue TSX ࣗମͷҙ
w Vue 2.xݱࡏͰɺΦϑΟγϟϧαϙʔτ͕ͳ͍͜ͱ͋Γ0QUJPOBMͳखஈ
w https://jp.vuejs.org/v2/guide/render-function.html
w TemplateΛجຊͱ͠ɺΑΓγϏΞͳૢ࡞Λඞཁͱ͢Δͱ͖ͷAlternative
w ࠷దԽͷ෦ʹ͓͍ͯશͰͳ͍
Slide 54
Slide 54 text
2.x to 3 ͷҙ
w Vue 3Ͱͷ७ਮͳTSXղऍͷࢿྉʹ͍͠
w ͳΤίγεςϜॆ࣮ͯ͠Ώ͕͘ɺόϯυϧؔ࿈ͷελϯυΞϩʔϯͳιϦϡʔγϣϯ
ͷݴٴ͕ͳ͍
w https://v3.vuejs.orgʹJSXͷৄࡉͳઆ໌͋Δ͕ɺTSXͳ͍
w Vue 3Ͱemits͕ೖΔ͕ɺҎલonXXXͱରԠͳͲͳ͍
w ͦͦLiteralͰ͋ͬͯจࣈྻͷ߹TSతʹͦ͠͏
w vue-tsx-support͕Vue 3ରԠ͠ͳ͍தɺpropsͰޡຐԽ͢ͳͲΛݕ౼͢Δඞཁ͋Γ
Slide 55
Slide 55 text
Βͳ͍ͱϋϚΔ Vue 2.x Ͱͷҙ
w TSX ϑΝΠϧͰͷΈimportΛؚΊશମతʹΤϥʔ͕ࢭ·Βͳ͍
w TS Server͕૬ੑͷ߹ࢭ·Δ͜ͱ͕͋ΔͷͰ544FSWFSΛ࠶ىಈ͢Δ
w ύοέʔδΠϯετʔϧͳͲͰnode_modules͕มΘΔͱ͖ҰԠҙ
w ଞʹࡉ͔ͳ͜ͱ৭ʑͱ
w ͍ٙͬͯͯͷࠔΓ͕͋ͬͨΒ࠙ձͰTwitterͰͲ͏ͧʂ
w @potato4d
Slide 56
Slide 56 text
Vue([SFC, TSX]) =
Slide 57
Slide 57 text
Vue.js ͰͷࠔΓ͝ͱͳͲ͋Εɺ͓ؾܰʹ͝૬ஊ͍ͩ͘͞
https://elevenback.co.jp