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

ࣗݾ঺հ • ԕ౻୓໻ (entaku) • Twitter: @entaku19890818 • iOS/Android/Vue ΤϯδχΞ • ܦྺ: ͳΜͪΌͬͯSE
 ->NWΤϯδχΞ[SIer]
 ->αʔόʔαΠυΤϯδχΞ[SIer](java/PHP..etc)
 ->iOS/Android ΞϓϦ։ൃ[ελʔτΞοϓ]
 Vue/Android…etc@CBCloudʹͳΓ·͢ <- NEW

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

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

0.ར༻ٕज़

0.ར༻ٕज़

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

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

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

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

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 ʣ

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Ͱ͍͍ͩͨἧ͏ʂʂ

ࠓճ଍ͨ͠΋ͷ 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

ࠓճओʹ࿩͢ൣғ 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͔Β͜ΕΒΛݺͼग़͢Α͏ʹͨ͠

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

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

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

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

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

Pages // HTMLΛॻ͘৔ॴ // JSΛॻ͘৔ॴ // CSSΛॻ͘৔ॴ

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

Pages - ίϯϙʔωϯτͷݺͼग़͠- import Components from `@/components/organisms/Components` components: { Components } ݺͼग़͠ 7JFX΁ͷඳը

Pages - vuexͷݺͼग़͠- import { mapGetters, mapActions} from 'vuex' computed: { ...mapGetters(`Store`, [‘data’]) }, async fetch({ store, params }) { store.dispatch(‘Store/getFirstData') }, methods: { ...mapActions(`Store`, [‘update’]), async getDriverOnMap() { await this.update() } }

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

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

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

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 } } • σʔλͷมߋ

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

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 - • σʔλͷߋ৽ॲཧ

ࣦഊͨ͜͠ͱ

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

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

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

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

(FUUFS 1BHFT $POQP SOFOU "

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

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

Atomic DesignΛ࠾༻ʂ

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

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

No content

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

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

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

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

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

Atomic DesignͰࣦഊͨ͜͠ͱ

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

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

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

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

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

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

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

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

ͦ͏SwiftͷΑ͏ʹ..

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()

ͦ͜ͰTypeScriptͰ͢Α

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; } • σʔλͷఆٛ

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

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

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

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 - • σʔλͷߋ৽ॲཧ

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

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

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

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