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

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

jiko21
September 06, 2019

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

KansaiTS#2の資料です!

jiko21

September 06, 2019
Tweet

More Decks by jiko21

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. Posted on …
    IUUQTTQFBLFSEFDLDPNEBJLJETDPNQPTJUJPOBQJUZQFTDSJQUIBWVFEPUKTGBMTFNFOHXPKJBO
    SVLB

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size 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 full-size slide

  20. Ͷɺ؆୯Ͱ͠ΐ?

    View full-size slide

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

    ༷ࢠݟ͕ྑͦ͞͏…

    View full-size slide


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

    View full-size 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 full-size slide