͜ͷՆϞς͍ͨਓͷͨΊͷTUFQ ͰىಈͰ͖Δ/VYUKT3BJMT *% 18ೝূ෇͖ αϯϓϧΛެ։ʂ גࣜձࣾϚπϦΧ/PUJBࣄۀ੹೚ऀ"ZVNV4VNJEB ˞͜ͷࢿྉ͸5XJUUFS8&.Ͱྲྀ͍ͯ͠·͢

ࣗݾ঺հ

גࣜձࣾ ϚπϦΧ 4FOTFT 4'"$3. /PUJB &NBJM5SBDLJOH 3BJMTPS3FBDU ΤϯδχΞ ઈࢍืूதͰ͢ʂ

w େֶߦ͖ͳ͕Β*5ϕϯνϟʔاۀͰ໿೥ؒ༗ঈΠϯλʔϯ w 1)1 .Z42- $BLF1)1 Y 8PSEQSFTT $ "41 /&5 w ౦ࣳ৘ใγεςϜגࣜձࣾͰ೥ؒϔϧεέΞࣄۀʹैࣄ w 7#/&5 $ 0SBDMF%BUBCBTF w ̍ਓͰىۀ͠Α͏ͱࢼΈΔ͕ࣦഊ w 3VCZPO3BJMT 'VFM1)1 .Z42- "84 "OTJCMF w גࣜձࣾϚπϦΧʹΤϯδχΞೋਓ໨Ͱ+PJOͯ͠4FOTFTΛ։ൃ w 3VCZPO3BJMT "OHVMBS+4 .Z42- "84 ܦྺ

w ̍ਓͰ/PUJBࣄۀΛ੒௕͍ͤͯ͞·͢ ݱࡏࣾ௒ w ΤϯδχΞͷྖҬ͸ɺϑϩϯτɺόοΫΤϯυɺ
 Πϯϑϥ w #J[ྖҬ͸ɺ1.ɺ$4ɺϚʔέɺӦۀ ࠷ۙͯ͠ͳ͍ w ෭ۀͰ΋ͭͷ৽͍͠ࣄۀΛ্ཱͪ͛த ݱࡏ

ͳͥ͜ͷλΠτϧʹ ͳͬͯ͠·ͬͨͷ͔

No content

No content

/VYUKTͱ͸

/VYUKTͱ͸

αϯϓϧͷઆ໌

ͳͥ͜ͷ044Λ࢝ΊΑ͏ͱ ࢥͬͨͷ͔

৽͍͍͍͠αʔϏεΛࢥ͍ͭ ͍ͨʂ

ͱ͍͏ͱ͖ʹɺ

͙͢ʹ࣮૷Ͱ͖Δ؀ڥ͕ ͳ͍ʜ

ͦ͜Ͱࢥߟ͕ࢭ·ͬͨΓɺ໘౗ ʹͳͬͯ΍ΊͨΓ͠ͳ͍Α͏ʹ

͜ͷ044Λ΍Ζ͏ͱࢥ͍ͬͯ ·͢ʂ

w αϯϓϧ͸શͯެ։͍ͯ͠·͢ w /VYUKTIUUQTHJUIVCDPN XBMLFSTVNJEBOVYUKTTBNQMF w 3BJMTIUUQTHJUIVCDPN XBMLFSTVNJEBSBJMTBQJGPS OVYUKT w DMPOFͨ͠Βͭͱ΋ANBLF EPDLFS@VQAىಈͰ͖·͢ w OVYUKTͷىಈ͸গ͔͔࣌ؒ͠Γ· ͢ αϯϓϧ ˒ελʔ˒௖͚Δͱخ͍͠Ͱ͢ʂ ΍Δؾग़·͢ʂ

# Nuxtjsͷ࡞੒ $ yarn create nuxt-app # TypeScript༻ͷؔ࿈ϥΠϒϥϦ $ yarn add -D @nuxt/typescript $ yarn add ts-node $ yarn add vue-property-decorator /VYUKTͷ࡞੒

No content

ҎԼͷ3ͭͷϑΝΠϧΛ௥Ճ pages/posts/index.vue components/PostPreview.vue models/Post.ts ػೳ1PTUҰཡ ˡϦϑΝΫλϦϯάͯ͠ݱࡏ͸ 1PTU4IPXʹίϯϙʔωϯτ໊ม Θ͍ͬͯ·͢

