Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11

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 Ofﬁcial 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

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-support͸Vue 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