Nuxt.js in TypeScript

Transcript

1. Nuxt.js in TypeScript ΍ͬͯΈͨ nunulk ΒΒͼΎ͏ʮ΍ͬͯΈͨʯറΓͷLTେձ

2. ࣗݾ঺հ 
 const name: Name = 'nunulk(͵͵Δ͘)' let job: Job

   = 'ϑϦʔϥϯεͷ΢ΣϒΞϓϦέʔγϣϯΤϯδχΞ' let languages: Language[] = [
 'C/C++', ‘Java', 'PHP', ‘JavaScript', ‘TypeScript’,
 ] let frameworks: Framework[] = [
 'CodeIgniter', 'Symfony', 'CakePHP', ‘Laravel', ]

3. ຊ೔࿩͢͜ͱ • Nuxt.js ͱ TypeScript ͷ঺հ • Nuxt.js ͷ TypeScript

   ରԠঢ়گ • Nuxt.js Λ TypeScript Ͱಈ͔ͯ͠ΈΔ

4. Nuxt.js, TypeScript ͷ঺հ

5. Nuxt.js ͱ͸ “Nuxt.js ͸ Vue ΞϓϦέʔγϣϯΛ࡞੒͢ΔϑϨʔϜϫʔ ΫͰ͢ɻϢχόʔαϧΞϓϦέʔγϣϯɺ੩తʹੜ੒͞Ε ΔΞϓϦέʔγϣϯɺγϯάϧϖʔδΞϓϦέʔγϣϯͷ த͔Β࡞੒͢ΔΞϓϦέʔγϣϯΛબͿ͜ͱ͕Ͱ͖·͢ɻ” -

   ͸͡Ίʹ - Nuxt.js

6. Nuxt.js ͱ͸ “Nuxt.js ͸ Vue ΞϓϦέʔγϣϯΛ࡞੒͢ΔϑϨʔϜϫʔ ΫͰ͢ɻϢχόʔαϧΞϓϦέʔγϣϯɺ੩తʹੜ੒͞Ε ΔΞϓϦέʔγϣϯɺγϯάϧϖʔδΞϓϦέʔγϣϯͷ த͔Β࡞੒͢ΔΞϓϦέʔγϣϯΛબͿ͜ͱ͕Ͱ͖·͢ɻ” -

   ͸͡Ίʹ - Nuxt.js

7. Nuxt.js ͱ͸ “Nuxt.js ͸ Vue ΞϓϦέʔγϣϯΛ࡞੒͢ΔϑϨʔϜϫʔ ΫͰ͢ɻϢχόʔαϧΞϓϦέʔγϣϯɺ੩తʹੜ੒͞Ε ΔΞϓϦέʔγϣϯɺγϯάϧϖʔδΞϓϦέʔγϣϯͷ த͔Β࡞੒͢ΔΞϓϦέʔγϣϯΛબͿ͜ͱ͕Ͱ͖·͢ɻ” -

   ͸͡Ίʹ - Nuxt.js

8. Nuxt.js ͱ͸ • vue, vuex, vue-router, vue-server-renderer, vue-meta શ෦ೖΓ •

   ϧʔςΟϯάͷࣗಈԽɺmiddleware • Vue ίϯϙʔωϯτͱ Vuex Store ͷ࣮૷ʹઐ೦ Ͱ͖Δ

9. TypeScript ͱ͸ “TypeScript ͸ϚΠΫϩιϑτʹΑͬͯ։ൃ͞Εɺϝϯςφϯε ͞Ε͍ͯΔϑϦʔͰΦʔϓϯιʔεͷϓϩάϥϛϯάݴޠͰ͋Δɻ TypeScript͸JavaScriptʹରͯ͠ɺলུ΋Մೳͳ੩తܕ෇͚ͱΫ ϥεϕʔεΦϒδΣΫτࢦ޲ΛՃ͑ͨݫີͳεʔύʔηοτͱͳͬ ͍ͯΔɻ” - Wikipedia

10. TypeScript ͱ͸ “TypeScript ͸ϚΠΫϩιϑτʹΑͬͯ։ൃ͞Εɺϝϯςφϯε ͞Ε͍ͯΔϑϦʔͰΦʔϓϯιʔεͷϓϩάϥϛϯάݴޠͰ͋Δɻ TypeScript͸JavaScriptʹରͯ͠ɺলུ΋Մೳͳ੩తܕ෇͚ͱΫ ϥεϕʔεΦϒδΣΫτࢦ޲ΛՃ͑ͨݫີͳεʔύʔηοτͱͳͬ ͍ͯΔɻ” - Wikipedia

11. TypeScript ͱ͸ let t: [string, number] = ['Jan', 1] enum

    Color { Red, Green, Blue } const c: Color = Color.Green interface Food { name: string calories: number } class Menu { items: string[] pages: number constructor(items: string[], pages: number) { this.items = items this.pages = pages } }

12. Nuxt.js ͷ TypeScript ରԠঢ়گ

13. Template

14. Packages • nuxt-property-decorator: vue-class- component ͷϥούʔ • vuex-class: vuex ؔ࿈ͷܕఆٛ

    • axios: ඇಉظHTTP௨৴

15. Nuxt.js Λ TypeScript Ͱಈ͔ͯ͠ΈΔ

16. υϝΠϯͷܕͱ RootState ͷఆٛ 
 export interface Task { title: string;

    status: TaskStatus; } export enum TaskStatus { Open = 'open', Doing = 'doing', Closed = 'closed', } 
 export interface RootState { tasks: Task[]; }

17. Vue, Decorator ͷ import 
 <script lang="ts"> import { Vue,

    Component, Prop } from 'nuxt-property-decorator' @Component({}) export default class extends Vue { @Prop() value: Task }

18. Store ͷ࣮૷ export const state = (): RootState => ({

    tasks: [], }) export const mutations: MutationTree<RootState> = { setTasks(state: RootState, tasks: Task[]): void { state.tasks = tasks }, addTask(state: RootState, task: Task): void { state.tasks.push({...task}) }, }
 
 export const actions: ActionTree<RootState, RootState> = { async fetchTasks({ commit }) { const tasks: Task[] = await api.fetchTasks() commit("setTasks", tasks) } }