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

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

2020/08/25 の #v_tokyo11 で話した登壇スライドです。

A54b31d4ebbce222dff88a5c42bac033?s=128

Potato4d(Hanatani Takuma)

August 25, 2020
Tweet

Transcript

  1. "VH W@UPLZP5BLVNB)"/"5"/*!QPUBUPE Vue.js with TSX From Vue 2.x to Vue

    3
  2. ## 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
  3. Agenda - Vue.js ͱ TSX - TSX Λར༻͢ΔγνϡΤʔγϣϯ - ͜Ε·Ͱͱ͜Ε͔Β

    From Vue 2.x to Vue 3 - SFC ͱ TSX ͷ࢖͍෼͚ - TSX Λར༻͢Δ্Ͱͷ஫ҙ఺
  4. Vue.js ͱ TSX

  5. Vue.js ͱ͍͑͹4'$ HTML, CSS, JS ͕ηοτͷ SFC ͕ಛ௃త

  6. Vue.js Ͱ΋ JSX ϑΝΠϧࣗମ΋ JS Ͱ style ΋ͳ͚Ε͹ Vue Template

    Ͱ΋ͳ͍
  7. Vue.js Ͱ΋ TSX Vue + TypeScript ࣌୅͸ TypeScript JSX ͱͯ͠هड़͢Δ

  8. Vue 3.0 Native TSX Support

  9. Why?

  10. How?

  11. TSX Λར༻͢ΔγνϡΤʔγϣϯ

  12. case 1: ϑΝΠϧ಺Ͱͷίϯϙʔωϯτͷ෼ׂ

  13. case 1: ϑΝΠϧ಺Ͱͷίϯϙʔωϯτͷ෼ׂ ͦΕͧΕ͸ li Ͱදݱ͍ͨ͠

  14. case 1: ϑΝΠϧ಺Ͱͷίϯϙʔωϯτͷ෼ׂ ͦΕͧΕ͸ li Ͱදݱ͍ͨ͠ ISO8601 to YYYY/MM/DD͍ͨ͠

  15. case 1: ϑΝΠϧ಺Ͱͷίϯϙʔωϯτͷ෼ׂ ͦΕͧΕ͸ li Ͱදݱ͍ͨ͠ ISO8601 to YYYY/MM/DD͍ͨ͠ ໪࿦্ͱԼͷ

    border ͸ඃΒͣදݱ͢Δ
  16. case 1: ϑΝΠϧ಺Ͱͷίϯϙʔωϯτͷ෼ׂ ͦΕͧΕ͸ li Ͱදݱ͍ͨ͠ ISO8601 to YYYY/MM/DD͍ͨ͠ ໪࿦্ͱԼͷ

    border ͸ඃΒͣදݱ͢Δ ϑΝΠϧΛ෼͚Δʁ
  17. case 1: ϑΝΠϧ಺Ͱͷίϯϙʔωϯτͷ෼ׂ ͦΕͧΕ͸ li Ͱදݱ͍ͨ͠ ISO8601 to YYYY/MM/DD͍ͨ͠ ໪࿦্ͱԼͷ

    border ͸ඃΒͣදݱ͢Δ ϑΝΠϧΛ෼͚Δʁ pMUFS DPNQVUFE ෼͚Δ
  18. case 1: ϑΝΠϧ಺Ͱͷίϯϙʔωϯτͷ෼ׂ TheItemList.tsx ·ͣ͸ී௨ʹࢠίϯϙʔωϯτΛ෼ׂޙɺ਌Ͱݺͼग़͢

  19. case 1: ϑΝΠϧ಺Ͱͷίϯϙʔωϯτͷ෼ׂ TheItemList.tsx TheItemList.tsx ·ͣ͸ී௨ʹࢠίϯϙʔωϯτΛ෼ׂޙɺ਌Ͱݺͼग़͢

  20. case 1: ϑΝΠϧ಺Ͱͷίϯϙʔωϯτͷ෼ׂ TheItemList.tsx TheItemList.tsx ಉ͡ϑΝΠϧ಺Ͱ෼ׂΛ࣮ݱ  -σʔλͷม׵͕ࢠίϯϙʔωϯτʹҠৡ͞Εݟ௨͕͠ྑ͍ -ҰํͰࢠίϯϙʔωϯτ͸export͞Ε͍ͯͳ͍ͷͰ҆શ

  21. case 2: ίϯύΠϥϨΠϠʔͰͷ HTML ྖҬͷܕݕࠪ

  22. case 2: ίϯύΠϥϨΠϠʔͰͷ HTML ྖҬͷܕݕࠪ

  23. case 2: ίϯύΠϥϨΠϠʔͰͷ HTML ྖҬͷܕݕࠪ

  24. ޷Έ΍ 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/
  25. From Vue 2.x to Vue 3

  26. From Vue 2.x

  27. Vue 2 ؀ڥʹ͓͍ͯඞཁͳ΋ͷ w Vue 2 w JSXΛղऍͰ͖ΔTypeScriptͷ։ൃ؀ڥ w ΧελϜͷܕఆٛ

    w ೖ͍ͬͯͳ͍৔߹babel-plugin-transform-vue-jsx  w vue-tsx-support (wonderful-panda/vue-tsx-support)
  28. $ yarn add -D babel-plugin-transform-vue-jsx ...

  29. $ yarn add -D babel-plugin-transform-vue-jsx ...

  30. $ yarn add -D typescript

  31. $ yarn add -D typescript

  32. @1

  33. this.$emit('foo') ʹରԠ͢Δ onFoo ͕ఆٛͰ͖ͳ͍

  34. props ͷܕ৘ใ͕Ҿ͖ճͤͳ͍

  35. $ yarn add -D vue-tsx-support # ͪͳΈʹେମܕఆٛ

  36. onFoo ͕ΤϥʔʹͳΔ͜ͱΛ཈੍

  37. props ͷܕ৘ใΛਖ਼͘͠ݕ஌Մೳʹ

  38. To Vue 3

  39. Vue 3 ؀ڥʹ͓͍ͯඞཁͱ͞ΕΔ΋ͷ w Vue 3 w Vue + TypeScript

    ؀ڥ w ೖ͍ͬͯͳ͍৔߹@vue/babel-plugin-transform-vue-jsx
  40. Vue.js ίΞ (runtime-dom) ʹ TSX ͷܕఆ͕ٛ௥Ճ͞Εɺಠࣗఆ͕ٛෆཁʹ https://github.com/vuejs/vue-next/blob/master/packages/runtime-dom/types/jsx.d.ts

  41. ΦϑΟγϟϧ JSX ϓϥάΠϯ΋ Babel 7 Ҏ߱ͷܗࣜʹ https://github.com/vuejs/jsx

  42. جຊతͳTSXͷར༻͸ܕݕࠪࠐΈͰωΠςΟϒͰར༻Մೳ

  43. Ͱ͖ͳ͍͜ͱ

  44. 5ZQF4DSJQU$PNQJMFS͚ͩͰ͸׬શʹ͸ಈ͔ͳ͍ https://github.com/potato4d/vue-next-tsx-only-tsc

  45. TypeScript Compiler ͚ͩͰಈ͔ͳ͍ཧ༝ ڵຯ͋Δਓ޲͚ w Vue 3 Ͱ3FOEFS'VODUJPOͷத਎͕มΘͬͯ3FBDUͱ΄΅͍ۙ"1*ʹͳͬͨ w ҰํͰ׬શʹ$PNQBUJCMFͰ͸ͳ͘ɺDIJMESFOͷऔΓѻ͍ʹҧ͍͕͋Δ

    w Өڹ͕ग़Δͷ͸ childNode ͕ෳ਺͋Δ৔߹ͷղऍ͕ҧ͏͜ͱ w ݁Ռͱͯ͠ childNode ͕ෳ਺ͷ৔߹ʹ͏·͘ಈ࡞͠ͳ͍ w ͦͷͨΊ… 7VFKTͰ+49Λ࢖͏৔߹͸ॾʑͷ౎߹ΛٵऩͰ͖Δ#BCFMϓϥάΠϯ͕ඞਢͱͳΔ
  46. emits Λఆٛͯ͠΋ onXXX ͸·ͩແཧ

  47. emits / on ͕ಈ͔ͳ͍ཧ༝ ڵຯ͋Δਓ޲͚ w emits ͸ string[] Λड͚औΔ͕

    as const ͨ͠ͱͯ͠΋ͦΕ͸จࣈྻͱͯ͠ॲཧ͞ΕΔ w ίϯϙʔωϯτʹthis[`on${this.emits[0]}`] ͱͯ͠΋ͦͷղऍ͸ϥϯλΠϜ w ϏϧυλΠϜͰ͸ Literal Ͱ͋ͬͯ΋ҰҙʹܾఆͰ͖ͳ͍ w ͦͷͨΊ… FNJUTPO999͸ٕज़తʹ೉ͦ͠͏
  48. vue-tsx-support͸Vue 3Ͱ͸ണ͕͢

  49. SFC or TSX

  50. 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Ͱ͋Δ఺ʹ༏Ґੑ͕͋Δ
  51. Style-First / Slot-First = JavaScript First =

  52. ར༻্ͷ஫ҙ఺

  53. Vue TSX ࣗମͷ஫ҙ఺ w Vue 2.xݱࡏͰ͸ɺΦϑΟγϟϧαϙʔτ͕ͳ͍͜ͱ΋͋Γ0QUJPOBMͳखஈ w https://jp.vuejs.org/v2/guide/render-function.html w TemplateΛجຊͱ͠ɺΑΓγϏΞͳૢ࡞Λඞཁͱ͢Δͱ͖ͷAlternative

    w ࠷దԽͷ෦෼ʹ͓͍ͯ׬શͰ͸ͳ͍
  54. 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ͰޡຐԽ͢ͳͲΛݕ౼͢Δඞཁ͋Γ
  55. ஌Βͳ͍ͱϋϚΔ Vue 2.x Ͱͷ஫ҙ఺ w TSX ϑΝΠϧͰͷΈimportΛؚΊશମతʹΤϥʔ͕ࢭ·Βͳ͍ w TS Server͕૬ੑͷ౎߹ࢭ·Δ͜ͱ͕͋ΔͷͰ544FSWFSΛ࠶ىಈ͢Δ

    w ύοέʔδΠϯετʔϧͳͲͰnode_modules͕มΘΔͱ͖΋ҰԠ஫ҙ w ଞʹ΋ࡉ͔ͳ͜ͱ͸৭ʑͱ w ٙ໰఺΍࢖͍ͬͯͯͷࠔΓ͕͋ͬͨΒ࠙਌ձͰ΋TwitterͰ΋Ͳ͏ͧʂ w @potato4d΁
  56. Vue([SFC, TSX]) =

  57. Vue.js ͰͷࠔΓ͝ͱͳͲ͋Ε͹ɺ͓ؾܰʹ͝૬ஊ͍ͩ͘͞ https://elevenback.co.jp