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

Vue___Vuex_のアーキテクチャ完全に理解した.pdf

entaku
October 30, 2019

 Vue___Vuex_のアーキテクチャ完全に理解した.pdf

entaku

October 30, 2019
Tweet

More Decks by entaku

Other Decks in Programming

Transcript

  1. Vue × Vuex ͷΞʔΩς
    Ϋνϟ׬શʹཧղͨ͠

    View Slide

  2. ࣗݾ঺հ
    • ԕ౻୓໻ (entaku)
    • Twitter: @entaku19890818
    • iOS/Android/Vue ΤϯδχΞ
    • ܦྺ: ͳΜͪΌͬͯSE

    ->NWΤϯδχΞ[SIer]

    ->αʔόʔαΠυΤϯδχΞ[SIer](java/PHP..etc)

    ->iOS/Android ΞϓϦ։ൃ[ελʔτΞοϓ]

    Vue/Android…[email protected]ʹͳΓ·͢ <- NEW

    View Slide

  3. ʢࢀরɿhttps://cb-cloud.com/ ʣ

    View Slide

  4. ΞδΣϯμ
    • 0. ར༻ٕज़
    • 1. Vue / Vuex ΞʔΩςΫνϟɹʙԿΛͲ͜ʹدͤΔ͔ʁʙ
    • 2. σβΠϯ ʙσβΠφʔͱͷίϛϡχέʔγϣϯͱίϯϙʔ
    ωϯτͷ෼͚ํʁʙ
    • 3. ։ൃݴޠ ʙTypeScriptΛ࢖͍͍ͨʙ

    View Slide

  5. 0.ར༻ٕज़

    View Slide

  6. 0.ར༻ٕज़

    View Slide

  7. 0.ར༻ٕज़
    • Vue (ൃԻ͸ / v j u ː / ɺ view ͱಉ༷ʣ͸ϢʔβʔΠϯλʔϑΣΠεΛߏங͢ΔͨΊͷϓϩ
    άϨογϒϑϨʔϜϫʔΫͰ͢ɻଞͷҰຕ൘(ϞϊϦγοΫ: monolithic)ͳϑϨʔϜϫʔΫ
    ͱ͸ҟͳΓɺVue ͸গͣͭ͠ద༻͍͚ͯ͠ΔΑ͏ʹઃܭ͞Ε͍ͯ·͢ɻத֩ͱͳΔϥΠϒϥ
    Ϧ͸ view ૚͚ͩʹয఺Λ౰͍ͯͯ·͢ɻͦͷͨΊɺ࢖͍࢝ΊΔͷ΋ɺଞͷϥΠϒϥϦ΍ط
    ଘͷϓϩδΣΫτʹ౷߹͢Δͷ΋ɺͱͯ΋؆୯Ͱ͢ɻ·ͨɺϞμϯͳπʔϧ΍αϙʔτϥΠ
    ϒϥϦͱซ༻͢Δ͜ͱͰɺચ࿅͞ΕͨγϯάϧϖʔδΞϓϦέʔγϣϯͷ։ൃ΋ՄೳͰ͢ɻ
    ʢࢀরɿhttps://jp.vuejs.org/ ʣ

    View Slide

  8. 0.ར༻ٕज़
    • Nuxt͸ɺϞμϯͳ web ΞϓϦέʔγϣϯΛ࡞੒͢Δ Vue.js ʹج͍ͮͨϓϩά
    ϨογϒϑϨʔϜϫʔΫͰ͢ɻVue.js ެࣜϥΠϒϥϦʢvueɺvue-router ΍
    vuexʣ͓Αͼڧྗͳ։ൃπʔϧʢwebpackɺBabel ΍ PostCSSʣʹج͍ͮͯ
    ͍·͢ɻ Nuxt ͷ໨ඪ͸ɺ༏Εͨ։ൃऀΤΫεϖϦΤϯεΛ೦಄ʹஔ͖ɺWeb
    ։ൃΛڧྗ͔ͭߴੑೳʹ͢Δ͜ͱͰ͢ɻ
    ʢࢀরɿhttps://ja.nuxtjs.org/ ʣ

    View Slide

  9. 0.ར༻ٕज़
    • ElementUI͸ɺVue 2.0ϕʔεͷUIίϯϙʔωϯτϥΠϒϥϦɻ
    • ͋Β͔͡ΊElementUIͰ༻ҙ͞ΕͨίϯϙʔωϯτΛ༨෼ʹ
    HTML/CSS/JSΛΧελϜ͢Δඞཁ͕ͳ͘ͳΔ
    ʢࢀরɿhttps://element.eleme.io/ ʣ

    View Slide

  10. جຊߏ੒
    /utils
    /store
    /static
    /plugins
    /pages
    ./package.json
    ./nuxt.config.js
    /middleware
    /lib_sources
    /layouts
    /components
    /organisms
    /molecules
    /atomsɹ
    /assets
    /api

    View Slide

  11. Nuxt ॳظߏ੒
    BTTFUTσΟϨΫτϦʹ͸4UZMVT΍4"44ɺ*NBHFɺ'POUͷΑ͏ͳί
    ϯύΠϧ͞Ε͍ͯͳ͍ϑΝΠϧΛೖΕ·͢ɻ
    DPNQPOFOUTσΟϨΫτϦʹ͸7VFKTͷίϯϙʔωϯτϑΝΠϧΛೖ
    Ε·͢ɻ͜ΕΒͷίϯϙʔωϯτͰ͸BTZOD%BUB΍GFUDIΛ࢖͏͜ͱ
    ͸Ͱ͖·ͤΜɻ
    MBZPVUTσΟϨΫτϦ͸ΞϓϦέʔγϣϯͷϨΠΞ΢τΛؚΈ·͢ɻϨ
    ΠΞ΢τ͸ϖʔδͷ֎؍Λมߋ͢ΔͨΊʹ࢖༻͞Ε·͢ʢྫ͑͹αΠυ
    όʔͳͲʣɻ
    NJEEMFXBSFσΟϨΫτϦʹ͸ΞϓϦέʔγϣϯͷϛυϧ΢ΣΞΛೖΕ
    ·͢ɻϛυϧ΢ΣΞΛ࢖ͬͯɺϖʔδ΍ϖʔδάϧʔϓʢϨΠΞ΢τʣΛ
    ϨϯμϦϯά͢ΔΑΓ΋લʹ࣮ߦ͞ΕΔΧελϜؔ਺ΛఆٛͰ͖·͢ɻ
    QBHFTσΟϨΫτϦʹ͸ΞϓϦέʔγϣϯͷϏϡʔٴͼϧʔςΟϯάϑΝ
    ΠϧΛೖΕ·͢ɻ/VYUKTϑϨʔϜϫʔΫ͸͜ͷσΟϨΫτϦ಺ͷ͢΂ͯ
    ͷWVFϑΝΠϧΛಡΈࠐΈɺΞϓϦέʔγϣϯͷϧʔλʔΛ࡞੒͠·
    TUBUJDσΟϨΫτϦ͸௚઀αʔόͷϧʔτʹ഑ஔ͞ΕʢTUBUJD
    SPCPUTUYU͸IUUQMPDBMIPTUSPCPUTUYUͰΞΫηεՄೳͰ
    ͢ʣɺมߋ͞Εͳ͍Մೳੑͷߴ͍ϑΝΠϧؚ͕·Ε͍ͯ·͢ʢྫ͑͹ɺ
    TUPSFσΟϨΫτϦʹ͸7VFYετΞͷϑΝΠϧΛೖΕ·͢ɻ7VFYε
    τΞ͸/VYUKTʹ෇ଐ͍ͯ͠·͕͢ɺσϑΥϧτͰ͸ແޮʹͳ͍ͬͯ·
    ͢ɻ͜ͷσΟϨΫτϦʹJOEFYKTɹϑΝΠϧΛ࡞੒͢ΔͱετΞ͕༗ޮ
    /utils
    /store
    /static
    /plugins
    /pages
    ./package.json
    ./nuxt.config.js
    /middleware
    /lib_sources
    /layouts
    /components
    /organisms
    /molecules
    /atomsɹ
    /assets
    /api
    ʢࢀরɿhttps://ja.nuxtjs.org/guide/directory-structure ʣ

    View Slide

  12. Nuxt ॳظߏ੒
    BTTFUTσΟϨΫτϦʹ͸4UZMVT΍4"44ɺ*NBHFɺ'POUͷΑ͏ͳί
    ϯύΠϧ͞Ε͍ͯͳ͍ϑΝΠϧΛೖΕ·͢ɻ
    DPNQPOFOUTσΟϨΫτϦʹ͸7VFKTͷίϯϙʔωϯτϑΝΠϧΛೖ
    Ε·͢ɻ͜ΕΒͷίϯϙʔωϯτͰ͸BTZOD%BUB΍GFUDIΛ࢖͏͜ͱ
    ͸Ͱ͖·ͤΜɻ
    MBZPVUTσΟϨΫτϦ͸ΞϓϦέʔγϣϯͷϨΠΞ΢τΛؚΈ·͢ɻϨ
    ΠΞ΢τ͸ϖʔδͷ֎؍Λมߋ͢ΔͨΊʹ࢖༻͞Ε·͢ʢྫ͑͹αΠυ
    όʔͳͲʣɻ
    NJEEMFXBSFσΟϨΫτϦʹ͸ΞϓϦέʔγϣϯͷϛυϧ΢ΣΞΛೖΕ
    ·͢ɻϛυϧ΢ΣΞΛ࢖ͬͯɺϖʔδ΍ϖʔδάϧʔϓʢϨΠΞ΢τʣΛ
    ϨϯμϦϯά͢ΔΑΓ΋લʹ࣮ߦ͞ΕΔΧελϜؔ਺ΛఆٛͰ͖·͢ɻ
    QBHFTσΟϨΫτϦʹ͸ΞϓϦέʔγϣϯͷϏϡʔٴͼϧʔςΟϯάϑΝ
    ΠϧΛೖΕ·͢ɻ/VYUKTϑϨʔϜϫʔΫ͸͜ͷσΟϨΫτϦ಺ͷ͢΂ͯ
    ͷWVFϑΝΠϧΛಡΈࠐΈɺΞϓϦέʔγϣϯͷϧʔλʔΛ࡞੒͠·
    TUBUJDσΟϨΫτϦ͸௚઀αʔόͷϧʔτʹ഑ஔ͞ΕʢTUBUJD
    SPCPUTUYU͸IUUQMPDBMIPTUSPCPUTUYUͰΞΫηεՄೳͰ
    ͢ʣɺมߋ͞Εͳ͍Մೳੑͷߴ͍ϑΝΠϧؚ͕·Ε͍ͯ·͢ʢྫ͑͹ɺ
    TUPSFσΟϨΫτϦʹ͸7VFYετΞͷϑΝΠϧΛೖΕ·͢ɻ7VFYε
    τΞ͸/VYUKTʹ෇ଐ͍ͯ͠·͕͢ɺσϑΥϧτͰ͸ແޮʹͳ͍ͬͯ·
    ͢ɻ͜ͷσΟϨΫτϦʹJOEFYKTɹϑΝΠϧΛ࡞੒͢ΔͱετΞ͕༗ޮ
    /utils
    /store
    /static
    /plugins
    /pages
    ./package.json
    ./nuxt.config.js
    /middleware
    /lib_sources
    /layouts
    /components
    /organisms
    /molecules
    /atomsɹ
    /assets
    /api
    /VYUͰ͍͍ͩͨἧ͏ʂʂ

    View Slide

  13. ࠓճ଍ͨ͠΋ͷ
    BYJPTΛར༻ͨ͠"1*ͷॲཧ
    "UPNJD%FTJHOΛجʹͨ͠ίϯϙʔωϯτߏ੒ɻ
    1BHFT͔Β͜ΕΒΛݺͼग़͢Α͏ʹͨ͠
    ֎෦ϥΠϒϥϦͷಋೖʹ࢖༻ͨ͠
    ڞ௨Ͱར༻͢Δؔ਺ͷอ؅ઌ
    /utils
    /store
    /static
    /plugins
    /pages
    ./package.json
    ./nuxt.config.js
    /middleware
    /lib_sources
    /layouts
    /components
    /organisms
    /molecules
    /atomsɹ
    /assets
    /api

    View Slide

  14. ࠓճओʹ࿩͢ൣғ
    QBHFTσΟϨΫτϦʹ͸ΞϓϦέʔγϣϯͷϏϡʔٴͼϧʔςΟϯάϑΝ
    ΠϧΛೖΕ·͢ɻ/VYUKTϑϨʔϜϫʔΫ͸͜ͷσΟϨΫτϦ಺ͷ͢΂ͯ
    ͷWVFϑΝΠϧΛಡΈࠐΈɺΞϓϦέʔγϣϯͷϧʔλʔΛ࡞੒͠·
    TUPSFσΟϨΫτϦʹ͸7VFYετΞͷϑΝΠϧΛೖΕ·͢ɻ7VFYε
    τΞ͸/VYUKTʹ෇ଐ͍ͯ͠·͕͢ɺσϑΥϧτͰ͸ແޮʹͳ͍ͬͯ·
    ͢ɻ͜ͷσΟϨΫτϦʹJOEFYKTɹϑΝΠϧΛ࡞੒͢ΔͱετΞ͕༗ޮ
    /utils
    /store
    /static
    /plugins
    /pages
    ./package.json
    ./nuxt.config.js
    /middleware
    /lib_sources
    /layouts
    /components
    /organisms
    /molecules
    /atomsɹ
    /assets
    /api
    DPNQPOFOUTσΟϨΫτϦʹ͸7VFKTͷίϯϙʔωϯτϑΝΠϧΛೖ
    Ε·͢ɻ͜ΕΒͷίϯϙʔωϯτͰ͸BTZOD%BUB΍GFUDIΛ࢖͏͜ͱ
    ͸Ͱ͖·ͤΜɻ
    "UPNJD%FTJHOΛجʹͨ͠ίϯϙʔωϯτߏ੒ɻ
    1BHFT͔Β͜ΕΒΛݺͼग़͢Α͏ʹͨ͠

    View Slide

  15. 1.Vue / Vuex ΞʔΩςΫ
    νϟɹʙԿΛͲ͜ʹدͤΔ͔ʁʙ

    View Slide

  16. ࠓճओʹ࿩͢ൣғΠϝʔδ
    ʢࢀরɿhttps://vuex.vuejs.org/ja/ ʣ

    View Slide

  17. Πϝʔδ͕
    ׬શ͡Όͳ͍ؾ͕͢Δ
    ʢࢀরɿhttps://vuex.vuejs.org/ja/ ʣ

    View Slide

  18. (FUUFS
    1BHFT
    $POQP
    SOFOU
    ࠓճओʹ࿩͢ൣғͷΠϝʔδ(վม)
    ʢࢀরɿhttps://vuex.vuejs.org/ja/ ʣ

    View Slide

  19. (FUUFS
    1BHFT
    $POQP
    SOFOU
    Pages
    ʢࢀরɿhttps://vuex.vuejs.org/ja/ ʣ

    View Slide

  20. Pages

    // HTMLΛॻ͘৔ॴ

    <br/>// JSΛॻ͘৔ॴ<br/>
    <br/>// CSSΛॻ͘৔ॴ<br/>

    View Slide




  21. <br/>import Components from ‘@/components/organisms/Components'<br/>components: {<br/>Components<br/>}<br/>
    Pages - ίϯϙʔωϯτͷݺͼग़͠-

    View Slide

  22. Pages - ίϯϙʔωϯτͷݺͼग़͠-



    <br/>import Components from `@/components/organisms/Components`<br/>components: {<br/>Components<br/>}<br/>
    ݺͼग़͠
    7JFX΁ͷඳը

    View Slide

  23. Pages - vuexͷݺͼग़͠-

    :data=”data”
    >

    <br/>import { mapGetters, mapActions} from 'vuex'<br/>computed: {<br/>...mapGetters(`Store`, [‘data’])<br/>},<br/>async fetch({ store, params }) {<br/>store.dispatch(‘Store/getFirstData')<br/>},<br/>methods: {<br/>...mapActions(`Store`, [‘update’]),<br/>async getDriverOnMap() {<br/>await this.update()<br/>}<br/>}<br/>

    View Slide

  24. Pages - vuexͷݺͼग़͠-

    :data=”data”
    >

    <br/>import { mapGetters, mapActions} from 'vuex'<br/>computed: {<br/>...mapGetters(`Store`, [‘data’])<br/>},<br/>async fetch({ store, params }) {<br/>store.dispatch(‘Store/getFirstData')<br/>},<br/>methods: {<br/>...mapActions(`Store`, [‘update’]),<br/>async getDriverOnMap() {<br/>await this.update()<br/>}<br/>}<br/>
    (FUUFSͰݺͼग़͠
    ͨ಺༰ͷදࣔ
    (FUUFSͷݺͼग़͠
    "DUJPOͷݺͼग़͠
    "DUJPOͷ࣮ߦ
    ॳظදࣔͳͲ
    ͷݺͼग़͠

    View Slide

  25. (FUUFS
    1BHFT
    $POQP
    SOFOU
    Vuex
    ʢࢀরɿhttps://vuex.vuejs.org/ja/ ʣ

    View Slide

  26. Vuex - state-
    export const state = () => ({
    array: [],
    firstName: ``,
    lastName: ``,
    })
    • σʔλͷอ؅ઌ

    View Slide

  27. Vuex - mutations -
    export const mutations = {
    [types.SET_ARRAY](state, array) {
    state.array = array
    },
    [types.SET_FIRST_NAME](state, firstName) {
    state.firstName = firstName
    },
    [types.SET_LAST_NAME](state, lastName) {
    state.lastName = lastName
    }
    }
    • σʔλͷมߋ

    View Slide

  28. export const getters = {
    fullName: state => {
    return state.firstName + state.lastName
    },
    array: state => {
    return state.array
    }
    }
    Vuex - getters -
    • σʔλͷऔಘ

    View Slide

  29. export const actions = {
    async fetchUser({ commit }) {
    const user = await fetchUser()
    commit(types.SET_FIRST_NAME, user.firstName)
    commit(types.SET_LAST_NAME, user.lastName)
    }
    }
    Vuex - actions -
    • σʔλͷߋ৽ॲཧ

    View Slide

  30. ࣦഊͨ͜͠ͱ

    View Slide

  31. ࣦഊͨ͜͠ͱ
    • StateΛ௚઀ࢀর͍ͯ͠Δ..
    • ActionΛ௨͞ͳ͍MutationͷॲཧΛ͔͍ͯ͠·ͬͨ..

    View Slide


  32. {{firstName}}

    <br/>export default {<br/>computed: {<br/>...mapState(`store`, ['firstName'])<br/>},<br/>methods: {<br/>update() {<br/>this.$store.commit(‘store/' + types.SET_FIRST_NAME)<br/>}<br/>}<br/>}<br/>
    <br/>// CSSΛॻ͘৔ॴ<br/>
    ࣦഊͨ͜͠ͱ
    • StateΛ௚઀ࢀর͍ͯ͠Δ..
    • ActionΛ௨͞ͳ͍MutationͷॲཧΛ͔͍ͯ͠·ͬͨ..

    View Slide

  33. ͳͥState/MutationΛ௚઀ΑͿ
    ͷ͕·͍ͣͷ͔ʁ

    View Slide

  34. ͳͥState/MutationΛ௚઀ΑͿ
    ͷ͕·͍ͣͷ͔ʁ
    • StateΛ௚઀ࢀর͢ΔͱɺVuexʹอଘ͞Ε͍ͯΔσʔλΛԿ΋հ
    ͣ͞ʹݟΔ͜ͱʹͳΔɻGetterͳͲͰදࣔ಺༰Λมߋͯ͠ࢀর
    ͍ͯ͠Δ৔߹͕͋ΔͨΊɺ৘ใͷҰҙੑ͕อͯͳ͘ͳΔ͔Β
    • MutationΛݺͿ͜ͱͰvueϑΝΠϧ͔ΒɺStateͷ಺༰Λ௚઀ॻ
    ͖׵͑Δ͜ͱ͕Ͱ͖Δɻ͜Ε͸ϩδοΫΛvueϑΝΠϧʹ಺ࡏ͠
    ͯ͠·͏ͷͰɺߋ৽ॲཧ͸ActionsʹدͤΔɻ

    View Slide

  35. (FUUFS
    1BHFT
    $POQP
    SOFOU
    "

    View Slide

  36. 1.Vue / Vuex ΞʔΩςΫ
    νϟɹʙԿΛͲ͜ʹدͤΔ͔ʁʙ
    • ࢀরॲཧ͸gettersʹΑͤΔ
    • ߋ৽ॲཧ͸ActionsʹدͤΔ
    • vue͔Β͸gettersͱActionsͷΈΛࢀর͢Δ
    • state͸getters͔Βࢀর͢Δ
    • Mutation͸Actions͔Βߋ৽͢Δ

    View Slide

  37. 2.σβΠϯ ʙσβΠφʔͱͷίϛϡχ
    έʔγϣϯͱίϯϙʔωϯτͷ෼͚ํʁʙ

    View Slide

  38. Atomic DesignΛ࠾༻ʂ

    View Slide

  39. Atomic Designͱ͸ʁ
    • Atomic Design ͱ͸ ɺBrad Frostࢯ͕ఏএͨ͠UIઃܭʹ͓͍ͯ
    ίϯϙʔωϯτΛํ๏/ࢥ૝Ͱ͢ɻ
    • ϑϩϯτΤϯυͷઃܭࢥ૝ͷΑ͏ʹޠΒΕ͍ͯΔࣄ΋͋Γ·͢
    ͕ɺ͋͘·ͰσβΠϯͷઃܭʹ͍ͭͯͷ΋ͷͰ͢ɻ
    ʢࢀরɿhttp://atomicdesign.bradfrost.com/ ʣ

    View Slide

  40. Atomic Designͱ͸ʁ
    ʢࢀরɿhttp://atomicdesign.bradfrost.com/ ʣ

    View Slide

  41. View Slide

  42. Atoms

    class="Input"
    v-model="value"
    :type="inputType"
    :placeholder="placeholder"
    :disabled="isDisabled"
    @blur="$emit('blur')"
    />

    <br/>props: {<br/>value: {<br/>type: String,<br/>default: ''<br/>}<br/>}<br/>
    <br/>// CSSΛॻ͘৔ॴ<br/>
    • element-uiίϯϙʔωϯτͷϥο
    ύʔ͔ͦͷ΋ͷΛ͍ΕΔ

    View Slide

  43. Molecules






    <br/>import Input from ‘@/components/atoms/Input’<br/>import Label from ‘@/components/atoms/Label’<br/>
    <br/>// CSSΛॻ͘৔ॴ<br/>
    • 1ͭҎ্ͷAtoms͕ར༻͞Ε͍ͯΔ

    View Slide

  44. Organisms







    <br/>import Form from ‘@/components/molecules/Form’<br/>import Button from ‘@/components/molecules/Button’<br/>export default {<br/>}<br/>
    <br/>// CSSΛॻ͘৔ॴ<br/>

    View Slide

  45. Templates






    <br/>import Basic from ‘@/components/organisms/Basic’<br/>import Custom from ‘@/components/organisms/Custom’<br/>
    <br/>// CSSΛॻ͘৔ॴ<br/>

    View Slide

  46. Pages





    <br/>import InputPage from ‘@/components/templates/InputPage’<br/>// Store΁ͷΞΫηεॲཧ͸Pages͚ͩ…!<br/>

    View Slide

  47. Atomic DesignͰࣦഊͨ͜͠ͱ

    View Slide

  48. Atomic DesignͰࣦഊͨ͜͠ͱ
    • elementUI४ڌʹܾΊͨͷʹ͔ͳΓΧελϜͰ࡞ͬͯ͠·ͬͨ
    UIɻ
    • TemplatesΛೖΕͣʹ։ൃ͍ͯͨ͠…
    • ֊૚͕ਂ͘ͳΓແݶemit஍ࠈ..

    View Slide

  49. ΧελϜͰ࡞ͬͯ͠·ͬͨUIɻ
    • ཁ݅ΛܾΊΔࡍʹσβΠϯ͕มΘͬͯ͠·͏
    • σβΠϯγεςϜ͕ߏஙͰ͖͍ͯͳ͔ͬͨ

    View Slide

  50. ʢࢀরɿhttps://note.mu/smartcamp_design/n/n4e4717e9d8d0 ʣ
    Atomic Design ͱ Figma ͷ૊Έ߹ΘͤͰσβΠϯ͕ศརʹͳΔʛσβΠϯγεςϜͷ࡞Γํ
    ΧελϜͰ࡞ͬͯ͠·ͬͨUIɻ

    View Slide

  51. TemplatesΛೖΕͣʹ։ൃ͍ͯ͠
    ͨ…
    ❌ ංେԽɹ

    View Slide

  52. TemplatesΛೖΕͣʹ։ൃ͍ͯ͠
    ͨ…

    View Slide

  53. ແݶemit஍ࠈ..
    DMJDL&WFOU DMJDL&WFOU DMJDL&WFOU DMJDL&WFOU DMJDL&WFOU
    emit emit emit emit

    View Slide

  54. 3. ։ൃݴޠ ʙTypeScriptΛ࢖͍ͨ
    ͍ʙ (్த)

    View Slide

  55. ੩తܕ෇͚Ͱ։ൃ͍ͨ͠ʂʂʂʂ

    View Slide

  56. ͦ͏SwiftͷΑ͏ʹ..

    View Slide

  57. Swiftͷߏ଄ମͷѻ͍
    struct Team: Decodable {
    let id:Int
    let name:String
    let shortName:String
    let crestUrl:URL
    let website:URL
    let venue:String
    }
    ——
    let team:Team = Team()

    View Slide

  58. ͦ͜ͰTypeScriptͰ͢Α

    View Slide

  59. Vuex - types -
    export interface RootState {
    version: string;
    }
    export interface TeamsState {
    teams: Team[]
    }
    export interface Team {
    ɹ id: number;
    name:string;
    area: Area;
    crestUrl: string;
    }
    export interface Area {
    id: string;
    name: string;
    }
    • σʔλͷఆٛ

    View Slide

  60. Vuex - index/state-
    const state: TeamsState = {
    teams: [],
    };
    export const todos: Module = {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
    };
    • σʔλͷอ؅ઌ

    View Slide

  61. Vuex - mutations -
    export const mutations: MutationTree = {
    teamsLoaded(state, teams: Team[]) {
    state.teams = teams
    },
    teamsError(state) {
    state.teams = []
    }
    }
    • σʔλͷมߋ

    View Slide

  62. const getters: GetterTree = {
    teams: (state: TeamsState) => {
    return state
    },
    }
    Vuex - getters -
    • σʔλͷऔಘ

    View Slide

  63. const actions: ActionTree= {
    fetch: async ({ commit }) => {
    try {
    const res = await axios.get('https://api.football-data.org/v2/competitions/PL/teams/', {
    headers: {
    'X-Auth-Token': ‘XXXX'
    }
    })
    const teams: Team[] = res.data.teams
    commit('teamsLoaded', teams)
    } catch (error) {
    // commit('teamsError')
    }
    },
    };
    Vuex - actions -
    • σʔλͷߋ৽ॲཧ

    View Slide

  64. Pages - vuexͷݺͼग़͠-


    {{ message }}

    {{team.name}}



    <br/>import { Vue } from 'vue-property-decorator';<br/>import { mapGetters, mapActions, mapState, mapMutations } from 'vuex'<br/>export default Vue.extend({<br/>data () {<br/>const message: string = 'This is a message'<br/>return {<br/>message<br/>}<br/>},<br/>computed: {<br/>...mapGetters(`Team`, ['teams'])<br/>},<br/>async fetch ({ store, params }) {<br/>await store.dispatch('Team/fetch')<br/>}<br/>})<br/>·ͩͰ͖ͯͳ͍Α<br/>

    View Slide

  65. GitHub
    https://github.com/entaku19890818/football-nuxt

    View Slide

  66. ·ͱΊ
    • ར༻ٕज़
    • Nuxtʹ΄΅͢΂͕ͯ͋Δ
    • Vue / Vuex ΞʔΩςΫνϟ
    • ࢀরॲཧ͸gettersʹΑͤΔ
    • ߋ৽ॲཧ͸ActionsʹدͤΔ
    • σβΠϯ
    • UIϑϨʔϜϫʔΫΛҙࣝͨ͠σβΠφʔͱͷίϛϡχέʔγϣϯ
    • σβΠϯγεςϜͭ͘Δ
    • ։ൃݴޠ
    • TypeScriptͰ৺ཧత҆શੑͷߴ͍։ൃΛ…

    View Slide

  67. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View Slide