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

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

Transcript

1. "VH
   
   
   W@UPLZP
   5BLVNB
   )"/"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 ͦͷͨΊ… FNJUT
    
    PO999
    ͸ٕज़తʹ೉ͦ͠͏
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
    ͕૬ੑͷ౎߹ࢭ·Δ͜ͱ͕͋ΔͷͰ
    54
    4FSWFS
    Λ࠶ىಈ͢Δ
    w ύοέʔδΠϯετʔϧͳͲͰ
    node_modules
    ͕มΘΔͱ͖΋ҰԠ஫ҙ
    w ଞʹ΋ࡉ͔ͳ͜ͱ͸৭ʑͱ
    w ٙ໰఺΍࢖͍ͬͯͯͷࠔΓ͕͋ͬͨΒ࠙਌ձͰ΋
    Twitter
    Ͱ΋Ͳ͏ͧʂ
    w @potato4d
    ΁
56. Vue([SFC, TSX]) =
57. Vue.js ͰͷࠔΓ͝ͱͳͲ͋Ε͹ɺ͓ؾܰʹ͝૬ஊ͍ͩ͘͞ https://elevenback.co.jp