Nuxt.js in TypeScript

Transcript

1. 1.

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

2. 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. 3.

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

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

   Nuxt.js, TypeScript ͷ঺հ

5. 5.

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

   ͸͡Ίʹ - Nuxt.js
6. 6.

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

   ͸͡Ίʹ - Nuxt.js
7. 7.

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

   ͸͡Ίʹ - Nuxt.js
8. 8.

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

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

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

10. 10.

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

11. 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. 12.

    Nuxt.js ͷ TypeScript ରԠঢ়گ

13. 13.

    Template

14. 14.

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

    • axios: ඇಉظHTTP௨৴
15. 15.

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

16. 16.

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

    status: TaskStatus; } export enum TaskStatus { Open = 'open', Doing = 'doing', Closed = 'closed', } 
 export interface RootState { tasks: Task[]; }
17. 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. 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) } }