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

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

0631f2e33b42847ae5dedbdd53e1c1a4?s=128

sunecosuri

June 18, 2019
Tweet

Transcript

  1. ɹMigrated "class style component
 for Vue.js and TypeScrpit Vue.js ×

    TypeScriptͰ
 class style componentΛ
 ഇࢭͨ͠࿩ @sunecosuri Date: 2019-06-18 Fukuoka.ts #1
  2. GMOϖύϘ ΤϯδχΞ ϗεςΟϯάࣄۀ෦ϗεςΟϯάάϧʔϓ
 ໐ւ ߂ً / @sunecosuri

  3. ର৅ऀ • 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 ಋ ೖ Λ ݕ ౼ ͠ ͯ ͍ Δ ํ
  4. ࿩͢͜ͱ • Ҡߦͨ͠ϓϩδΣΫτͷ֓ཁ • Vue.js ͱ TypeScript ͷؔ܎
 Object style

    componentͱClass style component • Vue3.0ͷClass APIͷϓϩϙʔβϧͷಈ޲ͱ݁Ռ • Ҡߦʹ౿Έ੾ΔͨΊʹ൑அͨ͜͠ͱ • Ҡߦͨ͠ײ૝
  5. ͱ͋ΔϓϩδΣΫτ Nuxt.jsΛར༻ͯ͠։ൃ(JavaScript) 2017೥ TypeScript ͷಋೖɹʢ8݄ʣ 2017೥ Vue2.5 release ʢ10݄ʣ
 ɾTypeScript

    ͕ެࣜͰαϙʔτ͞ΕΔ 2019೥ Class style component͔Β
 Object style componentʹҠߦʢ6݄ʣ
  6. Vue.js ͱ TypeScript ʹ͍ͭͯ

  7. Some notatio ̎ͭͷॻ͖ํ͕ओྲྀ Object style Class style • Vue2.5Ҏ߱Ͱॻ͚Δॻ͖ํ •

    Vue.extend() Ͱexportͨ͠Object Λϥοϓ͢Δॻ͖ํ • vue-class-component ओʹ࢖͏ • σίϨʔλΛར༻ͨ͠Ϋϥεϕʔεͷ ه๏ͳͷͰAngularར༻ऀ͸਌͠Έ΍ ͍͢
  8. standard ඪ४ͷॻ͖ํ • ϘλϯΛΫϦοΫ͢ΔͱΧ΢ϯτΞοϓ͢Δcomponent
 • ֤componentͷscriptϒϩοΫΛݟͯΘ͔Δ௨Γɺ࣮ଶ͸
 ΦϒδΣΫτ


  9. Class-style Class-style • vue-class-componentΛimport • τϥϯεύΠϧ࣌ʹ͸Objectͱͯ͠ৼΔ· ͏ • ඪ४ͷه๏ͱ͸େ͖͘ҧ͏ॻ͖ຯ •

    Angular΍Reactͷclass componentΛॻ ͍͍ͯΔਓ͸ൺֱత਌͠Έ΍͍͢ҹ৅ • ҰํͰɺຊདྷͷObject styleͱͷϚοϐϯά ͕Ͱ͖ͳ͍ͱϋϚΓ΍͍͢
  10. Object-style Object-style • vue-class-componentΛimport • Vue.extend() Ͱϥοϓ͢Δ͚ͩͰखܰʹܕิ׬͕͞Ε ͯෑډ͕௿͍ • τϥϯεύΠϧ࣌ʹ͸Objectͱͯ͠ৼΔ·͏

    • ඪ४ͷه๏ͱ͸େ͖͘ҧ͏ॻ͖ຯ • Angular΍class componentͷReactΛॻ͍͍ͯΔਓ ͸਌͠Έ΍͍͢ҹ৅ • ҰํͰɺຊདྷͷObject styleͱͷϚοϐϯά͕Ͱ͖ͳ͍ ͱϋϚΓ΍͍͢
  11. ͲͪΒ͕࢖ΘΕͯΔ͔ w WVFQSPQFSUZEFDPSBUPSͱ
 WVFDMBTTDPNQPOFOUͷซ༻͕൒਺Λ઎ΊΔ
 DMBTTTUZMF
 w 7VF$-*ͰϓϦηοτΛ5ZQF4DSJQUʹͯ͠ɺબ୒ࢶΛ͢ ΂ͯʮ:&4ʯʹ͢Δͱ্هͷϥΠϒϥϦ͕Πϯετʔϧ ͞ΕΔ
 5ZQF4DSJQUͰ7VFΛѻ͏ʹ͋ͨͬͯ


    $MBTTTUZMF͸σϑΝΫτελϯμʔυͩͱ͍͑ΔͩΖ͏ ˞*$4.&%*"ͷࣛ໺͞ΜʹΑΔπΠʔτ
  12. w 7VFҎલ͸ɺ7VFΠϯελϯεͷܕ৘ใ͕ਖ਼ৗʹղܾͰ͖ͣ ৗʹUIJT͕BOZͱͳΔݱ৅͕͋ͬͨ
 ʹ࣮࣭+4Λॻ͍͍ͯΔͷͱશ͘มΘΒͳ͍ঢ়ଶ w WVFDMBTTDPNQPOFOUWVFQSPQFSUZEFDPSBUPS
 Λಋೖ͢Δ͜ͱͰɺUIJTΛ࢝Ίͱͨ͠Πϯελϯεͷܕ৘ใΛ
 ਖ਼ৗʹղܾ࣮ͯ͠ߦ͢Δ͜ͱ͕Ͱ͖Δ͜ͱΛϝϦοτͱײ͡
 ࠾༻͍ͯͨ͠ ͜Ε·Ͱ$MBTT4UZMFΛ࠾༻͍ͯͨ͠എܠ

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

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

  15. ݱࡏͷClassAPIͷఏڙʹؔ͢Δ໰୊ • ࣮૷ͷෳࡶ͞
 ଟ༷ͳॻ͖ํΛڐ༰͢ΔͨΊʹClassͱObject Componentͷલޙʹม׵͢Δ ίʔυΛؚΊΔඞཁ͕͋Δ(tree shakingͰ͖ͳ͍) • ༧໿ޠͱͳͬͨϝιουͷωʔϜεϖʔεিಥ໰୊
 created,

    mountedͱ͍ͬͨlifecycle methodͳͲͷ༧໿ޠͱͳΔϝιου໊ ͕ॏෳͨ࣌͠ͷղܾࡦ͕ͲΕ΋ެਖ਼͞Λܽ͘ ্هͷ໰୊ʹΑΓɺ༏ΕͨTypeScriptਪ࿦αϙʔτΛඋ͑ͨ୅ସAPIΛఏڙ͢Δ͜ ͱΛ໨తͱ͍͕ͯͨ͠ୡ੒Ͱ͖ͦ͏ʹͳ͍ ͬ͘͟Γҙ༁͢Δͱ
  16. ͜ΕΒΛ౿·͑ͯͦͷͱ͖νʔϜͰ൑அͨ͜͠ͱ • TypeScriptͷಋೖ౰ॳ͸બ୒ࢶͱͯ͠Class styleҰ୒͕ͩͬͨɺ
 Object styleͷܕਪ࿦͕େ෯ʹվળ͍ͯ͠Δݱࡏɺ
 ΠϨΪϡϥʔͳॻ͖ํͰ͋ΔClass styleʹͩ͜ΘΓଓ͚Δඞཁ͕ͳ͘ͳͬͨ • ϝδϟʔΞοϓσʔτޙͷҠߦΛݟӽͨ͠ͱ͖ɺ


    େ͖Ίͷෛ࠴ʹͳΔ͔΋͠Εͳ͍ • ެࣜͷϥΠϒϥϦͱ͸͍͑ɺvue-class-component͕͍ͭ·Ͱϝϯς͞ΕΔ͔ ΋Θ͔Βͳ͍ • Object StyleͩͱɺυΩϡϝϯτͱͷরΒ͠߹Θ͕ͤ͠΍͍͢ͷͰɺ
 ৽͘͠νʔϜϝϯόʔ͕ՃΘͬͨ࣌ͷϋʔυϧ͕௿͘ͳΓͦ͏
  17. ิ଍ vue-class-component ͸
 Vue 3Ͱ΋Ҿ͖ଓ͖αϙʔτ͞Ε͍ͯ͘͜ͱΛޙ೔
 ίΞνʔϜϝϯόʔͷ @LinusBorg ͕ද໌ https://github.com/vuejs/vue-cli/issues/4086#issuecomment-498036338

  18. 0CKFDUTUZMFʹҠߦͨ͠ • ໿190ίϯϙʔωϯτۙ͘ෳ਺ਓͰ1िؒऑͰΤΠϠοͱҠߦͨ͠
 ֤style͸ڞଘͰ͖ΔͷͰগͣͭ͠ஔ͖׵͑ΔͰ΋ΞϦ • υΩϡϝϯτͱͷরΒ͠߹Θ͕ͤ͠΍͍͢ͷͰɺ
 ৽͘͠νʔϜϝϯόʔ͕ՃΘͬͨ࣌ͷϋʔυϧ͕௿͘ͳͬͨ • props ͷܕఆٛ͸PropTypeͱ͍͏interfaceΛ࢖͏ඞཁ͕͋Δ

    • DOMૢ࡞Λ͢Δࡍʹར༻͢Δthis.$refsʹؔͯ͠͸ as Ͱ͠ͷ͙ • render ΍ computed ʹ͸໭Γ஋Λannotation͢Δඞཁ͕͋Δ
 https://vuejs.org/v2/guide/typescript.html#Annotating-Return-Types
  19. ·ͱΊ • Vue.js͸ݱঢ়ෳ਺ͷॻ͖ํΛڐ༰͠·͕͢ɺಛʹͩ͜ΘΓ͕ͳ͚Ε͹ ඪ४ͷॻ͖ํ͔Βҳ୤ͨ͠Class StyleΑΓ͔͸Object Styleʹ
 د͍ͤͯͬͨํ͕ࠓޙͷΞοϓσʔτʹ௥ै͠΍͍͢Մೳੑ͕ߴ͍ͱ ൑அ͠Ҡߦʹ౿Έ੾Γ·ͨ͠ • Ҿ͖ଓ͖ClassStyle΋αϒηοτతͳܗͰαϙʔτ͢ΔͷͰɺ


    ݱঢ়ແཧͯ͠Ҡߦ͢Δඞཁ΋ͳͦ͞͏ɻ
 ͳʹ͕ద੾͔͸νʔϜ΍έʔεʹΑͬͯҟͳΔͷͰɺͪΐ͏Ͳ͍͍མ ͱ͠ॴΛݟ͚ͭΑ͏
  20. ͓͠·͍