Slide 1
Slide 1 text
/695+4ͷ
৭ʑͳڞ௨ԽΛࢼͯ͠Έͨ
2019/10/21
ϊΠϯגࣜձࣾ
Toshiyuki Ihara
@tossy_yukky
Slide 2
Slide 2 text
DPOTUQSPpMF\
OBNFb5PTIJZVLJ*IBSB`
BDDPVOUb!UPTTZ@ZVLLZ`
DPNQBOZbϊΠϯגࣜձࣾ`
KPCbαʔόαΠυʹগ͠ͷΠϯϑϥͱগ͠ͷϑϩϯτΤϯυ`
MPWF
^
Profile
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Agenda
ͳΜͰ͜ͷςʔϚʹͨ͠ͷ͔
Export/Import
Mixin
Plugin
Middleware
Slide 5
Slide 5 text
લఏ
NuxtJS Ver 2.10.x
Express 4.x
Slide 6
Slide 6 text
ͳΜͰ͜ͷςʔϚʹͨ͠ͷ͔
ڈɺผͷҊ݅ͰVue.jsΛॳΊͯ৮͍ͬͯͨ࣌ɺɺɺ
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
ͳΜͰ͜ͷςʔϚʹͨ͠ͷ͔
͍ͭઌɺಉ͡Α͏ʹMixinͰ͍ͬͯͨͱ͜Ζɺ
Slide 9
Slide 9 text
Μʁ͜Εͬͯຊʹίϯϙʔωϯτ͕
͍͍࣋ͬͯͨػೳͳΜ͚ͩͬɾɾɾʁ
Slide 10
Slide 10 text
ͳΜͰ͜ͷςʔϚʹͨ͠ͷ͔
վΊͯௐͯΈͨ
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
ͬͺͪΌΜͱௐΑ͏ʂʂ
Slide 14
Slide 14 text
Export/Import
ී௨ʹJSϞδϡʔϧΛexport and import
Slide 15
Slide 15 text
Export/Import
ϝϦοτ
͍͜͠ͱΛߟ͑ͣʹ͑Δɻ
σϝϦοτ
ྑ͘ѱ͘ຊʹͨͩͷJSϞδϡʔϧͳͷͰɺಛผͳ͜ͱͰ͖ͳ͍ɻ
͍Ͳ͜Ζ
NuxtJSɺVue.jsͳͲʹґଘ͠ͳ͍୯७ͳػೳͷڞ௨Խɻ
Slide 16
Slide 16 text
Export/Import
class Animal {
constructor(greeting) {
this.greeting = greeting;
}
say() {
return this.greeting;
}
}
export default Animal;
lib/Animal.js
Slide 17
Slide 17 text
Export/Import
{{say()}}
import Animal from ‘@/lib/Animal’
export default {
…
methods: {
say() {
return new Animal(‘meow meow’).say()
}
}
}
page/say.vue
Slide 18
Slide 18 text
Mixin
VueίϯϙʔωϯτΛ֦ு͢Δ(ެࣜͰ “Ϛʔδ” ͱݺ
শʣɻ
ͷͰɺϛοΫεΠϯͷద༻ઌίϯϙʔωϯτʹରͯ͠ɺ֤
छϓϩύςΟʢdata, methodsͳͲͳͲʣ͕ॾʑ·Δͬͱ
“Ϛʔδ” ͞ΕΔɻ
Slide 19
Slide 19 text
Mixin
ϝϦοτ
ෳίϯϙʔωϯτͰಉ͡Α͏ͳػೳΛఏڙ͍ͨ͠߹ͳͲʹ༗ޮɻ
άϩʔόϧͳద༻Ͱ͖ΔͷͰɺશίϯϙʔωϯτͰಉ͡ػೳΛఏڙ͍ͨ͠߹ͰରԠՄೳɻ
σϝϦοτ
͍ํΛߟ͑ͳ͍ͱɺʮ୯७ͳڞ௨ͷؔʯΛద༻͍͚ͤͨͩ͞ͳͷʹɺ͍͍ͪͪVueίϯϙʔ
ωϯτͦͷͷ͕֦ு͞ΕΔ͜ͱʹͳͬͯ͠·͏ɻ
ίϯϙʔωϯτʹউखʹϝιου͕ੜ͑ΔʢΑ͏ʹݟ͑ΔʣͷͰɺॳݟͩͱͭΒ͍͔ɻ
͍Ͳ͜Ζ
ίϯϙʔωϯτͷػೳͱͯ͠ڞ௨Խ͍ͨ͠ͷ͕͋Δ߹ɻ
Slide 20
Slide 20 text
Mixin
export default {
methods: {
show() {
alert(‘popup!’);
}
}
}
mixins/popup.js
Slide 21
Slide 21 text
Mixin
Show Popup
import Popup from ‘@/mixins/popup’
export default {
…
mixins: [Popup],
…
}
page/use_mixin.vue
Slide 22
Slide 22 text
Plugin
NuxtJSΞϓϦέʔγϣϯʹରͯ͠ػೳΛ֦ு͢Δ
VueΠϯελϯεɺίϯςΩετɺ྆ํͳͲɺػೳͷೖઌ
Λબ͢Δ͜ͱ͕Ͱ͖Δ
ೖͨ͠ઌͰͲ͔͜ΒͰػೳΛࢀর͢Δ͜ͱ͕Ͱ͖Δ
Slide 23
Slide 23 text
Plugin
ϝϦοτ
ҰՕॴͰઃఆ͑ͯ͞͠͠·͑ΞϓϦέʔγϣϯͷͲ͔͜ΒͰࢀরͰ͖Δ
σϝϦοτ
෦ద༻Ͱ͖ͳ͍ͷͰɺ͋·Γʹେ͖ͳϓϥάΠϯΛ࡞ͬͯ͠·͏ͱϏϧ
υ͞Εͨapp.jsͷංେԽ͕ݒ೦
͍Ͳ͜Ζ
ΞϓϦέʔγϣϯશମͰ͏Α͏ͳେنͳڞ௨ॲཧɻ
Slide 24
Slide 24 text
Plugin
class I18n {
t(key) {…}
}
export default ({ app }, inject) => {
const i18n = new i18n();
// ίϯςΩετʹಥͬࠐΉ߹
app.i18n = i18n;
// Ͳ͔͜ΒͰ͍͍ͨ߹
inject(‘i18n’, i18n);
}
plugins/i18n.js
Slide 25
Slide 25 text
Plugin
plugins: [
…
‘~plugins/i18n.js’,
…
],
nuxt.config.js
Slide 26
Slide 26 text
Plugin
page/use_sample.vue
{{$i18n.t(‘text.key’)}}
export default {
…
methods: {
getText() {
return this.$i18n.t(‘text.key’);
}
}
}
Slide 27
Slide 27 text
Middleware
ڞ௨Խͱ͍͏ΑΓʮը໘ͷϨϯμϦϯάલʹ࣮ߦ͞ΕΔ
ػೳʯΛఆٛͰ͖Δɻ
routerͰઃఆ͢ΕશମʹɺͦΕͧΕͷϨΠΞτϖʔ
δίϯϙʔωϯτͰઃఆ͢ΕݸผʹఆٛՄೳɻ
࣮ߦॱɺઃఆൣғͷ͍ॱɺrouter > layout > page ͷॱɻ
Slide 28
Slide 28 text
Middleware
ϝϦοτ
ೝূͳͲɺ֤ը໘Ͱ࣮ߦͱ͍͏ΑΓৗ࣌ભҠ࣌ʹ࣮ߦ͍ͤͨ͞ͷͳͲΛఆٛͯ͠
͓͘͜ͱ͕Ͱ͖Δɻ
σϝϦοτ
ίϯϙʔωϯτͷϥΠϑαΠΫϧ͕࢝·ΔલͳͷͰɺͪΖΜίϯϙʔωϯτͷthis
͑ͳ͍ɻ
͍Ͳ͜Ζ
͍Ζ͍Ζͳը໘Ͱɺදࣔલʹಉ͡Α͏ʹνΣοΫ͓͖͍߲͕ͯͨ͋͠Δ߹ͳͲɻ
Slide 29
Slide 29 text
Middleware
export default ({ store, redirect }) => {
if (!store.state.isLoggedIn) {
redirect(‘/login’);
}
}
middleware/auth.js
Slide 30
Slide 30 text
Middleware
// routing͕มΘΔͨͼʹ࣮ߦ͞ΕΔ
router: {
middleware: ['auth'],
},
nuxt.config.js
Slide 31
Slide 31 text
Middleware
// ͜ͷϖʔδͰ͚ͩmiddleware͕࣮ߦ͞ΕΔ
export default {
…
middleware: ‘auth’,
…
}
page/use_middleware.vue
Slide 32
Slide 32 text
·ͱΊ
NuxtJSʹ͓͍ͯɺॲཧͷڞ௨Խखஈ͕৭ʑ͋Δɻ
ͦΕͧΕϝϦσϝɺ͍ಓ͕ͪΌΜͱ͋ΔͷͰɺڞ௨Խ͠
͍ͨॲཧͲ͜Ͱߦ͍͍ͨॲཧͳͷ͔ʹΑͬͯํ๏Λ͍
͚͍ͯ͘ඞཁ͕͋Δɻ
Slide 33
Slide 33 text
Masashi Ogawa
Yuki Terashima
Reishi Narisada
Yuka Nozaki
Takuya Kato
Special Thanks!
Slide 34
Slide 34 text
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
Slide 35
Slide 35 text
ϊΠϯגࣜձࣾͰɺ
• NuxtJSɺVue.jsɺͦͷଞϑϩϯτΤϯυ͕ͬͭ
ΓΓ͍ͨํΛืूͯ͠·͢ʂ
• UI/UXҰॹʹߟ͍͖͍͑ͯͨͰ͢ʂ
• https://noin.tv
We're Hiring!!