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

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

Nuxtもいいぞ

69b4dadef85efe143ac825b62d36ed7c?s=128

果物リン

May 20, 2020
Tweet

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