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. ࣗݾ঺հ • ԕ౻୓໻ (entaku) • Twitter: @entaku19890818 • iOS/Android/Vue ΤϯδχΞ

    • ܦྺ: ͳΜͪΌͬͯSE
 ->NWΤϯδχΞ[SIer]
 ->αʔόʔαΠυΤϯδχΞ[SIer](java/PHP..etc)
 ->iOS/Android ΞϓϦ։ൃ[ελʔτΞοϓ]
 Vue/Android…etc@CBCloudʹͳΓ·͢ <- NEW
  2. ΞδΣϯμ • 0. ར༻ٕज़ • 1. Vue / Vuex ΞʔΩςΫνϟɹʙԿΛͲ͜ʹدͤΔ͔ʁʙ

    • 2. σβΠϯ ʙσβΠφʔͱͷίϛϡχέʔγϣϯͱίϯϙʔ ωϯτͷ෼͚ํʁʙ • 3. ։ൃݴޠ ʙTypeScriptΛ࢖͍͍ͨʙ
  3. 0.ར༻ٕज़ • Vue (ൃԻ͸ / v j u ː /

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

    vuexʣ͓Αͼڧྗͳ։ൃπʔϧʢwebpackɺBabel ΍ PostCSSʣʹج͍ͮͯ ͍·͢ɻ Nuxt ͷ໨ඪ͸ɺ༏Εͨ։ൃऀΤΫεϖϦΤϯεΛ೦಄ʹஔ͖ɺWeb ։ൃΛڧྗ͔ͭߴੑೳʹ͢Δ͜ͱͰ͢ɻ ʢࢀরɿhttps://ja.nuxtjs.org/ ʣ
  5. 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 ʣ
  6. 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Ͱ͍͍ͩͨἧ͏ʂʂ
  7. ࠓճओʹ࿩͢ൣғ 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͔Β͜ΕΒΛݺͼग़͢Α͏ʹͨ͠
  8. Pages - ίϯϙʔωϯτͷݺͼग़͠- <template> <components></components > </template> <script> import Components

    from `@/components/organisms/Components` components: { Components } </script> ݺͼग़͠ 7JFX΁ͷඳը
  9. Pages - vuexͷݺͼग़͠- <template> <components :data=”data” ></components > </template> <script>

    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() } } </script>
  10. Pages - vuexͷݺͼग़͠- <template> <components :data=”data” ></components > </template> <script>

    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() } } </script> (FUUFSͰݺͼग़͠ ͨ಺༰ͷදࣔ (FUUFSͷݺͼग़͠ "DUJPOͷݺͼग़͠ "DUJPOͷ࣮ߦ ॳظදࣔͳͲ ͷݺͼग़͠
  11. Vuex - state- export const state = () => ({

    array: [], firstName: ``, lastName: ``, }) • σʔλͷอ؅ઌ
  12. 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 } } • σʔλͷมߋ
  13. export const getters = { fullName: state => { return

    state.firstName + state.lastName }, array: state => { return state.array } } Vuex - getters - • σʔλͷऔಘ
  14. 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 - • σʔλͷߋ৽ॲཧ
  15. <template> <div> {{firstName}} </div> </template> <script> export default { computed:

    { ...mapState(`store`, ['firstName']) }, methods: { update() { this.$store.commit(‘store/' + types.SET_FIRST_NAME) } } } </script> <style scoped lang=“scss"> // CSSΛॻ͘৔ॴ </style> ࣦഊͨ͜͠ͱ • StateΛ௚઀ࢀর͍ͯ͠Δ.. • ActionΛ௨͞ͳ͍MutationͷॲཧΛ͔͍ͯ͠·ͬͨ..
  16. 1.Vue / Vuex ΞʔΩςΫ νϟɹʙԿΛͲ͜ʹدͤΔ͔ʁʙ • ࢀরॲཧ͸gettersʹΑͤΔ • ߋ৽ॲཧ͸ActionsʹدͤΔ •

    vue͔Β͸gettersͱActionsͷΈΛࢀর͢Δ • state͸getters͔Βࢀর͢Δ • Mutation͸Actions͔Βߋ৽͢Δ
  17. Atomic Designͱ͸ʁ • Atomic Design ͱ͸ ɺBrad Frostࢯ͕ఏএͨ͠UIઃܭʹ͓͍ͯ ίϯϙʔωϯτΛํ๏/ࢥ૝Ͱ͢ɻ •

    ϑϩϯτΤϯυͷઃܭࢥ૝ͷΑ͏ʹޠΒΕ͍ͯΔࣄ΋͋Γ·͢ ͕ɺ͋͘·ͰσβΠϯͷઃܭʹ͍ͭͯͷ΋ͷͰ͢ɻ ʢࢀরɿhttp://atomicdesign.bradfrost.com/ ʣ
  18. Atoms <template> <el-input class="Input" v-model="value" :type="inputType" :placeholder="placeholder" :disabled="isDisabled" @blur="$emit('blur')" />

    </template> <script> props: { value: { type: String, default: '' } } </script> <style scoped lang=“scss"> // CSSΛॻ͘৔ॴ </style> • element-uiίϯϙʔωϯτͷϥο ύʔ͔ͦͷ΋ͷΛ͍ΕΔ
  19. Molecules <template> <div class=”Form”> <Label /> <Input /> </div> </template>

    <script> import Input from ‘@/components/atoms/Input’ import Label from ‘@/components/atoms/Label’ </script> <style scoped lang=“scss"> // CSSΛॻ͘৔ॴ </style> • 1ͭҎ্ͷAtoms͕ར༻͞Ε͍ͯΔ
  20. Organisms <template> <div class=”Basic”> <Form /> <Form /> <Button />

    </div> </template> <script> import Form from ‘@/components/molecules/Form’ import Button from ‘@/components/molecules/Button’ export default { } </script> <style scoped lang=“scss"> // CSSΛॻ͘৔ॴ </style>
  21. Templates <template> <div class=”InputPage”> <Basic /> <Custom /> </div> </template>

    <script> import Basic from ‘@/components/organisms/Basic’ import Custom from ‘@/components/organisms/Custom’ </script> <style scoped lang=“scss"> // CSSΛॻ͘৔ॴ </style>
  22. Pages <template> <div class=”InputPage”> <InputPage /> </div> </template> <script> import

    InputPage from ‘@/components/templates/InputPage’ // Store΁ͷΞΫηεॲཧ͸Pages͚ͩ…! </script> <style scoped lang=“scss”></style>
  23. 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()
  24. 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; } • σʔλͷఆٛ
  25. Vuex - index/state- const state: TeamsState = { teams: [],

    }; export const todos: Module<TeamsState, RootState> = { namespaced: true, state, getters, actions, mutations }; • σʔλͷอ؅ઌ
  26. Vuex - mutations - export const mutations: MutationTree<TeamsState> = {

    teamsLoaded(state, teams: Team[]) { state.teams = teams }, teamsError(state) { state.teams = [] } } • σʔλͷมߋ
  27. const getters: GetterTree<TeamsState, RootState> = { teams: (state: TeamsState) =>

    { return state }, } Vuex - getters - • σʔλͷऔಘ
  28. const actions: ActionTree<TeamsState, RootState>= { 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 - • σʔλͷߋ৽ॲཧ
  29. Pages - vuexͷݺͼग़͠- <template> <div> {{ message }} <div v-for="team

    in teams.teams" :key='team.id'> {{team.name}} </div> </div> </template> <script lang="ts"> 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') } }) ·ͩͰ͖ͯͳ͍Α
  30. ·ͱΊ • ར༻ٕज़ • Nuxtʹ΄΅͢΂͕ͯ͋Δ • Vue / Vuex ΞʔΩςΫνϟ

    • ࢀরॲཧ͸gettersʹΑͤΔ • ߋ৽ॲཧ͸ActionsʹدͤΔ • σβΠϯ • UIϑϨʔϜϫʔΫΛҙࣝͨ͠σβΠφʔͱͷίϛϡχέʔγϣϯ • σβΠϯγεςϜͭ͘Δ • ։ൃݴޠ • TypeScriptͰ৺ཧత҆શੑͷߴ͍։ൃΛ…