NuxtJSの色々な共通化を試してみた話

Transcript

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