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