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(Takuma HANATANI)

August 25, 2020
Tweet

More Decks by potato4d(Takuma HANATANI)

Other Decks in Technology

Transcript

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

    From Vue 2.x to Vue 3 - SFC ͱ TSX ͷ࢖͍෼͚ - TSX Λར༻͢Δ্Ͱͷ஫ҙ఺
  3. ޷Έ΍ 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/
  4. Vue 2 ؀ڥʹ͓͍ͯඞཁͳ΋ͷ w Vue 2 w JSXΛղऍͰ͖ΔTypeScriptͷ։ൃ؀ڥ w ΧελϜͷܕఆٛ

    w ೖ͍ͬͯͳ͍৔߹babel-plugin-transform-vue-jsx  w vue-tsx-support (wonderful-panda/vue-tsx-support)
  5. @1

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

    ؀ڥ w ೖ͍ͬͯͳ͍৔߹@vue/babel-plugin-transform-vue-jsx
  7. TypeScript Compiler ͚ͩͰಈ͔ͳ͍ཧ༝ ڵຯ͋Δਓ޲͚ w Vue 3 Ͱ3FOEFS'VODUJPOͷத਎͕มΘͬͯ3FBDUͱ΄΅͍ۙ"1*ʹͳͬͨ w ҰํͰ׬શʹ$PNQBUJCMFͰ͸ͳ͘ɺDIJMESFOͷऔΓѻ͍ʹҧ͍͕͋Δ

    w Өڹ͕ग़Δͷ͸ childNode ͕ෳ਺͋Δ৔߹ͷղऍ͕ҧ͏͜ͱ w ݁Ռͱͯ͠ childNode ͕ෳ਺ͷ৔߹ʹ͏·͘ಈ࡞͠ͳ͍ w ͦͷͨΊ… 7VFKTͰ+49Λ࢖͏৔߹͸ॾʑͷ౎߹ΛٵऩͰ͖Δ#BCFMϓϥάΠϯ͕ඞਢͱͳΔ
  8. emits / on ͕ಈ͔ͳ͍ཧ༝ ڵຯ͋Δਓ޲͚ w emits ͸ string[] Λड͚औΔ͕

    as const ͨ͠ͱͯ͠΋ͦΕ͸จࣈྻͱͯ͠ॲཧ͞ΕΔ w ίϯϙʔωϯτʹthis[`on${this.emits[0]}`] ͱͯ͠΋ͦͷղऍ͸ϥϯλΠϜ w ϏϧυλΠϜͰ͸ Literal Ͱ͋ͬͯ΋ҰҙʹܾఆͰ͖ͳ͍ w ͦͷͨΊ… FNJUTPO999͸ٕज़తʹ೉ͦ͠͏
  9. 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Ͱ͋Δ఺ʹ༏Ґੑ͕͋Δ
  10. 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ͰޡຐԽ͢ͳͲΛݕ౼͢Δඞཁ͋Γ
  11. ஌Βͳ͍ͱϋϚΔ Vue 2.x Ͱͷ஫ҙ఺ w TSX ϑΝΠϧͰͷΈimportΛؚΊશମతʹΤϥʔ͕ࢭ·Βͳ͍ w TS Server͕૬ੑͷ౎߹ࢭ·Δ͜ͱ͕͋ΔͷͰ544FSWFSΛ࠶ىಈ͢Δ

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