Vue.js × TypeScript でclass style componentを廃止した話 / migrated-class-style-component -for-vuejs-and-typescrpit

Slide 1

Slide 1 text

ɹMigrated "class style component  for Vue.js and TypeScrpit Vue.js × TypeScriptͰ  class style componentΛ  ഇࢭͨ͠࿩ @sunecosuri Date: 2019-06-18 Fukuoka.ts #1

Slide 2

Slide 2 text

GMOϖύϘ ΤϯδχΞ ϗεςΟϯάࣄۀ෦ϗεςΟϯάάϧʔϓ  ໐ւ ߂ً / @sunecosuri

Slide 3

Slide 3 text

ର৅ऀ • V u e . j s ͱ T y p e S c r i p t Ͱ ී ஈ ։ ൃ ͠ ͯ Δ ํ • v u e - c l a s s - c o m p o n e n t ͱ   v u e - p r o p e r t y - d e c o r a t o r ར ༻ ऀ   • V u e . j s ϓ ϩ δ Σ Ϋ τ ʹ ͓ ͍ ͯ   T y p e S c r i p t ಋ ೖ Λ ݕ ౼ ͠ ͯ ͍ Δ ํ

Slide 4

Slide 4 text

࿩͢͜ͱ • Ҡߦͨ͠ϓϩδΣΫτͷ֓ཁ • Vue.js ͱ TypeScript ͷؔ܎  Object style componentͱClass style component • Vue3.0ͷClass APIͷϓϩϙʔβϧͷಈ޲ͱ݁Ռ • Ҡߦʹ౿Έ੾ΔͨΊʹ൑அͨ͜͠ͱ • Ҡߦͨ͠ײ૝

Slide 5

Slide 5 text

ͱ͋ΔϓϩδΣΫτ Nuxt.jsΛར༻ͯ͠։ൃ(JavaScript) 2017೥ TypeScript ͷಋೖɹʢ8݄ʣ 2017೥ Vue2.5 release ʢ10݄ʣ  ɾTypeScript ͕ެࣜͰαϙʔτ͞ΕΔ 2019೥ Class style component͔Β  Object style componentʹҠߦʢ6݄ʣ

Slide 6

Slide 6 text

Vue.js ͱ TypeScript ʹ͍ͭͯ

Slide 7

Slide 7 text

Some notatio ̎ͭͷॻ͖ํ͕ओྲྀ Object style Class style • Vue2.5Ҏ߱Ͱॻ͚Δॻ͖ํ • Vue.extend() Ͱexportͨ͠Object Λϥοϓ͢Δॻ͖ํ • vue-class-component ओʹ࢖͏ • σίϨʔλΛར༻ͨ͠Ϋϥεϕʔεͷ ه๏ͳͷͰAngularར༻ऀ͸਌͠Έ΍ ͍͢

Slide 8

Slide 8 text

standard ඪ४ͷॻ͖ํ • ϘλϯΛΫϦοΫ͢ΔͱΧ΢ϯτΞοϓ͢Δcomponent  • ֤componentͷscriptϒϩοΫΛݟͯΘ͔Δ௨Γɺ࣮ଶ͸  ΦϒδΣΫτ 

Slide 9

Slide 9 text

Class-style Class-style • vue-class-componentΛimport • τϥϯεύΠϧ࣌ʹ͸Objectͱͯ͠ৼΔ· ͏ • ඪ४ͷه๏ͱ͸େ͖͘ҧ͏ॻ͖ຯ • Angular΍Reactͷclass componentΛॻ ͍͍ͯΔਓ͸ൺֱత਌͠Έ΍͍͢ҹ৅ • ҰํͰɺຊདྷͷObject styleͱͷϚοϐϯά ͕Ͱ͖ͳ͍ͱϋϚΓ΍͍͢

Slide 10

Slide 10 text

