State of SEO for SPA 2018

by seya

Slide 1

Slide 1 text

State of SEO for SPA @౦ژNodeֶԂ 2018/11/23

Slide 2

Slide 2 text

Kazuya Seki FRONTEND DEV @sekikazu01 @seya

Slide 3

Slide 3 text

͜Μͳܦݧͳ͍Ͱ͠ΐ͏͔ 41"͸4&0ʹzऑ͍zΒ͍͠  ͪΐͬͱௐࠪͯ͠ΈΑ͏ɻ

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

໿൒೥લͷࢲ

Slide 6

Slide 6 text

ຊ೔ͷ͓࿩ ࿩͢͜ͱ • SPAͷߏஙΛݕ౼͍ͯ͠Δ͜ͱΛલఏͱ͠ʮSEOͷ౔୆ͮ͘Γʯͷํ๏ʹ͍͓ͭͯ ࿩͠͠·͢ɻ ࿩͞ͳ͍͜ͱ • ϥϯΩϯάΛͲ͏্͍͔͛ͯ͘ͳͲ۩ମతͳSEOςΫχοΫʹ͍ͭͯ͸࿩͠·ͤΜ ·ͨɺલఏͱͯ͠ݕࡧΤϯδϯ͸ͷΈΛߟྀ͍ͯ͠·͢

Slide 7

Slide 7 text

Agenda l4&0zͱ͸ͳʹ͔ 1 41"ʹ͓͚Δ4&0ͷ՝୊ ͲΜͳղܾࡦ͕͋Δͷ͔ ཁٻύλʔϯ͝ͱͷղܾࡦͷબͼํ 2 3 4

Slide 8

Slide 8 text

“SEO”ͱ͸ͳʹ͔ 01.

Slide 9

Slide 9 text

SEO = Search Engine Optimization

Slide 10

Slide 10 text

