Slide 1
Slide 1 text
Nuxt.js in TypeScript
ͬͯΈͨ
nunulk
ΒΒͼΎ͏ʮͬͯΈͨʯറΓͷLTେձ
Slide 2
Slide 2 text
ࣗݾհ
const name: Name = 'nunulk(͵͵Δ͘)'
let job: Job = 'ϑϦʔϥϯεͷΣϒΞϓϦέʔγϣϯΤϯδχΞ'
let languages: Language[] = [
'C/C++', ‘Java', 'PHP', ‘JavaScript', ‘TypeScript’,
]
let frameworks: Framework[] = [
'CodeIgniter', 'Symfony', 'CakePHP', ‘Laravel',
]
Slide 3
Slide 3 text
ຊ͢͜ͱ
• Nuxt.js ͱ TypeScript ͷհ
• Nuxt.js ͷ TypeScript ରԠঢ়گ
• Nuxt.js Λ TypeScript Ͱಈ͔ͯ͠ΈΔ
Slide 4
Slide 4 text
Nuxt.js, TypeScript ͷհ
Slide 5
Slide 5 text
Nuxt.js ͱ
“Nuxt.js Vue ΞϓϦέʔγϣϯΛ࡞͢ΔϑϨʔϜϫʔ
ΫͰ͢ɻϢχόʔαϧΞϓϦέʔγϣϯɺ੩తʹੜ͞Ε
ΔΞϓϦέʔγϣϯɺγϯάϧϖʔδΞϓϦέʔγϣϯͷ
த͔Β࡞͢ΔΞϓϦέʔγϣϯΛબͿ͜ͱ͕Ͱ͖·͢ɻ”
- ͡Ίʹ - Nuxt.js
Slide 6
Slide 6 text
Nuxt.js ͱ
“Nuxt.js Vue ΞϓϦέʔγϣϯΛ࡞͢ΔϑϨʔϜϫʔ
ΫͰ͢ɻϢχόʔαϧΞϓϦέʔγϣϯɺ੩తʹੜ͞Ε
ΔΞϓϦέʔγϣϯɺγϯάϧϖʔδΞϓϦέʔγϣϯͷ
த͔Β࡞͢ΔΞϓϦέʔγϣϯΛબͿ͜ͱ͕Ͱ͖·͢ɻ”
- ͡Ίʹ - Nuxt.js
Slide 7
Slide 7 text
Nuxt.js ͱ
“Nuxt.js Vue ΞϓϦέʔγϣϯΛ࡞͢ΔϑϨʔϜϫʔ
ΫͰ͢ɻϢχόʔαϧΞϓϦέʔγϣϯɺ੩తʹੜ͞Ε
ΔΞϓϦέʔγϣϯɺγϯάϧϖʔδΞϓϦέʔγϣϯͷ
த͔Β࡞͢ΔΞϓϦέʔγϣϯΛબͿ͜ͱ͕Ͱ͖·͢ɻ”
- ͡Ίʹ - Nuxt.js
Slide 8
Slide 8 text
Nuxt.js ͱ
• vue, vuex, vue-router, vue-server-renderer,
vue-meta શ෦ೖΓ
• ϧʔςΟϯάͷࣗಈԽɺmiddleware
• Vue ίϯϙʔωϯτͱ Vuex Store ͷ࣮ʹઐ೦
Ͱ͖Δ
Slide 9
Slide 9 text
TypeScript ͱ
“TypeScript ϚΠΫϩιϑτʹΑͬͯ։ൃ͞Εɺϝϯςφϯε
͞Ε͍ͯΔϑϦʔͰΦʔϓϯιʔεͷϓϩάϥϛϯάݴޠͰ͋Δɻ
TypeScriptJavaScriptʹରͯ͠ɺলུՄೳͳ੩తܕ͚ͱΫ
ϥεϕʔεΦϒδΣΫτࢦΛՃ͑ͨݫີͳεʔύʔηοτͱͳͬ
͍ͯΔɻ”
- Wikipedia
Slide 10
Slide 10 text
TypeScript ͱ
“TypeScript ϚΠΫϩιϑτʹΑͬͯ։ൃ͞Εɺϝϯςφϯε
͞Ε͍ͯΔϑϦʔͰΦʔϓϯιʔεͷϓϩάϥϛϯάݴޠͰ͋Δɻ
TypeScriptJavaScriptʹରͯ͠ɺলུՄೳͳ੩తܕ͚ͱΫ
ϥεϕʔεΦϒδΣΫτࢦΛՃ͑ͨݫີͳεʔύʔηοτͱͳͬ
͍ͯΔɻ”
- Wikipedia
Slide 11
Slide 11 text
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
}
}
Slide 12
Slide 12 text
Nuxt.js ͷ TypeScript ରԠঢ়گ
Slide 13
Slide 13 text
Template
Slide 14
Slide 14 text
Packages
• nuxt-property-decorator: vue-class-
component ͷϥούʔ
• vuex-class: vuex ؔ࿈ͷܕఆٛ
• axios: ඇಉظHTTP௨৴
Slide 15
Slide 15 text
Nuxt.js Λ TypeScript Ͱಈ͔ͯ͠ΈΔ
Slide 16
Slide 16 text
υϝΠϯͷܕͱ
RootState ͷఆٛ
export interface Task {
title: string;
status: TaskStatus;
}
export enum TaskStatus {
Open = 'open',
Doing = 'doing',
Closed = 'closed',
}
export interface RootState {
tasks: Task[];
}
Slide 17
Slide 17 text
Vue, Decorator ͷ import
import {
Vue,
Component,
Prop } from 'nuxt-property-decorator'
@Component({})
export default class extends Vue {
@Prop() value: Task
}
Slide 18
Slide 18 text
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)
}
}