Object-style Object-style • vue-class-componentΛimport • Vue.extend() Ͱϥοϓ͢Δ͚ͩͰखܰʹܕิ׬͕͞Ε ͯෑډ͕௿͍ • τϥϯεύΠϧ࣌ʹ͸Objectͱͯ͠ৼΔ·͏ • ඪ४ͷه๏ͱ͸େ͖͘ҧ͏ॻ͖ຯ • Angular΍class componentͷReactΛॻ͍͍ͯΔਓ ͸਌͠Έ΍͍͢ҹ৅ • ҰํͰɺຊདྷͷObject styleͱͷϚοϐϯά͕Ͱ͖ͳ͍ ͱϋϚΓ΍͍͢

Slide 11

Slide 11 text

ͲͪΒ͕࢖ΘΕͯΔ͔ w WVFQSPQFSUZEFDPSBUPSͱ  WVFDMBTTDPNQPOFOUͷซ༻͕൒਺Λ઎ΊΔ  DMBTTTUZMF  w 7VF$-*ͰϓϦηοτΛ5ZQF4DSJQUʹͯ͠ɺબ୒ࢶΛ͢ ΂ͯʮ:&4ʯʹ͢Δͱ্هͷϥΠϒϥϦ͕Πϯετʔϧ ͞ΕΔ  5ZQF4DSJQUͰ7VFΛѻ͏ʹ͋ͨͬͯ  $MBTTTUZMF͸σϑΝΫτελϯμʔυͩͱ͍͑ΔͩΖ͏ ˞*$4.&%*"ͷࣛ໺͞ΜʹΑΔπΠʔτ

Slide 12

Slide 12 text

w 7VFҎલ͸ɺ7VFΠϯελϯεͷܕ৘ใ͕ਖ਼ৗʹղܾͰ͖ͣ ৗʹUIJT͕BOZͱͳΔݱ৅͕͋ͬͨ  ʹ࣮࣭+4Λॻ͍͍ͯΔͷͱશ͘มΘΒͳ͍ঢ়ଶ w WVFDMBTTDPNQPOFOUWVFQSPQFSUZEFDPSBUPS  Λಋೖ͢Δ͜ͱͰɺUIJTΛ࢝Ίͱͨ͠Πϯελϯεͷܕ৘ใΛ  ਖ਼ৗʹղܾ࣮ͯ͠ߦ͢Δ͜ͱ͕Ͱ͖Δ͜ͱΛϝϦοτͱײ͡  ࠾༻͍ͯͨ͠ ͜Ε·Ͱ$MBTT4UZMFΛ࠾༻͍ͯͨ͠എܠ

Slide 13

Slide 13 text

ͳͥDMBTTTUZMFΛഇࢭ͠ɺ  0CKFDUTUZMF΁ͷҠߦΛܾΊͨͷ͔ʁ

Slide 14

Slide 14 text

͖͔͚ͬ͸Vue3.0ͷrfcϦϙδτϦͰVue.jsͷ࡞ऀ͕  Class styleΛඪ४Ͱαϙʔτ͢Δํ਑(Class API)ΛऔΓԼ͛ͨ IUUQTHJUIVCDPNWVFKTSGDTQVMMJTTVFDPNNFOU

Slide 15

Slide 15 text

ݱࡏͷClassAPIͷఏڙʹؔ͢Δ໰୊ • ࣮૷ͷෳࡶ͞  ଟ༷ͳॻ͖ํΛڐ༰͢ΔͨΊʹClassͱObject Componentͷલޙʹม׵͢Δ ίʔυΛؚΊΔඞཁ͕͋Δ(tree shakingͰ͖ͳ͍) • ༧໿ޠͱͳͬͨϝιουͷωʔϜεϖʔεিಥ໰୊  created, mountedͱ͍ͬͨlifecycle methodͳͲͷ༧໿ޠͱͳΔϝιου໊ ͕ॏෳͨ࣌͠ͷղܾࡦ͕ͲΕ΋ެਖ਼͞Λܽ͘ ্هͷ໰୊ʹΑΓɺ༏ΕͨTypeScriptਪ࿦αϙʔτΛඋ͑ͨ୅ସAPIΛఏڙ͢Δ͜ ͱΛ໨తͱ͍͕ͯͨ͠ୡ੒Ͱ͖ͦ͏ʹͳ͍ ͬ͘͟Γҙ༁͢Δͱ

