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

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Λѻ͏ʹ͋ͨͬͯ


    $MBTT
    TUZMF͸σϑΝΫτελϯμʔυͩͱ͍͑ΔͩΖ͏ ˞*$4
    .&%*"ͷࣛ໺͞ΜʹΑΔπΠʔτ

12. w 7VFҎલ͸ɺ7VFΠϯελϯεͷܕ৘ใ͕ਖ਼ৗʹղܾͰ͖ͣ ৗʹ
    UIJT
    ͕
    BOZ
    ͱͳΔݱ৅͕͋ͬͨ
 ʹ
    ࣮࣭
    +4
    Λॻ͍͍ͯΔͷͱશ͘มΘΒͳ͍ঢ়ଶ
    w WVFDMBTTDPNQPOFOU
    
    WVFQSPQFSUZEFDPSBUPS
    
 Λಋೖ͢Δ͜ͱͰɺUIJT
    Λ࢝Ίͱͨ͠Πϯελϯεͷܕ৘ใΛ
 ਖ਼ৗʹղܾ࣮ͯ͠ߦ͢Δ͜ͱ͕Ͱ͖Δ͜ͱΛϝϦοτͱײ͡
 ࠾༻͍ͯͨ͠ ͜Ε·Ͱ$MBTT
    4UZMFΛ࠾༻͍ͯͨ͠എܠ

13. ͳͥDMBTT
    TUZMFΛഇࢭ͠ɺ
 0CKFDU
    TUZMF΁ͷҠߦΛܾΊͨͷ͔ʁ

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. 0CKFDU
    TUZMFʹҠߦͨ͠ • ໿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. ͓͠·͍