Tweet
Tweet

Slide 1

Slide 1 text

KOSUKE OGAWA 2020 WebφΠτٶ࡚ Nuxt.js ͰඇಉظͳσʔλΛऔಘ ͢Δ ͱ͖ͷϙΠϯτ

Slide 2

Slide 2 text

ࣗݾ঺հ w 0HBXB,PTVLFʢ!LPPHBXBʣ w Ξϧגࣜձࣾʢ౦ژʣ w ٶ࡚͔ΒϑϧϦϞʔτ w J04 4XJGU "OESPJE ,PUMJO 5ZQF4DSJQU $44 7VFKT /VYUKTͳͲ w ͯ͛΄͛ॴଐ

Slide 3

Slide 3 text

͜ΜͳαΠτΛߟ͑ͯΈΔ

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

• asyncData - ϨϯμϦϯά͞ΕΔલʹ֎෦API͔Βͷσʔλ Λऔಘ͢Δ • mounted - ϨϯμϦϯά͞Εͨ௚ޙʹݺ͹ΕΔ Nuxt.js ϥΠϑαΠΫϧ

Slide 6

Slide 6 text

࣮ݧ1ɿ 3ඵɺ2ඵɺ5ඵ͔͔Δ ॲཧΛ͢΂ͯ asyncData ʹॻ͍ͨ৔߹ɻ

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

• asyncData - ϨϯμϦϯά͞ΕΔલʹ֎෦API͔Βͷσʔλ Λऔಘ͢Δ • mounted - ϨϯμϦϯά͞Εͨ௚ޙʹݺ͹ΕΔ Nuxt.js ϥΠϑαΠΫϧ

Slide 9

Slide 9 text

࣮ݧ2ɿ 3ඵ͔͔ΔॲཧΛ asyncData ʹɺ 2ඵɺ5ඵ͔͔ΔॲཧΛ mounted ʹॻ͍ͨ৔߹ɻ

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

• asyncData - ϨϯμϦϯά͞ΕΔલʹ֎෦API͔Βͷσʔλ Λऔಘ͢Δ • mounted - ϨϯμϦϯά͞Εͨ௚ޙʹݺ͹ΕΔ Nuxt.js ϥΠϑαΠΫϧ

Slide 12

Slide 12 text

࣮ݧ3ɿ 3ඵ͔͔ΔॲཧΛ asyncData ʹɺ 2ඵɺ5ඵ͔͔ΔॲཧΛฒྻʹ ͯ͠ mounted ʹॻ͍ͨ৔߹ɻ

Slide 13

Slide 13 text

Promise.all Ͱฒྻॲཧ

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

࣮ݧ4ɿ 3ඵɺ2ඵɺ5ඵ͔͔Δॲ ཧΛ͢΂ͯฒྻͰ asyncData ʹॻ͍ͨ৔ ߹ɻ

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

ͲΕ͕Ұ൪ྑ͍ʁ • αΠτͷཁٻ࢓༷ʹΑΔ • 3ඵ͔͔Δॲཧ݁Ռ͚ͩઌʹදࣔͯ͠ɺ࢒Γ͸ޙճ͠Ͱ΋ྑ͚Ε͹ʮ࣮ݧ2ʯ͔ʮ࣮ݧ3ʯ • 5ඵ͔͔ͬͯ΋ྑ͍ͷͰɺը໘ભҠͨ͠ஈ֊Ͱ͢΂ͯͷ৘ใΛද͓͖͍ࣔͯͨ͠ͳΒʮ࣮ݧ4ʯ

Slide 18

Slide 18 text

• ͜ͷ··ͩͱSEOతʹ͋·Γྑ͘ͳ͍͔΋͠Εͳ͍ʂʁ • ࣮ݧ2΍3ͷέʔεͰ͸ɺը໘Λදࣔͨ࣌͠఺Ͱදࣔ͢΂͖σʔλ͕׬શʹऔಘͰ͖͍ͯͳ͍͔Β • SEOରࡦΛߟྀ͢ΔͳΒ5ඵ͔͔Δ͚Ͳɺ࠷ॳʹશ෦දࣔͰ͖͍ͯΔ࣮ݧ4 ͕Ұ൪ྑ͍ʁ • ࣮͸࣮ݧ 2or3 ͱ 4Λྑ͍ײ͡ʹ੾Γସ͑ΒΕΔํ๏͕͋Δ ͓·͚ɿSEOରࡦ

Slide 19

Slide 19 text

※ଓ͖͸ ٶ࡚ITؔ࿈ษڧձ Slack Ͱ

Slide 20

Slide 20 text

͋Γ͕ͱ͏͍͟͝·ͨ͠