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

KansaiTS#2の資料です!

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