Slide 16

Slide 16 text

͜ΕΒΛ౿·͑ͯͦͷͱ͖νʔϜͰ൑அͨ͜͠ͱ • TypeScriptͷಋೖ౰ॳ͸બ୒ࢶͱͯ͠Class styleҰ୒͕ͩͬͨɺ  Object styleͷܕਪ࿦͕େ෯ʹվળ͍ͯ͠Δݱࡏɺ  ΠϨΪϡϥʔͳॻ͖ํͰ͋ΔClass styleʹͩ͜ΘΓଓ͚Δඞཁ͕ͳ͘ͳͬͨ • ϝδϟʔΞοϓσʔτޙͷҠߦΛݟӽͨ͠ͱ͖ɺ  େ͖Ίͷෛ࠴ʹͳΔ͔΋͠Εͳ͍ • ެࣜͷϥΠϒϥϦͱ͸͍͑ɺvue-class-component͕͍ͭ·Ͱϝϯς͞ΕΔ͔ ΋Θ͔Βͳ͍ • Object StyleͩͱɺυΩϡϝϯτͱͷরΒ͠߹Θ͕ͤ͠΍͍͢ͷͰɺ  ৽͘͠νʔϜϝϯόʔ͕ՃΘͬͨ࣌ͷϋʔυϧ͕௿͘ͳΓͦ͏

Slide 17

Slide 17 text

ิ଍ vue-class-component ͸  Vue 3Ͱ΋Ҿ͖ଓ͖αϙʔτ͞Ε͍ͯ͘͜ͱΛޙ೔  ίΞνʔϜϝϯόʔͷ @LinusBorg ͕ද໌ https://github.com/vuejs/vue-cli/issues/4086#issuecomment-498036338

Slide 18

Slide 18 text

0CKFDUTUZMFʹҠߦͨ͠ • ໿190ίϯϙʔωϯτۙ͘ෳ਺ਓͰ1िؒऑͰΤΠϠοͱҠߦͨ͠  ֤style͸ڞଘͰ͖ΔͷͰগͣͭ͠ஔ͖׵͑ΔͰ΋ΞϦ • υΩϡϝϯτͱͷরΒ͠߹Θ͕ͤ͠΍͍͢ͷͰɺ  ৽͘͠νʔϜϝϯόʔ͕ՃΘͬͨ࣌ͷϋʔυϧ͕௿͘ͳͬͨ • props ͷܕఆٛ͸PropTypeͱ͍͏interfaceΛ࢖͏ඞཁ͕͋Δ • DOMૢ࡞Λ͢Δࡍʹར༻͢Δthis.$refsʹؔͯ͠͸ as Ͱ͠ͷ͙ • render ΍ computed ʹ͸໭Γ஋Λannotation͢Δඞཁ͕͋Δ  https://vuejs.org/v2/guide/typescript.html#Annotating-Return-Types

Slide 19

Slide 19 text

·ͱΊ • Vue.js͸ݱঢ়ෳ਺ͷॻ͖ํΛڐ༰͠·͕͢ɺಛʹͩ͜ΘΓ͕ͳ͚Ε͹ ඪ४ͷॻ͖ํ͔Βҳ୤ͨ͠Class StyleΑΓ͔͸Object Styleʹ  د͍ͤͯͬͨํ͕ࠓޙͷΞοϓσʔτʹ௥ै͠΍͍͢Մೳੑ͕ߴ͍ͱ ൑அ͠Ҡߦʹ౿Έ੾Γ·ͨ͠ • Ҿ͖ଓ͖ClassStyle΋αϒηοτతͳܗͰαϙʔτ͢ΔͷͰɺ  ݱঢ়ແཧͯ͠Ҡߦ͢Δඞཁ΋ͳͦ͞͏ɻ  ͳʹ͕ద੾͔͸νʔϜ΍έʔεʹΑͬͯҟͳΔͷͰɺͪΐ͏Ͳ͍͍མ ͱ͠ॴΛݟ͚ͭΑ͏

Slide 20

Slide 20 text

͓͠·͍