w ˢAQBHFTAσΟϨΫτϦ͸ಛघͳσΟϨΫτϦͰɺͦͷ഑Լ ʹ഑ஔ͞ΕͨύεͲ͓ΓͷϧʔςΟϯά͕ࣗಈతʹઃఆ͞Ε· ͢ w IUUQQPTUTJOEFY˞JOEFY͸লུ͞ΕΔ w IUUQQPTUTʹΞΫηε͢Δ͜ͱͰAQBHFT QPTUTJOEFYWVFAϑΝΠϧ͕ݺͼग़͞ΕΔ QBHFTQPTUTJOEFYWVF

಺෦తʹ͸ҎԼͷΑ͏ʹϧʔςΟϯά͕ు͖ग़͞Ε͍ͯΔ router: { routes: [ { path: '/posts', component: 'pages/posts.vue', children: [ { path: '', component: 'pages/posts/index.vue', name: 'posts' } ] } ] } QBHFTQPTUTJOEFYWVF

import { Component, Vue } from 'vue-property-decorator' import Post from '~/models/Post' @Component({ components: { PostPreview: () => import('~/components/PostPreview.vue') }, asyncData() { return { // TODO: call api server posts: [ { id: 1, title: 'aaa', description: 'AAA' } ] } } }) export default class FeedPage extends Vue { posts: Post[] = [] } QBHFTQPTUTJOEFYWVF

export default Post { id: number title: string description: string } NPEFMT1PTUUT

import { Component, Vue, Prop } from 'vue-property-decorator' import Post from '~/models/Post' @Component export default class PostPreview extends Vue { @Prop({ type: Object, required: true }) post: Post } DPNQPOFOUT1PTU1SFWJFXWVF

͜Μͳײ͡Ͱ 1PTUҰཡ͕ग़ དྷ্͕Γ·͢

// plugins/axios.ts import axios from 'axios' export default axios.create({ baseURL: process.env.apiUrl }) // nuxt.config.js env: { apiUrl: process.env.API_URL || 'http://0.0.0.0:3000' }, BQJTFSWFSͱͷ௨৴෦෼

BQJTFSWFSͱͷ௨৴෦෼

ೝূํ๏

ࠓճ࢖༻ͨ͠ͷ͸ 5PLFOCBTFೝূ

w *%1BTTXPSEΛ4FSWFSʹૹ৴ w *%1BTTXPSE͕ਖ਼͚͠Ε͹ηο γϣϯ*%Λൃߦ͠ɺ$MJFOUଆʹฦ ٫ w $MJFOUଆͰηογϣϯ*%Λ$PPLJF ʹอଘ w Ҏ߱ͷϦΫΤετʹൃߦ͞Εͨ ηογϣϯ*%ΛҰॹʹૹ৴͢Δ͜ ͱͰ4FSWFSଆͰϢʔβΛࣝผ Ұൠతͳೝূ ᶃϩάΠϯ৘ใ *%EFNP!YYYDPN 18EFNPEFNP ᶄϩάΠϯ৘ใΛอଘ ᶅηογϣϯ*% LEGKJBEBKGKGBʜ ᶆ$PPLJFʹηογϣϯ*% Λอଘ

w *%1BTTXPSEΛ4FSWFSʹૹ৴ w *%1BTTXPSE͕ਖ਼͚͠Ε͹5PLFOΛ ൃߦ͠ɺ$MJFOUଆʹฦ٫ w $MJFOUଆͰ5PLFOΛ$PPLJFʹอଘ w ࣍ͷϦΫΤετʹ5PLFOΛҰॹʹૹ ৴͢Δ͜ͱͰϢʔβΛࣝผɻͦͷϨ εϙϯεʹ৽ͨͳ5PLFO͕4FSWFSଆ ͔ΒૹΒΕͯ͘ΔͷͰɺͦͷ5PLFO Λอଘ͢Δ w 5PLFO͸࢖͍ࣺͯͳͷͰɺϦΫΤε τຖʹҧ͏ 5PLFOCBTFೝূ ˞EFWJTF@UPLFO@BVUIHFNΛ࢖༻

ҰൠతͳೝূΑΓ΋ ηΩϡΞ

࠷ۙͷҰൠతͳೝূͰ΋ϥΠϒϥϦʹΑͬͯ͸ ηογϣϯ*%Λ࢖͍ࣺͯͷ஋ʹ͍ͯ͠Δ 5PLFOCBTFͱ΄ͱΜͲมΘΒͳ͍͔΋

// plugins/axios.ts axiosInstance.interceptors.response.use((response) => { // See https://devise-token-auth.gitbook.io/devise-token-auth/conceptual setCookies(response.headers) return response }, (error) => { removeCookies() // FIXME: redirect without using window.location if(error.response.status === 401) { window.location.href = '/sign_in' } return Promise.reject(error) }) ೝূ෦෼ͷ࣮૷

// plugins/axios.ts axiosInstance.interceptors.request.use((config) => { config.headers = setHeaders(config.headers) return config }, (error) => { return Promise.reject(error) }) ೝূ෦෼ͷ࣮૷

ೝূ෦෼ͷ࣮૷

ը໘ભҠ ᶃϩάΠϯ੒ޭ ᶄ"%%ϘλϯΛΫϦοΫ ᶅ͏·͘อଘ͞Εͨ৔߹ ᶆ5PLFO͕ਖ਼͘͠ͳ͍৔߹

7VFUJGZͷ࢖͍ํ

7VFUJGZ IUUQTWVFUJGZKTDPN

Save

DPNQPOFOUTQPTU'PSNWVF

import { Component, Vue, Prop } from 'vue-property-decorator' import Post from '~/models/Post' @Component export default class PostForm extends Vue { @Prop({ type: Object }) post: Post data() { return { title: '', titleRules: [v => !!v || 'Title is required'], body: '', valid: false } } DPNQPOFOUTQPTU'PSNWVF

7VFUJGZ

+FTUͷ࢖͍ํ

w 'BDFCPPL͕ࣾ044ͱͯ͠։ൃΛਐ Ί͍ͯΔ+BWB4DSJQUͷϢχοτς ετͷͨΊͷπʔϧ w /PEF 3FBDU "OHVMBS 7VFͳͲ ৭ʑͳ؀ڥͰ࢖༻͢Δ͜ͱ͕Ͱ͖ Δ +FTUͱ͸

import { shallowMount } from "@vue/test-utils" import PostShow from "@/components/post/Show.vue" describe("PostShow component", () => { let wrapper; beforeEach(() => { wrapper = shallowMount(PostShow, { propsData: { post: { id: 1, title: "AAA", body: "aaa" } } }); }); it("has the expected html structure", () => { expect(wrapper.element).toMatchSnapshot(); }); it("has the expected text", () => { expect(wrapper.text()).toBe('AAA aaa'); }); }); 1PTU4IPXWVFͷςετ 1PTU4IPXίϯϙʔωϯτʹ1PTUͷ஋Λ౉ͯ͠ ΤϨϝϯτΛੜ੒

import { shallowMount } from "@vue/test-utils" import PostShow from "@/components/post/Show.vue" describe("PostShow component", () => { let wrapper; beforeEach(() => { wrapper = shallowMount(PostShow, { propsData: { post: { id: 1, title: "AAA", body: "aaa" } } }); }); it("has the expected html structure", () => { expect(wrapper.element).toMatchSnapshot(); }); it("has the expected text", () => { expect(wrapper.text()).toBe('AAA aaa'); }); }); 1PTU4IPXWVFͷςετ exports[`PostShow component has the expected html structure 1`] = ` `; ΋ͱ΋ͱ߹ͬͨεφοϓγϣοτͱ৽ͨʹੜ੒͞Εͨ εφοϓγϣοτ͕Ұக͢Δ͔Λςετ͍ͯ͠Δ

࠷ޙʹ

͋ͱ͸ɺDMPOFͯ͠σόοά͠ ͯײ֮௫ΜͰ͍ͩ͘͞

(JUIVCελʔ௖͚Ε͹ࢲ΋΋ͬͱࠓ ޙ΋ؤுͬͯίϛοτ͍͖ͯ͠·͢স

༧ఆͱͯ͠͸(PPHMFೝূͱ͔ ΋࣮૷͍͖ͯ͠·͢

͜ͷՆϞς͍ͨํ͸ւͳΜ͔ʹߦ͔ͣʹҾ ͖͜΋ͬͯ044׆ಈ͍͖ͯ͠·͠ΐ͏ʂ

5IBOLZPV