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

Transcript

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

2. খౡ େج / Daiki Kojima @Daikids2 @daikikojima ژ౎େֶେֶӃ৘ใֶݚڀՊM2 Server/Front, Mobile(iOS/Android)…

   Vue fes JPࢀՃ͠·͢!! ࠷ۙRxJava׬શʹཧղͨ͠

3. Posted on … IUUQTTQFBLFSEFDLDPNEBJLJETDPNQPTJUJPOBQJUZQFTDSJQUIBWVFEPUKTGBMTFNFOHXPKJBO SVLB

4. ࠓճͷωλ • Vue.jsͩͱਏ͔ͬͨTypeScriptʹ͍ͭͯɺ
 ޾ͤʹͳΕΔ͔΋?͠Εͳ͍Composition APIΛ
 ঺հ͠·͢! • VuexपΓ͸͝צหΛ!!

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

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; }, }, });

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; }, }, });

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; } }

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ͷਓ͕
 Α͘࢖ͬͯΔ΍ͭ • एׯσίϨʔλ͕ܳ
 ա͗Δؾ͕͢Δ…

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

11. ඪ४Խ͔Β͸֎Ε·ͨ͠… • ௕ʑͱཧ༝͕ॻ͔ΕͯΔ… • ͨͩɺvue-class-componentࣗମ͸
 ࠓޙͱ΋αϙʔτ͸͍ͯ͘͠໛༷…

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

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

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, }; }, });

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

16. Why? • ैདྷͷVue-> `this`ʹґଘ • ܕਪ࿦Λߟ͑ͯσβΠϯ͞Εͯͳ͔ͬͨ… • Class Style •

    ܕ໰୊ղܾͷͨΊʹσίϨʔλʹཔΒ͟ΔΛಘͳ͍…

17. Composition apiͩͱ… • ܕʹ΍͍͞͠ૉͷม਺΍ؔ਺Λ࢖͑Δ • ܕਪ࿦ʹ΍͍͞͠! • ੜͷTypeScriptɺJavaScriptͷΑ͏ͳίʔυ
 ʹͳΔ͔ΒIDEͷαϙʔτ΋ड͚΍͘͢ͳΔ!

18. ॻ͖ํ • createComponentͰίϯϙʔωϯτΛ࡞੒ͯ͠
 setup()಺ʹdataͱ͔methodsͳͲΛॻ͍͍ͯ͘… const Count = createComponent({ props: ['msg'],

    setup() {

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, }; },

20. Ͷɺ؆୯Ͱ͠ΐ?

21. ·ͱΊ • Vue.jsΛTypeScriptͰॻ͘ʹ͸3ύλʔϯ • Vue.extend • Class • Composition •

    Composition APIͳΒܕਪ࿦ͳͲ͕Α͘ͳΔ͔΋… • ͨͩ͠ɺfunction-apiͷ࣌ͱൺ΂ͯ݁ߏมߋ͋ΔͷͰ
 ༷ࢠݟ͕ྑͦ͞͏…

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

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