Composition API TypeScriptはVue.jsの夢を見るか?

KansaiTS#2の資料です!

Transcript

1. Composition API
   TypeScript͸Vue.jsͷເΛݟΔ͔?
   KansaiTS#2
   @Daikids2
   

   View Slide

2. খౡ େج / Daiki Kojima
   @Daikids2
   @daikikojima
   ژ౎େֶେֶӃ৘ใֶݚڀՊM2
   Server/Front, Mobile(iOS/Android)…
   Vue fes JPࢀՃ͠·͢!!
   ࠷ۙRxJava׬શʹཧղͨ͠
   

   View Slide

3. Posted on …
   IUUQTTQFBLFSEFDLDPNEBJLJETDPNQPTJUJPOBQJUZQFTDSJQUIBWVFEPUKTGBMTFNFOHXPKJBO
   SVLB
   

   View Slide

4. ࠓճͷωλ
   • Vue.jsͩͱਏ͔ͬͨTypeScriptʹ͍ͭͯɺ

   ޾ͤʹͳΕΔ͔΋?͠Εͳ͍Composition APIΛ

   ঺հ͠·͢!
   • VuexपΓ͸͝צหΛ!!
   

   View Slide

5. Vue.jsΛTSͩͱͲ͏ॻ͔͘?
   

   View Slide

6. Vue.extend
   import Vue from 'vue';
   export default Vue.extend({
   name: 'CountExtemd',
   props: {
   msg: {
   Type: String,
   required: true,
   },
   },
   data() {
   return {
   count: 0,
   };
   },
   methods: {
   add() {
   this.count += 1;
   },
   minus() {
   this.count -= 1;
   },
   },
   });
   

   View Slide

7. Vue.extend
   • ͍ͭ΋ͷVueͱ΄΅ಉ͡!
   • propsपΓͷܕ͕

   গ͠ؾ࣋ͪѱ͍…
   import Vue from 'vue';
   export default Vue.extend({
   name: 'CountExtemd',
   props: {
   msg: {
   Type: String,
   required: true,
   },
   },
   data() {
   return {
   count: 0,
   };
   },
   methods: {
   add() {
   this.count += 1;
   },
   minus() {
   this.count -= 1;
   },
   },
   });
   

   View Slide

8. Class Style (vue-property-decorator)
   import { Component, Prop, Vue } from 'vue-property-decorator';
   @Component
   class CountClass extends Vue {
   @Prop() private msg!: string;
   count = 0;
   add() {
   this.count += 1;
   }
   minus() {
   this.count -= 1;
   }
   }
   

   View Slide

9. Class Style (vue-property-decorator)
   import { Component, Prop, Vue } from 'vue-property-decorator';
   @Component
   class CountClass extends Vue {
   @Prop() private msg!: string;
   count = 0;
   add() {
   this.count += 1;
   }
   minus() {
   this.count -= 1;
   }
   }
   • Vue + TSͷਓ͕

   Α͘࢖ͬͯΔ΍ͭ
   • एׯσίϨʔλ͕ܳ

   ա͗Δؾ͕͢Δ…
   

   View Slide

10. িܸͷࣄ࣮…
    https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121
    

    View Slide

11. ඪ४Խ͔Β͸֎Ε·ͨ͠…
    • ௕ʑͱཧ༝͕ॻ͔ΕͯΔ…
    • ͨͩɺvue-class-componentࣗମ͸

    ࠓޙͱ΋αϙʔτ͸͍ͯ͘͠໛༷…
    

    View Slide

12. զʑʹر๬͸ͳ͍ͷͩΖ͏͔…
    

    View Slide

13. Composition API!!
    https://github.com/vuejs/composition-api
    

    View Slide

14. Composition API!!
    import {createComponent, reactive} from '@vue/composition-api';
    const Count = createComponent({
    props: ['msg'],
    setup() {
    const state = reactive({
    count: 0,
    });
    const add = () => {
    state.count += 1;
    };
    const minus = () => {
    state.count -= 1;
    };
    return {
    state,
    add,
    minus,
    };
    },
    });
    

    View Slide

15. What’s Composition API?
    • Vue 3.0Ͱಋೖ༧ఆͷAPI
    • Function APIͱ͍͏໊લͰͨ͠…
    

    View Slide

16. Why?
    • ैདྷͷVue-> `this`ʹґଘ
    • ܕਪ࿦Λߟ͑ͯσβΠϯ͞Εͯͳ͔ͬͨ…
    • Class Style
    • ܕ໰୊ղܾͷͨΊʹσίϨʔλʹཔΒ͟ΔΛಘͳ͍…
    

    View Slide

17. Composition apiͩͱ…
    • ܕʹ΍͍͞͠ૉͷม਺΍ؔ਺Λ࢖͑Δ
    • ܕਪ࿦ʹ΍͍͞͠!
    • ੜͷTypeScriptɺJavaScriptͷΑ͏ͳίʔυ

    ʹͳΔ͔ΒIDEͷαϙʔτ΋ड͚΍͘͢ͳΔ!
    

    View Slide

18. ॻ͖ํ
    • createComponentͰίϯϙʔωϯτΛ࡞੒ͯ͠

    setup()಺ʹdataͱ͔methodsͳͲΛॻ͍͍ͯ͘…
    const Count = createComponent({
    props: ['msg'],
    setup() {
    

    View Slide

19. ॻ͖ํ
    • data͸ref΍state, methods͸ؔ਺ͱͯ͠

    ॻ͍ͯ͋͛Ε͹OK
    • reactive͸Vue.observable()ͱ

    ಉ౳(Rxͱͬͪ͝ΌʹͳΔ͔Β

    վ໊ͨ͠Β͍͠…)
    setup() {
    const state = reactive({
    count: 0,
    });
    const add = () => {
    state.count += 1;
    };
    const minus = () => {
    state.count -= 1;
    };
    return {
    state,
    add,
    minus,
    };
    },
    

    View Slide

20. Ͷɺ؆୯Ͱ͠ΐ?
    

    View Slide

21. ·ͱΊ
    • Vue.jsΛTypeScriptͰॻ͘ʹ͸3ύλʔϯ
    • Vue.extend
    • Class
    • Composition
    • Composition APIͳΒܕਪ࿦ͳͲ͕Α͘ͳΔ͔΋…
    • ͨͩ͠ɺfunction-apiͷ࣌ͱൺ΂ͯ݁ߏมߋ͋ΔͷͰ

    ༷ࢠݟ͕ྑͦ͞͏…
    

    View Slide

22. ऴ
    ੍࡞ɾஶ࡞
    ᴸᴸᴸᴸᴸ
    @Daikids2
    

    View Slide

23. Reference
    • https://github.com/vuejs/composition-api
    • https://vue-composition-api-rfc.netlify.com/
    • https://github.com/vuejs/rfcs/pull/
    17#issuecomment-494242121
    

    View Slide