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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

自己紹介 • தౡ ⁜ • ΦϯϘʔσΟϯάվળʢ௨শϩεΠϯΰʣ • Vue͸͍͍ͧ • RubyͱRails͸ʹΘ͔ • ࣾ಺LTొஃ3ճ࿈ଓୡ੒ʂ

Slide 4

Slide 4 text

Nuxt ͷ fetch = Vue Router ͷ beforeRoute() ʁ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

޲͔Θͳ͔ͬͨʂ

Slide 7

Slide 7 text

ͦͷલʹNuxtͬͯͳΜͩΑ

Slide 8

Slide 8 text

おいでよNuxtの森

Slide 9

Slide 9 text

Nuxtとは • ࡶʹ͍͏ͱRubyʹ͓͚ΔRuby on Railsɺ Vueʹ͓͚ΔϨʔϧͬΆ͍΋ͷ • VueͱVue RouterͱVuexͱSSRͱSSGΛ ͍͍ײ͡ʹ͚ͬͭͯ͘Ұݸʹͨ͠΍ͭ • ϑϨʔϜϫʔΫʢVue΋ϑϨʔϜϫʔΫͰ͸ʁ͍΍͍΍…

Slide 10

Slide 10 text

3ͭͷϞʔυ SSR, SSG, SPA

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

SPAモードもあるよ • γϯάϧϖʔδΞϓϦέʔγϣϯ • SSR΋SSG΋͍Βͳ͍Αʂͬͯਓ͸SPAϞʔυͰΑ͍ • ී௨ʹVueΛ࢖͏ͷͱҰॹ • αʔόʔαΠυͷੈքʹย଍ಥͬࠐ·ͳ͍͍ͯ͘ͷͰγϯϓϧ • Ϗϧυͨ͠ϑΝΠϧΛS3ͱ͔ʹ্͛ͪΌ͏ײ͡ • OGPʁALBͰUA൑அͯ͠OGP༻ͷαʔόʔʹඈ͹ͦ͏ͥ

Slide 14

Slide 14 text

Nuxt͍͍ͱ͜Ζ

Slide 15

Slide 15 text

統合されたVue Routerが神 • Router༻ͷϑΝΠϧͳΜͯ΋͏͍Βͳ͍ʂ • pagesσΟϨΫτϦʹϑΝΠϧΛஔ͘ͱ ࣗಈతʹύεղऍͯ͘͠Ε·͢ʂ • ม਺ʹ͍ͨ͠ύε͸ϑΝΠϧ໊ʢσΟϨΫτϦ໊ʣΛ _ Ͱ࢝ΊΔͱύϥϝʔλͱͯ͠ $route.params ʹೖΔ

Slide 16

Slide 16 text

→ thread/123/25 → thread/12/all → /user/30 → /user/myself → /hello ϧʔςΟϯάͷྫ

Slide 17

Slide 17 text

組み込みのLayouts機構 • Layouts σΟϨΫτϦʹஔ͘ίϯϙʔωϯτ • Pages ίϯϙʔωϯτݶఆͰϨΠΞ΢τΛࢦఆͰ͖Δ • ϔομʔͱαΠυόʔͱϝΠϯίϯςϯπɺΈ͍ͨͳ • ΍ͬͯΔ͜ͱ͸SlotΈ͍ͨͳײ͚ͩ͡Ͳݟ௨͕͠Α͍ • Vue RouterͱίϯϙʔωϯτΛຐվ଄ͨ͠ײ͢͡Δ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

増えるライフサイクルフック • fetch • SSRʢ·ͨ͸ϖʔδදࣔલʣʹ࣮ߦ͞ΕΔϝιου • SPAϞʔυͳΒৗʹϖʔδදࣔલʹ࣮ߦͯ͘͠Εͯศར • validate • falseͩͱΤϥʔϖʔδʹભҠ͢Δϝιου • middleware, pluginͳͲͳͲ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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