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

Transcript

1. 1.

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

2. 2.

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

3. 3.

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

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

   Nuxt ͷ fetch = Vue Router ͷ beforeRoute() ʁ

5. 5.

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

6. 6.

   ޲͔Θͳ͔ͬͨʂ

7. 7.

   ͦͷલʹNuxtͬͯͳΜͩΑ

8. 8.

   おいでよNuxtの森

9. 9.

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

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

    3ͭͷϞʔυ SSR, SSG, SPA

11. 11.

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

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

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

13. 13.

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

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

    Nuxt͍͍ͱ͜Ζ

15. 15.

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

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

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

    ϧʔςΟϯάͷྫ
17. 17.

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

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

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

19. 19.

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

20. 20.

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

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

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

22. 22.

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