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