[社内LT]おいでよNuxtの森/Wellcome to Nuxt

Transcript

1. おいでよNuxtの森 தౡ ⁜ גࣜձࣾελσΟετ 2020 5/20 Studist Lightning Talks #13

2. ΰϦΰϦͷϑϩϯτΤϯυWebτʔΫͰ͢ WebΤϯδχΞ͡Όͳ͍ਓ͸ΰϝϯω Important notice: ͋ͱ໨৽͍͠࿩୊͸ͳ͍ͷͰNuxtʹ͍ͭͯ஌ͬͯΔਓ͸εϧʔͰ͓̺

3. 自己紹介 • தౡ ⁜ • ΦϯϘʔσΟϯάվળʢ௨শϩεΠϯΰʣ • Vue͸͍͍ͧ • RubyͱRails͸ʹΘ͔

   • ࣾ಺LTొஃ3ճ࿈ଓୡ੒ʂ

4. Nuxt ͷ fetch = Vue Router ͷ beforeRoute() ʁ

5. ͦͷṖΛ͖͋Β͔ʹ͢΂͘ զʑ͸ΞϚκϯԞ஍΁޲͔…

6. ޲͔Θͳ͔ͬͨʂ

7. ͦͷલʹNuxtͬͯͳΜͩΑ

8. おいでよNuxtの森

9. Nuxtとは • ࡶʹ͍͏ͱRubyʹ͓͚ΔRuby on Railsɺ Vueʹ͓͚ΔϨʔϧͬΆ͍΋ͷ • VueͱVue RouterͱVuexͱSSRͱSSGΛ ͍͍ײ͡ʹ͚ͬͭͯ͘Ұݸʹͨ͠΍ͭ

   • ϑϨʔϜϫʔΫʢVue΋ϑϨʔϜϫʔΫͰ͸ʁ͍΍͍΍…

10. 3ͭͷϞʔυ SSR, SSG, SPA

11. SSRって何 • αʔόʔαΠυϨϯμϦϯάͷ͜ͱ • ΊͬͪΌϨΞͳϨΞϦςΟͰ͸ͳ͍ • ʮϞόΠϧ୺຤ͱ͔ϑΥʔεύϫʔ͕଍Γͳ͍ͷͰ ɹαʔόʔଆͰHTML࡞ͬͨ΄͏͕͍͍ͷͰ͸ʂʢ໊Ҋʯ • ޠΔͱͦΕ͚ͩͰ1ηογϣϯͰ͖ΔͷͰলུ

    • σϑΥϧτͰSSRʢUniversalϞʔυʣͳΜͩͳ͜Ε͕

12. SSGって何 • ੩త(ελςΟοΫ)αΠτδΣωϨʔτͷ͜ͱ • ఆٛΛݩʹશ෦ͷύε෼ͷίϯςϯπΛ ͦΕͧΕϑΝΠϧͱͯ͠ੜ੒͢ΔϞʔυ • ϒϩάͱ͔ʹ޲͍ͯΔ

13. SPAモードもあるよ • γϯάϧϖʔδΞϓϦέʔγϣϯ • SSR΋SSG΋͍Βͳ͍Αʂͬͯਓ͸SPAϞʔυͰΑ͍ • ී௨ʹVueΛ࢖͏ͷͱҰॹ • αʔόʔαΠυͷੈքʹย଍ಥͬࠐ·ͳ͍͍ͯ͘ͷͰγϯϓϧ •

    Ϗϧυͨ͠ϑΝΠϧΛS3ͱ͔ʹ্͛ͪΌ͏ײ͡ • OGPʁALBͰUA൑அͯ͠OGP༻ͷαʔόʔʹඈ͹ͦ͏ͥ

14. Nuxt͍͍ͱ͜Ζ

15. 統合されたVue Routerが神 • Router༻ͷϑΝΠϧͳΜͯ΋͏͍Βͳ͍ʂ • pagesσΟϨΫτϦʹϑΝΠϧΛஔ͘ͱ ࣗಈతʹύεղऍͯ͘͠Ε·͢ʂ • ม਺ʹ͍ͨ͠ύε͸ϑΝΠϧ໊ʢσΟϨΫτϦ໊ʣΛ _

    Ͱ࢝ΊΔͱύϥϝʔλͱͯ͠ $route.params ʹೖΔ

16. → thread/123/25 → thread/12/all → /user/30 → /user/myself → /hello

    ϧʔςΟϯάͷྫ

17. 組み込みのLayouts機構 • Layouts σΟϨΫτϦʹஔ͘ίϯϙʔωϯτ • Pages ίϯϙʔωϯτݶఆͰϨΠΞ΢τΛࢦఆͰ͖Δ • ϔομʔͱαΠυόʔͱϝΠϯίϯςϯπɺΈ͍ͨͳ •

    ΍ͬͯΔ͜ͱ͸SlotΈ͍ͨͳײ͚ͩ͡Ͳݟ௨͕͠Α͍ • Vue RouterͱίϯϙʔωϯτΛຐվ଄ͨ͠ײ͢͡Δ

18. Vuexがちょっとすごい • ϑΝΠϧΛஔ͚ͩ͘Ͱ ʮ໊લۭؒ෇͖Ϟδϡʔϧʯͱͯ͠Πϯϙʔτͯ͘͠ΕΔ • ͜ͷ͏Ε͠Έ͸໘౗͕ͳ͍ఔ౓ • ͋ͱSSRॳճͷΈઈରಡΈࠐ·ΕΔActionͱ͔͋Δ • SSRதͷ࣮ߦ݁ՌΛΫϥΠΞϯτʹ͖࣋ͬͯͯ͘ΕΔ

19. ·͋SSR͠ͳ͍ͳΒޡ͔ࠩͳ

20. 増えるライフサイクルフック • fetch • SSRʢ·ͨ͸ϖʔδදࣔલʣʹ࣮ߦ͞ΕΔϝιου • SPAϞʔυͳΒৗʹϖʔδදࣔલʹ࣮ߦͯ͘͠Εͯศར • validate •

    falseͩͱΤϥʔϖʔδʹભҠ͢Δϝιου • middleware, pluginͳͲͳͲ

21. 気になる学習曲線は？ • Nuxtͷ஌ݟ͕͋Δਓ͕ۙ͘ʹ͍ΔͳΒΑ͍νϣΠεͰ͸ʁ • SPAϞʔυͳΒ೰Ήͱ͜Ζ͕গͳͯ͘Α͍ͷͰ͸ • SSRϞʔυͷຊ൪ӡ༻͸ࣄલ४උ͕͔ͬ͠Γඞཁ • VueॳݟͰNuxt௅ઓ͸ɺVueͷ໰୊ͳͷ͔Nuxtͷ໰୊ͳͷ͔ ੾Γ෼͚ʹ೰Ήͱࢥ͏ͷͰݸਓతʹ͸͋·ΓΦεεϝ͠ͳ͍

22. まとめ • VueΛ͍͍ײ͡ʹϨʔϧʹͷͤΔͷ͕Nuxt • ࢲͱ͔෼͔ΔൣғͰ౴͑ΔͷͰ ݸਓͱ͔Ͱؾܰʹ௅ઓͯ͠Έͯʂ