Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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 で話した登壇スライドです。

Potato4d(Hanatani Takuma)

August 25, 2020
Tweet

More Decks by Potato4d(Hanatani Takuma)

Other Decks in Technology

Transcript

  1. "VH [email protected])"/"5"/*!QPUBUPE
    Vue.js with TSX
    From Vue 2.x to Vue 3

    View Slide

  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

    View Slide

  3. Agenda
    - Vue.js ͱ TSX
    - TSX Λར༻͢ΔγνϡΤʔγϣϯ
    - ͜Ε·Ͱͱ͜Ε͔Β From Vue 2.x to Vue 3
    - SFC ͱ TSX ͷ࢖͍෼͚
    - TSX Λར༻͢Δ্Ͱͷ஫ҙ఺

    View Slide

  4. Vue.js ͱ TSX

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. Vue 3.0
    Native TSX Support

    View Slide

  9. Why?

    View Slide

  10. How?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. case 1: ϑΝΠϧ಺Ͱͷίϯϙʔωϯτͷ෼ׂ
    TheItemList.tsx
    TheItemList.tsx
    ಉ͡ϑΝΠϧ಺Ͱ෼ׂΛ࣮ݱ

    -σʔλͷม׵͕ࢠίϯϙʔωϯτʹҠৡ͞Εݟ௨͕͠ྑ͍
    -ҰํͰࢠίϯϙʔωϯτ͸export͞Ε͍ͯͳ͍ͷͰ҆શ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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/

    View Slide

  25. From Vue 2.x to Vue 3

    View Slide

  26. From Vue 2.x

    View Slide

  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)

    View Slide

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

    View Slide

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

    View Slide

  30. $ yarn add -D typescript

    View Slide

  31. $ yarn add -D typescript

    View Slide

  32. @1

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. To Vue 3

    View Slide

  39. Vue 3 ؀ڥʹ͓͍ͯඞཁͱ͞ΕΔ΋ͷ
    w Vue 3
    w Vue + TypeScript ؀ڥ
    w ೖ͍ͬͯͳ͍৔߹@vue/babel-plugin-transform-vue-jsx

    View Slide

  40. Vue.js ίΞ (runtime-dom) ʹ TSX ͷܕఆ͕ٛ௥Ճ͞Εɺಠࣗఆ͕ٛෆཁʹ
    https://github.com/vuejs/vue-next/blob/master/packages/runtime-dom/types/jsx.d.ts

    View Slide

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

    View Slide

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

    View Slide

  43. Ͱ͖ͳ͍͜ͱ

    View Slide

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

    View Slide

  45. TypeScript Compiler ͚ͩͰಈ͔ͳ͍ཧ༝ ڵຯ͋Δਓ޲͚

    w Vue 3 Ͱ3FOEFS'VODUJPOͷத਎͕มΘͬͯ3FBDUͱ΄΅͍ۙ"1*ʹͳͬͨ
    w ҰํͰ׬શʹ$PNQBUJCMFͰ͸ͳ͘ɺDIJMESFOͷऔΓѻ͍ʹҧ͍͕͋Δ
    w Өڹ͕ग़Δͷ͸ childNode ͕ෳ਺͋Δ৔߹ͷղऍ͕ҧ͏͜ͱ
    w ݁Ռͱͯ͠ childNode ͕ෳ਺ͷ৔߹ʹ͏·͘ಈ࡞͠ͳ͍
    w ͦͷͨΊ…
    7VFKTͰ+49Λ࢖͏৔߹͸ॾʑͷ౎߹ΛٵऩͰ͖Δ#BCFMϓϥάΠϯ͕ඞਢͱͳΔ

    View Slide

  46. emits Λఆٛͯ͠΋ onXXX ͸·ͩແཧ

    View Slide

  47. emits / on ͕ಈ͔ͳ͍ཧ༝ ڵຯ͋Δਓ޲͚

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

    View Slide

  48. vue-tsx-support͸Vue 3Ͱ͸ണ͕͢

    View Slide

  49. SFC or TSX

    View Slide

  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Ͱ͋Δ఺ʹ༏Ґੑ͕͋Δ

    View Slide

  51. Style-First / Slot-First =
    JavaScript First =

    View Slide

  52. ར༻্ͷ஫ҙ఺

    View Slide

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

    View Slide

  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ͰޡຐԽ͢ͳͲΛݕ౼͢Δඞཁ͋Γ

    View Slide

  55. ஌Βͳ͍ͱϋϚΔ Vue 2.x Ͱͷ஫ҙ఺
    w TSX ϑΝΠϧͰͷΈimportΛؚΊશମతʹΤϥʔ͕ࢭ·Βͳ͍
    w TS Server͕૬ੑͷ౎߹ࢭ·Δ͜ͱ͕͋ΔͷͰ544FSWFSΛ࠶ىಈ͢Δ
    w ύοέʔδΠϯετʔϧͳͲͰnode_modules͕มΘΔͱ͖΋ҰԠ஫ҙ
    w ଞʹ΋ࡉ͔ͳ͜ͱ͸৭ʑͱ
    w ٙ໰఺΍࢖͍ͬͯͯͷࠔΓ͕͋ͬͨΒ࠙਌ձͰ΋TwitterͰ΋Ͳ͏ͧʂ
    w @potato4d΁

    View Slide

  56. Vue([SFC, TSX]) =

    View Slide

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

    View Slide