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

06a095e125c2016e983e183e10209b9a?s=47 jiko21
September 06, 2019

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

KansaiTS#2の資料です!

06a095e125c2016e983e183e10209b9a?s=128

jiko21

September 06, 2019
Tweet

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