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

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 • ࢲͱ͔෼͔ΔൣғͰ౴͑ΔͷͰ ݸਓͱ͔Ͱؾܰʹ௅ઓͯ͠Έͯʂ