Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.js × TypeScript でclass style componentを廃止した...

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

sunecosuri

June 18, 2019
Tweet

More Decks by sunecosuri

Other Decks in Programming

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

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

    ͕ެࣜͰαϙʔτ͞ΕΔ 2019೥ Class style component͔Β
 Object style componentʹҠߦʢ6݄ʣ
  5. Some notatio ̎ͭͷॻ͖ํ͕ओྲྀ Object style Class style • Vue2.5Ҏ߱Ͱॻ͚Δॻ͖ํ •

    Vue.extend() Ͱexportͨ͠Object Λϥοϓ͢Δॻ͖ํ • vue-class-component ओʹ࢖͏ • σίϨʔλΛར༻ͨ͠Ϋϥεϕʔεͷ ه๏ͳͷͰAngularར༻ऀ͸਌͠Έ΍ ͍͢
  6. Class-style Class-style • vue-class-componentΛimport • τϥϯεύΠϧ࣌ʹ͸Objectͱͯ͠ৼΔ· ͏ • ඪ४ͷه๏ͱ͸େ͖͘ҧ͏ॻ͖ຯ •

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

    • ඪ४ͷه๏ͱ͸େ͖͘ҧ͏ॻ͖ຯ • Angular΍class componentͷReactΛॻ͍͍ͯΔਓ ͸਌͠Έ΍͍͢ҹ৅ • ҰํͰɺຊདྷͷObject styleͱͷϚοϐϯά͕Ͱ͖ͳ͍ ͱϋϚΓ΍͍͢
  8. ݱࡏͷClassAPIͷఏڙʹؔ͢Δ໰୊ • ࣮૷ͷෳࡶ͞
 ଟ༷ͳॻ͖ํΛڐ༰͢ΔͨΊʹClassͱObject Componentͷલޙʹม׵͢Δ ίʔυΛؚΊΔඞཁ͕͋Δ(tree shakingͰ͖ͳ͍) • ༧໿ޠͱͳͬͨϝιουͷωʔϜεϖʔεিಥ໰୊
 created,

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


    େ͖Ίͷෛ࠴ʹͳΔ͔΋͠Εͳ͍ • ެࣜͷϥΠϒϥϦͱ͸͍͑ɺvue-class-component͕͍ͭ·Ͱϝϯς͞ΕΔ͔ ΋Θ͔Βͳ͍ • Object StyleͩͱɺυΩϡϝϯτͱͷরΒ͠߹Θ͕ͤ͠΍͍͢ͷͰɺ
 ৽͘͠νʔϜϝϯόʔ͕ՃΘͬͨ࣌ͷϋʔυϧ͕௿͘ͳΓͦ͏