Nuxt.js in TypeScript

やってみた

Transcript

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

   View Slide

2. ࣗݾ঺հ
   

   const name: Name = 'nunulk(͵͵Δ͘)'
   let job: Job = 'ϑϦʔϥϯεͷ΢ΣϒΞϓϦέʔγϣϯΤϯδχΞ'
   let languages: Language[] = [

   'C/C++', ‘Java', 'PHP', ‘JavaScript', ‘TypeScript’,

   ]
   let frameworks: Framework[] = [

   'CodeIgniter', 'Symfony', 'CakePHP', ‘Laravel',
   ]
   

   View Slide

3. ຊ೔࿩͢͜ͱ
   • Nuxt.js ͱ TypeScript ͷ঺հ
   • Nuxt.js ͷ TypeScript ରԠঢ়گ
   • Nuxt.js Λ TypeScript Ͱಈ͔ͯ͠ΈΔ
   

   View Slide

4. Nuxt.js, TypeScript ͷ঺հ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. Nuxt.js ͱ͸
   • vue, vuex, vue-router, vue-server-renderer,
   vue-meta શ෦ೖΓ
   • ϧʔςΟϯάͷࣗಈԽɺmiddleware
   • Vue ίϯϙʔωϯτͱ Vuex Store ͷ࣮૷ʹઐ೦
   Ͱ͖Δ
   

   View Slide

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

   View Slide

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

    View Slide

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
    }
    }
    

    View Slide

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

    View Slide

13. Template
    

    View Slide

14. Packages
    • nuxt-property-decorator: vue-class-
    component ͷϥούʔ
    • vuex-class: vuex ؔ࿈ͷܕఆٛ
    • axios: ඇಉظHTTP௨৴
    

    View Slide

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

    View Slide

16. υϝΠϯͷܕͱ
    RootState ͷఆٛ
    

    export interface Task {
    title: string;
    status: TaskStatus;
    }
    export enum TaskStatus {
    Open = 'open',
    Doing = 'doing',
    Closed = 'closed',
    }
    

    export interface RootState {
    tasks: Task[];
    }
    

    View Slide

17. Vue, Decorator ͷ import
    

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

    View Slide

18. Store ͷ࣮૷
    export const state = (): RootState => ({
    tasks: [],
    })
    export const mutations: MutationTree = {
    setTasks(state: RootState, tasks: Task[]): void {
    state.tasks = tasks
    },
    addTask(state: RootState, task: Task): void {
    state.tasks.push({...task})
    },
    }

    

    export const actions: ActionTree = {
    async fetchTasks({ commit }) {
    const tasks: Task[] = await api.fetchTasks()
    commit("setTasks", tasks)
    }
    }
    

    View Slide