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

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

Transcript

1. "VH W@UPLZP5BLVNB)"/"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