ʮ4&0ͷ౔୆ʯͦ΋ͦ΋ͷ࿩ͱͯ͠(PPHMFCPUʹΠϯσοΫε͞ΕΔ͜ͱ ͦͷͨΊʹ͸࣍ͷ̎఺͕ඞཁ (PPHMFCPUʹΫϩʔϧ͞ΕΔ͜ͱ )5.-͕ద੾ʹղऍ͞ΕΔ͜ͱ

Slide 11

Slide 11 text

ʮ4&0ͷ౔୆ʯͦ΋ͦ΋ͷ࿩ͱͯ͠(PPHMFCPUʹΠϯσοΫε͞ΕΔ͜ͱ ͦͷͨΊʹ͸࣍ͷ̎఺͕ඞཁ (PPHMFCPUʹΫϩʔϧ͞ΕΔ͜ͱ )5.-͕ద੾ʹղऍ͞ΕΔ͜ͱ ˞͜Εʹ͍ͭͯ͸TJUFNBQͱ͔ؤுͬͯ ͘Εͬͯ࿩ͳͷͰࠓ೔͸৮Ε·ͤΜ

Slide 12

Slide 12 text

'BDFCPPL0(1 5XJUUFS$BSE 'BDFCPPLͷ0(1΍5XJUUFS$BSEͳͲ΋z4&0zͷจ຺ͰޠΒΕΔ͜ͱ͕͋Δ ࣮ࡍ͸શ͘΋ͬͯ4&0Ͱ͸ͳ͍ͷ͕ͩɺҰॹʹޠΒΕΔͷ͕౰ͨΓલͷੈͷதʹͳͬ ͯ͠·ͬͨͷͰຊτʔΫͰ͸߹Θͤͯड़΂Δɻ

Slide 13

Slide 13 text

ߏ଄Խσʔλ ݕࡧ݁ՌͰͷදࣔΛϦονʹͯ͘͠ΕΔ΋ͷ IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTHVJEFTTFBSDIHBMMFSZ

Slide 14

Slide 14 text

ߏ଄Խσʔλͷྫ ".1 “ಡΈࠐΈ͕΄΅ҰॠͰ׬ྃ͠εϜʔζʹදࣔ͞Ε Δັྗతͳ΢ΣϒϖʔδΛ؆୯ʹ࡞੒Ͱ͖ΔΦʔ ϓϯιʔε ϥΠϒϥϦ” - ߴ଎Խʹͱ͜ͱΜͩ͜Θͬͨ࢓༷ - ಠࣗͷJSΛ࣮ߦͰ͖ͳ͍ͳͲͷ੍໿͕͋Δ ࢀߟIUUQTXXXBNQQSPKFDUPSHKBEPDT

Slide 15

Slide 15 text

ߏ଄Խσʔλͷྫಈը IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTEBUBUZQFTWJEFP IMKB

Slide 16

Slide 16 text

·ͱΊ ʮ4&0ʯͱ͍͏ݴ༿͕࢖ΘΕΔ࣌ʹ͸࣍ͷೋͭͷจ຺͕͋Δ (PPHMFͷݕࡧ݁ՌͰΑΓ্Ґʹදࣔ͞ΕΔͨΊͷࢪࡦ 0(1΍5XJUUFS$BSEɺ".1ͳͲͷߏ଄Խσʔλͷදࣔ ˞ຊτʔΫͰ͸͜ΕҎ߱શ෦ͻͬ͘ΔΊͯʮϝλ৘ใʯͱݺͼ·͢ ஫ҰൠతͳݺͼํͰ͸ͳ͍Ͱ͢ ʮ4&0ͷ౔୆ʯΛ࡞ΔͨΊʹ͸࣍ͷ̎఺͕ඞཁ (PPHMFCPUʹΫϩʔϧ͞ΕΔ͜ͱ )5.-͕ద੾ʹղऍ͞ΕΔ͜ͱ

Slide 17

Slide 17 text

SPAʹ͓͚Δ SEOͷ՝୊ 02.

Slide 18

Slide 18 text

Α͘ڍ͛ΒΕΔ41"ͷ4&0ʹؔ͢Δݒ೦ w (PPHMFCPU͸+4Λ࣮ߦ͠ͳ͍ w (PPHMFCPU͸"KBYΛ࣮ߦͯ͘͠Εͳ͍଴ͬͯ͘Εͳ͍

Slide 19

Slide 19 text

Α͘ڍ͛ΒΕΔ41"ͷ4&0ʹؔ͢Δݒ೦ w (PPHMFCPU͸+4Λ࣮ߦ͠ͳ͍ w (PPHMFCPU͸"KBYΛ࣮ߦͯ͘͠Εͳ͍଴ͬͯ͘Εͳ͍ ἛͰ͢ɻ

Slide 20

Slide 20 text

ޡղ+4Λ࣮ߦͯ͘͠Εͳ͍

Slide 21

Slide 21 text

͕͔ͩ͠͠

Slide 22

Slide 22 text

՝୊(PPHMFͷݕࡧγεςϜͷϨϯμϦϯάΤϯ δϯ͸$ISPNF૬౰ͷػೳ͔͍࣋ͬͯ͠ͳ͍ IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTHVJEFTSFOEFSJOH ˞$ISPNF͸೥݄ࠒʹग़ͨϒϥ΢β

Slide 23

Slide 23 text

՝୊(PPHMFͷݕࡧγεςϜͷϨϯμϦϯάΤϯ δϯ͸$ISPNF૬౰ͷػೳ͔͍࣋ͬͯ͠ͳ͍ ༗໊Ͳ͜Ζͩͱ͜ͷล͕࢖͑ͳ͍ • Ξϩʔؔ਺ • ഑ྻͷؔ਺pOE JODMVEFTͳͲ • 3FTUQBSBNFUFST • 0CKFDUBTTJHO • *OUFSTFDUJPO0CTFSWFS IUUQTDBOJVTFDPNDPNQBSFDISPNF

Slide 24

Slide 24 text

՝୊(PPHMFͷݕࡧγεςϜͷϨϯμϦϯάΤϯ δϯ͸$ISPNF૬౰ͷػೳ͔͍࣋ͬͯ͠ͳ͍ ͦΕҎ֎ʹ΋௨ৗͷϒϥ΢βͱ͸ҧ͍ɺ੍͍͔ͭ͘໿͕͋Δ 8FC4PDLFUϓϩτίϧΛରԠ͍ͯ͠ͳ͍ ϢʔβͷಉҙΛඞཁͱ͢Δػೳ͸ࣗಈͰෆঝೝͱͳΔ ͳͷͰࣗ෼ͷαʔϏε͕ྫ֎ʹ֘౰͍ͯ͠ͳ͍͔͔ͬ͠ΓνΣοΫ͠·͠ΐ͏ IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTHVJEFTSFOEFSJOH

Slide 25

Slide 25 text

ޡղ"KBYΛ࣮ߦͯ͘͠Εͳ͍଴ͬͯ͘Εͳ͍

Slide 26

Slide 26 text

͕͔ͩ͠͠ ࢲ͸αϠࢣ೿Ͱ͢ɻ

Slide 27

Slide 27 text

՝୊λΠϜΞ΢τ ౰ͨΓલ͚ͩͲͣͬͱ଴ͬͯ͘ΕΔΘ͚Ͱ͸ͳ͍ ϦΫΤετʹ͕͔͔࣌ؒΓ͗͢Δͱͦ΋ͦ΋ΠϯσοΫεͯ͘͠Εͳ͔ͬͨΓ த్൒୺ͳͱ͜ΖͰϨϯμϦϯά͕ଧͪ੾ΒΕͯ͠·ͬͨΓ͢Δ

Slide 28

Slide 28 text

Կඵ·ͰͳΒ଴ͬͯ͘ΕΔͷ͔ʁ IUUQTNFEJVNDPN!MNVHOBJOJTQBBOETFPJTHPPHMFCPUBCMFUP SFOEFSBTJOHMFQBHFBQQMJDBUJPOGFBC ৄࡉʹݕূͯ͘͠Εͨํ͕͍ͨͷͰύΫΓ݁ՌΛ͓आΓ͠·͢ લఏ    &MNͰͰ͖ͨ41"αΠτ QVTI4UBUFͰϖʔδΛมߋ͍ͯ͠Δ

Slide 29

Slide 29 text

Կඵ·ͰͳΒ଴ͬͯ͘ΕΔͷ͔ʁ ݕূ಺༰ ҎԼͷ̏ύλʔϯΛΞοϓσʔτ͢Δ͜ͱʹΑͬͯλΠϜΞ΢τʹ͔͔Δ࣌ؒͷݕূ ࣌ؒͷදه UJUMF EFTDSJQUJPO ϖʔδ಺ͷςΩετ ຖඵมԽ 5ZQF" ඵͷEFMBZΛ࣋ͬͨϦΫΤετ 5ZQF# ඵͷEFMBZޙʹϦΫΤετ

Slide 30

Slide 30 text

Կඵ·ͰͳΒ଴ͬͯ͘ΕΔͷ͔ʁ ݕূͷ֬ೝํ๏ 'FUDIBT(PPHMFͱl/BUVSBMzͳ(PPHMFͷΠϯσοΫεͰ֬ೝ͢Δ

Slide 31

Slide 31 text

Կඵ·ͰͳΒ଴ͬͯ͘ΕΔͷ͔ʁ ݁Ռ 'FUDIBT(PPHMFͰ͸໿ඵ଴ͬͯ͘ΕΔ l/BUVSBMzͳ(PPHMFCPUͰ͸໿ඵ଴ͬͯ͘ΕΔ ˞ͪͳΈʹ౰વͷ͜ͱͳ͕Β(PPHMF͕ͲΜͳ؀ڥ ճઢ଎౓΍Ϛγϯύϫʔ ͰϨϯμ Ϧϯά͍ͯ͠Δͷ͔͸ෆ໌Ͱ͢ɻ

Slide 32

Slide 32 text

Կඵ·ͰͳΒ଴ͬͯ͘ΕΔͷ͔ʁ தͷਓͷ͓ݴ༿ˏ+BWB4DSJQU4JUFTJO4FBSDI8PSLJOH(SPVQ CZ+PIO.VFMMFS

Slide 33

Slide 33 text

ٙ໰λΠϜΞ΢τͨ͠ΒΠϯσοΫεͯ͘͠Εͳ͍ͷ͔ʁ ઌ΄Ͳͷݕূ͕͍ࣔͯ͠Δ௨ΓλΠϜΞ΢τͯ͠΋ɺͦΕ·ͰʹϨϯμϦϯάͨ͠΋ ͷʹؔͯ͠͸ΠϯσοΫε͞Ε͍ͯΔɻ ͓ͦΒ͘Ұ౓1BJOUʹࢸΔ·ͰʹλΠϜΞ΢τ΍Τϥʔ͕ى͖Δͷ͕෼ذ఺ͳͷͰ͸ɻ ˞ະݕূͷԾઆͰ͢ɻࢀߟఔ౓ʹཹΊ͍ͯͩ͘͞ɻ GSBNF

Slide 34

Slide 34 text

՝୊ϝλ৘ใ͸αʔό͔Βฦ࣌͢఺Ͱ)5.- ʹؚ·Ε͍ͯΔඞཁ͕͋Δ ͦ΋ͦ΋+4Λ࣮ߦͯ͘͠Εͳ͍ͷͰɺ  αʔό͔Βฦͬͯ͘Δ࣌఺Ͱ)5.-ʹؚ·Ε͍ͯͳ͍ͱղऍͯ͘͠Εͳ͍ ͪͳΈʹ".1ͩͱϝλ৘ใʹݶΒͣશͯαʔόଆͰඳը͢Δඞཁ͕͋Δ ❌

Slide 35

Slide 35 text

՝୊3FOEFS2VFVFʹΑΔΠϯσοΫεͷ஗Ԇ +4Λ࣮ߦ͢ΔαΠτ͸)5.-͚ͩͷ੩తͳαΠτͱ͸ҟͳΓɺ͙͢ʹΠϯσοΫε͞ΕΔ༁Ͱ͸ͳ͘ɺ Ұ౓3FOEFS2VFVFͱ͍͏΋ͷʹॲཧ͕Ҡৡ͞ΕΔ

Slide 36

Slide 36 text

IUUQTXXXZPVUVCFDPNXBUDI W:1U.#IZ6* ि͔͔ؒΔ͜ͱ΋ʂ ͳͷͰίϯςϯπͷߋ৽͕සൟͳαΠτͰ͸໰୊ʹͳΔ

Slide 37

Slide 37 text

ͪͳΈʹʜ͜ΕΒͷ՝୊ʹ ͸Ͳ͏ߟ͍͑ͯΔͷͰ͠ΐ͏͔ʁ

Slide 38

Slide 38 text

IUUQTXXXZPVUVCFDPNXBUDI W:1U.#IZ6*

Slide 39

Slide 39 text

ʮ$ISPNF૬౰ͷϨϯμϦϯάΤϯδϯʯͱ ʮ3FOEFS2VFVFʹΑΔΠϯσοΫεͷ஗Ԇʯ ʹؔͯ͠͸কདྷతʹղܾ͞Εͦ͏

Slide 40

Slide 40 text

·ͱΊ 41"Ͱ4&0ͷ౔୆Λ࡞ΔͨΊʹ͸࣍ͷ՝୊Λೝࣝ͢Δ (PPHMFѻ͏ϨϯμϦϯάΤϯδϯͷੑೳ͸$ISPNF૬౰ λΠϜΞ΢τʹΑΓ ͦ΋ͦ΋ΠϯσοΫε͞Εͳ͍ ෆ׬શͳ৘ใ͕ΠϯσοΫε͞Εͯ͠·͏ ϝλ৘ใ͸αʔόଆͰϨϯμϦϯά͢Δඞཁ͕͋Δ 3FOEFS2VFVFʹΑΔΠϯσοΫεͷ஗Ԇ

Slide 41

Slide 41 text

ͲΜͳղܾࡦ͕ ͋Δͷ͔ 03.

Slide 42

Slide 42 text

$ISPNFͰϨϯμϦϯάͰ͖ΔΑ͏ʹ͢Δ 5IBOLZPV ղܾ͍ͯ͠Δ՝୊+4͕(PPHMFʹΤϥʔͳ࣮͘ߦͰ͖ΔΑ͏ʹ͢Δ

Slide 43

Slide 43 text

$ISPNFͰϨϯμϦϯάͰ͖ΔΑ͏ʹ͢Δ ςετͷํ๏'FUDIBT(PPHMF https://www.google.com/webmasters/tools/googlebot-fetch?hl=JA ˝੍ݶ͕ͪΐͬͱ͚ͩݫ͍͠  ೔ճ·Ͱ ݱࡏ     ˝ݪҼෆ໌ͷΤϥʔͰ࢖͑ͳ͘ͳͬͨΓ͢Δ  άάͬͯ΋ղܾࡦ͕ʮ೔଴ͪ·͠ΐ͏ʯ 

Slide 44

Slide 44 text

$ISPNFͰϨϯμϦϯάͰ͖ΔΑ͏ʹ͢Δ ςετͷํ๏QVQQFUFFSͰΤϛϡϨʔτͰ͖Δ IUUQTXXXTV[VLJLFOJDIJDPNCMPHGPVSXBZTUPEFCVHHPPHMFCPUTSFOEFSJOH IUUQTHJUIVCDPN(PPHMF$ISPNF-BCTQVQQFUFFSFYBNQMFT

Slide 45

Slide 45 text

஫ҙ఺ • QPMZpMMΛ͔͚Δ͜ͱʹΑͬͯϑΝΠϧαΠζ͸๲ΒΈ·͢ɻ • ͜ΕʹΑΓλΠϜΞ΢τͷϦεΫ΋͍͘Β͔૿͑·͢ɻ

Slide 46

Slide 46 text

ϝλ৘ใ͚ͩ443 *OEFYIUNM ϒϥ΢β ϝλ৘ใͷ෦෼͚ͩ 63-ʹԠͯ͡ॻ͖׵͑ ϝλ৘ใ͑͞൓ө͞ΕΕ͹ʜͦΜͳϛχϚϜͳରԠΛ͍ͨ͋͠ͳͨʹɻ

Slide 47

Slide 47 text

%ZOBNJD3FOEFSJOH QSFSFOEFS IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTHVJEFTEZOBNJDSFOEFSJOH QSFSFOEFSJP SFOEFSUSPO

Slide 48

Slide 48 text

QSFSFOEFSJPͷྫ Prerender Service Google bot ? (UserAgentͰ൑ఆ) :FT DBDIF͞Εͯͳ͍ )FBEMFTT$ISPNF DBDIF͞ΕͯΔ /P JOEFYIUNMͱ+4ฦ͢ DBDIF DBDIF͢Δ

Slide 49

Slide 49 text

%ZOBNJD3FOEFSJOH QSFSFOEFS IUUQTXXXZPVUVCFDPNXBUDI W1'X6CHWQEB2 (PPHMF*0ʹͯ ଟ෼ ॳΊͯ  ʮ%ZOBNJD3FOEFSJOHʯ  ͱ͍͏໊લ͕͍ͭͨɻ    (PPHMF͓๽෇͖ͷख๏ɻ

Slide 50

Slide 50 text

ΫϩʔΩϯάʹ͍ͭͯ ϒϥοΫϋοτ4&0ͷҰͭɻCPUͱϢʔβʹҧ͏ίϯςϯπΛฦ͢͜ͱΛࢦ͢ όϨΔͱϖφϧςΟ͕ՊͤΒΕΔ ΢Σϒ αΠτ Google bot Ϣʔβ

Slide 51

Slide 51 text

ΫϩʔΩϯάʹ͍ͭͯ 'FUDIBT(PPHMFͰݟΕΔ௨Γ(PPHMF͸ͳΜΒ͔ͷํ๏ͰϢʔβ͕࣮ࡍʹݟΔ ը໘Λ࠶ݱ͍ͯ͠ΔɻΘ͟Θ͟(PPHMFࣗ਎͕%ZOBNJD3FOEFSJOHΛਪ͍ͯ͠ Δ͜ͱ͔Βɺ6"Ͱग़͠෼͚͍ͯͯ΋͋Δఔ౓ಉҰͳΒେৎ෉ͳ͸ͣ ଟ෼ ɻ

Slide 52

Slide 52 text

·ͩ঺հ͍ͯ͠ͳ͍ख๏΋͋Γ·͕͢ɺ ର4&0ʹؔͯ͠͸͜ͷ%ZOBNJD3FOEFSJOH͕万能ͷιϦϡʔγϣϯͰ͢ɻ $ISPNF λΠϜΞ΢τ ϝλ৘ใ 3FOEFS2VFVF ˠͦ΋ͦ΋+4࣮ߦ͠ͳ͍ ˠΩϟογϡ͔Βฦ͢ͷͰແ໰୊ ˠαʔόଆͰඳը͢ΔͷͰ0, ˠ+4࣮ߦ͠ͳ͍ͷͰ3FOEFS2VFVFʹೖΒͳ͍

Slide 53

Slide 53 text

4UBUJD4JUF(FOFSBUPS ࣄલʹ)5.-Λੜ੒ 3FBDU΍7VFͳͲͷ41"ϥΠϒϥϦͰߏங

Slide 54

Slide 54 text

࣍ͷΑ͏ͳ΋ͷ͚ͩΫϥΠΞϯταΠυʹ೚ͤΔͱ͔͸Ͱ͖ΔͷͰ΢ΣϒΞϓϦʹҰ෦࢖͏ ͱ͔΋Ͱ͖Δɻ ɾϩάΠϯͨ͠ϢʔβͷΈݟΒΕΔ ɾϢʔβΧελϚΠζ͞ΕͨϨίϝϯυΛग़͢ ݸਓతʹ͸4&0͍ͨ͠ϖʔδͰೝূ͕ඞཁͳϖʔδ͸΄΅΄΅ͳ͍ͱࢥ͏ͷͰɺ৽نϢʔβ ͕ྲྀೖ͢Δͱ͜Ζ͚ͩ44(Ͱ࡞ͬͯɺ࣮Ϣʔβʹର͢Δମݧ޲্Λ໨ࢦͭͭ͠4&0ͷ౔୆΋ ࡞ΕΔଧͪखͱͯ͠ࠓޙ੝Γ্͕͍͖ͬͯͦ͏ͳ༧ஹΛײ͍ͯ͡·͢ɻ(BUTCZ࢖͍͍ͨɻ

Slide 55

Slide 55 text

443 4FSWFS4JEF3FOEFSJOH ϒϥ΢β αʔόଆͰ+4Λ࣮ߦͯ͠ )5.-Λੜ੒

Slide 56

Slide 56 text

஫ҙ఺443Ͱ΋λΠϜΞ΢τ͸͋ΓಘΔ Φ΢νʔϊ༷ͷࣄྫ IUUQTEFWFMPQFSTPVDDJOPDPNFOUSZ Rails+ReactͳSPAαΠτͰSEOΛ͠Α͏ͱͯ͠Ϳ͔ͭͬͨน

Slide 57

Slide 57 text

ཁٻύλʔϯ͝ͱͷ ղܾࡦͷબͼํ 04.

Slide 58

Slide 58 text

࣍ͷ3ͭͷ໰͍Λߟ͑·͠ΐ͏ 1 ΠϯσοΫεʹ৴པੑΛٻΊΔ͔ 2 ϝλ৘ใͷରԠ͕ඞཁ/ෆཁ (ΠϯσοΫε͞Εͳ͍͍ͯ͘͠OGPͱ͔΋Ͳ͏Ͱ΋͍͍ਓ͸ಛʹͳʹ΋͠ͳͯ͘΋͍͍Ͱ͢ɻ) 3 සൟʹߋ৽͞ΕΔ & ͙͢ʹΠϯσοΫεͯ͠΄͍͔͠Ͳ͏͔

Slide 59

Slide 59 text

ΠϯσοΫεʹ ৴པੑΛٻΊΔ͔ ϝλσʔλ/ߏ଄Խσʔλ ͷରԠ͕ඞཁ සൟʹߋ৽͢Δ ͦ͏Ͱ΋ͳ͍ ͏Ή Chrome 41ରࡦͷΈ Chrome 41ରࡦ + head͚ͩSSR ͦ͏Ͱ΋ͳ͍ Dynamic Rendering or Static Site Generator or SSR Dynamic Rendering ͏Ή ͦ͏Ͱ΋ͳ͍ ͏Ή ଎͕͞଍Γͳ͍ʂ Dynamic Rendering + Static Site Generator or SSR

Slide 60

Slide 60 text

$ISPNF ໰୊ λΠϜΞ΢τ ϝλ৘ใ 3FOEFS 2VFVF ίετ ࣮૷ɾ  ϝϯςφϯε ϫΫϫΫײ $ISPNF ରࡦ ⭕ ❌ ❌ ❌ ௿ ௿ ϝλ৘ใͷΈ 443 ❌ ❌ ⭕ ❌ ௿ ௿ %ZOBNJD  3FOEFSJOH ⭕ ⭕ ⭕ ⭕ த ௿ 4UBUJD4JUF  (FOFSBUPS ⭕ ⭕ த ߴ 443 ⭕ ⭕ ߴ ߴ

Slide 61

Slide 61 text

͍ͨ΁Μ ͔ΜͨΜ ΠέͯΔ Πέͯͳ͍ ˞ݸਓͷݟղͰ͢ Dynamic Rendering SSG SSR Chrome41 ରࡦ ϝλ৘ใ  SSR

Slide 62

Slide 62 text

͓ΘΓʹ݁ہ443͸ඞཁෆཁ 4&0؍఺͚ͩͰݴ͑͹ෆཁɻ ࣮૷͕%ZOBNJD3FOEFSJOHΑΓίετ͕ߴ্͍ʹɺ࡞ΓํʹΑͬͯ͸λΠϜΞ ΢τ΍3FOEFS2VFVFͷϦεΫ͕͋Δɻ ͳͷͰ443ΛબͿࡍʹ͸ଞͷύϑΥʔϚϯεͳͲͰͷ؍఺͕ओͱͳΔͱࢥ͍·͢ɻ ྫ͑͹ɺϢʔβೝূ͕ඞཁͳ෦෼Ͱͷ'.1ͷ࠷దԽ͕Ͱ͖Δ͜ͱ͕Ϗδωεత ʹॏཁͰ͋Ε͹ɺ༗ྗͳબ୒ࢶͱͳΓ·͢ɻ ·ͨɺ౰ͨΓલͰ͕͢ɺҰ͔ͭ͠બ΂ͳ͍ͱ͍͏༁Ͱ΋ͳ͍ͷͰɺཁٻʹΑͬͯ ͸%ZOBNJD3FOEFSJOH443ͱ͍͏ߏ੒΋ࢹ໺ʹೖΔͷ͔ͳͱࢥ͍·͢ɻ

Slide 63

Slide 63 text

͞Βʹ͍͞͝ʹϢʔβʹͱͬͯʮ͍͍΋ͷʯΛ࡞͍ͬͯ͜͏ ʮFirst and foremost, we focus on the user.ʯ IUUQTXXXCMPHHPPHMFQSPEVDUTTFBSDIJNQSPWJOHTFBSDIOFYUZFBST 神は云った。

Slide 64

Slide 64 text

͞Βʹ͍͞͝ʹϢʔβʹͱͬͯʮ͍͍΋ͷʯΛ࡞͍ͬͯ͜͏ ٕज़తͳ੍໿͔ΒࠓճͷΑ͏ͳzରࡦzΛ͋Δఔ౓͠ͳͯ͘͸ͳΒͳ͍ͷ͸͔֬ Ͱ͕͢ɺͦΕҎ֎͸ʮϢʔβʹྑ࣭ͳίϯςϯπΛఏڙ͢Δ͜ͱʯ͕4&0ͷ ίΞͱͳͬͯ͘Δ͜ͱ͸ؒҧ͍ͳ͍Ͱ͠ΐ͏ɻ (PPHMFͷʮ%POUCFFWJMʯΛ৴͡·͠ΐ͏

Slide 65

Slide 65 text

Thank you for listening!!

Slide 66

Slide 66 text

6TFGVM3FTPVSDFT +4TJUFͷ4&0৘ใ <+BWB4DSJQU4JUFTJO4FBSDI8PSLJOH(SPVQ> IUUQTHSPVQTHPPHMFDPNGPSVNGPSVNKTTJUFTXH <:PV5VCF(PPHMF8FCNBTUFS> IUUQTXXXZPVUVCFDPNVTFS(PPHMF8FCNBTUFS)FMQ <ւ֎4&0৘ใϒϩάւ֎ͷ4&0ରࡦͰۃΊΔΞΫηεΞοϓज़> IUUQTXXXTV[VLJLFOJDIJDPNCMPH ͜ͷαΠτ͸ϚδͰ͍͢͝Ͱ͢ɻଚܟͱײँ͔͠ͳ͍Ͱ͢ɻ %ZOBNJD3FOEFSJOH <)FBEMFTT$ISPNFBOBOTXFSUPTFSWFSTJEFSFOEFSJOH+4TJUFTc5PPMTGPS8FC%FWFMPQFSTc (PPHMF%FWFMPQFST> IUUQTEFWFMPQFSTHPPHMFDPNXFCUPPMTQVQQFUFFSBSUJDMFTTTS

Slide 67

Slide 67 text

6TFGVM3FTPVSDFT (PPHMFͷϨϯμϦϯάࣄ৘ <(PPHMFݕࡧͰͷϨϯμϦϯάcݕࡧc(PPHMF%FWFMPQFST> IUUQTEFWFMPQFSTHPPHMFDPNTFBSDI EPDTHVJEFTSFOEFSJOH <41"BOE4&0(PPHMF (PPHMFCPU QSPQFSMZSFOEFST4JOHMF1BHF"QQMJDBUJPOBOEFYFDVUF"KBYDBMMT> IUUQTNFEJVNDPN!MNVHOBJOJTQBBOETFPJTHPPHMFCPUBCMFUPSFOEFSBTJOHMFQBHF BQQMJDBUJPOGFBC ϝλ৘ใͷ443 <("ʹͳͬͨ-BNCEB!&EHFΛ࢖ͬͯ41"Λ443ແ͠Ͱ0(1ͱ͔ʹରԠͤͯ͞ΈΔ> IUUQTRJJUBDPNLJJEB JUFNTFGGEEC <-BNCEB!&EHFr*OUFMMJHFOU1SPDFTTJOHPG)5513FRVFTUTBUUIF&EHFc"84/FXT#MPH> IUUQT BXTBNB[PODPNKQCMPHTBXTMBNCEBFEHFJOUFMMJHFOUQSPDFTTJOHPGIUUQSFRVFTUTBUUIFFEHF

Slide 68

Slide 68 text

6TFGVM3FTPVSDFT 4UBUJD4JUF(FOFSBUPS <αʔόʔαΠυͷਓʹ΋఻͍͑ͨ+".4UBDLͱ੩తαΠτͷΠϚNPUUPYCMPH> IUUQTNPUUPYDPN QPTUT OPDBDIF

Slide 69

Slide 69 text

6TFGVM3FTPVSDFT ࣄྫ <3BJMT3FBDUͳ41"αΠτͰ4&0Λ͠Α͏ͱͯ͠Ϳ͔ͭͬͨนΦ΢νʔϊ։ൃऀϒϩά> IUUQT EFWFMPQFSTPVDDJOPDPNFOUSZ <443ແ͠ͷ3FBDUɾ"OHVMBS੡ͷ41"αΠτ͸(PPHMFCPUʹͲΕ͘Β͍ೝࣝ͞ΕΔͷ͔ʁจܥϓϩάϥϚʹΑ Δ5*14ϒϩά> IUUQTXXXCVOLFJQSPHSBNNFSOFUFOUSZ <αʔόϨεΞʔΩςΫνϟ41"Ͱ443ͳ͠ͷ4&0ରࡦͨ͠࿩4QFBLFS%FDL> IUUQT TQFBLFSEFDLDPNNBUTOPXTBCBSFTVBLJUFLVUJZBQMVTTQBEFTTSOBTJGBMTFTFPEVJDFTJUBIVB TMJEF