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

978df318d7577c0a98d90946a7ec3c86?s=47 tossyyukky
October 21, 2019

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

978df318d7577c0a98d90946a7ec3c86?s=128

tossyyukky

October 21, 2019
Tweet

Transcript

  1. /695+4ͷ ৭ʑͳڞ௨ԽΛࢼͯ͠Έͨ࿩ 2019/10/21 ϊΠϯגࣜձࣾ Toshiyuki Ihara @tossy_yukky

  2. DPOTUQSPpMF\ OBNFb5PTIJZVLJ*IBSB`  BDDPVOUb!UPTTZ@ZVLLZ`  DPNQBOZbϊΠϯגࣜձࣾ`  KPCbαʔόαΠυʹগ͠ͷΠϯϑϥͱগ͠ͷϑϩϯτΤϯυ`  MPWF<bKBWBTDSJQU`

    b"84` b៉ྷͳίʔυ` b៉ྷͳ6*69` b࠷ۙͪΐͬͱ&MJYJS`>  ^ Profile
  3. None
  4. Agenda ͳΜͰ͜ͷςʔϚʹͨ͠ͷ͔ Export/Import Mixin Plugin Middleware

  5. લఏ NuxtJS Ver 2.10.x Express 4.x

  6. ͳΜͰ͜ͷςʔϚʹͨ͠ͷ͔ ڈ೥ɺผͷҊ݅ͰVue.jsΛॳΊͯ৮͍ͬͯͨ࣌͸ɺɺɺ

  7. None
  8. ͳΜͰ͜ͷςʔϚʹͨ͠ͷ͔ ͍ͭઌ೔ɺಉ͡Α͏ʹMixinͰ΍͍ͬͯͨͱ͜Ζɺ

  9. Μʁ͜Εͬͯຊ౰ʹίϯϙʔωϯτ͕ ͍͍࣋ͬͯͨػೳͳΜ͚ͩͬɾɾɾʁ

  10. ͳΜͰ͜ͷςʔϚʹͨ͠ͷ͔ վΊͯௐ΂ͯΈͨ

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