$30 off During Our Annual Pro Sale. View Details »

State of SEO for SPA 2018

seya
November 23, 2018

State of SEO for SPA 2018

seya

November 23, 2018
Tweet

More Decks by seya

Other Decks in Technology

Transcript

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

    View Slide

  2. Kazuya Seki
    FRONTEND DEV
    @sekikazu01
    @seya

    View Slide

  3. ͜Μͳܦݧͳ͍Ͱ͠ΐ͏͔

    41"͸4&0ʹzऑ͍zΒ͍͠

    ͪΐͬͱௐࠪͯ͠ΈΑ͏ɻ

    View Slide

  4. View Slide

  5. ໿൒೥લͷࢲ

    View Slide

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

    View Slide

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

    View Slide

  8. “SEO”ͱ͸ͳʹ͔
    01.

    View Slide

  9. SEO = Search Engine Optimization

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  16. ·ͱΊ
    ʮ4&0ʯͱ͍͏ݴ༿͕࢖ΘΕΔ࣌ʹ͸࣍ͷೋͭͷจ຺͕͋Δ
    (PPHMFͷݕࡧ݁ՌͰΑΓ্Ґʹදࣔ͞ΕΔͨΊͷࢪࡦ
    0(1΍5XJUUFS$BSEɺ".1ͳͲͷߏ଄Խσʔλͷදࣔ
    ˞ຊτʔΫͰ͸͜ΕҎ߱શ෦ͻͬ͘ΔΊͯʮϝλ৘ใʯͱݺͼ·͢ ஫ҰൠతͳݺͼํͰ͸ͳ͍Ͱ͢

    ʮ4&0ͷ౔୆ʯΛ࡞ΔͨΊʹ͸࣍ͷ̎఺͕ඞཁ
    (PPHMFCPUʹΫϩʔϧ͞ΕΔ͜ͱ
    )5.-͕ద੾ʹղऍ͞ΕΔ͜ͱ

    View Slide

  17. SPAʹ͓͚Δ
    SEOͷ՝୊
    02.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. ͕͔ͩ͠͠

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. Կඵ·ͰͳΒ଴ͬͯ͘ΕΔͷ͔ʁ
    IUUQTNFEJVNDPN!MNVHOBJOJTQBBOETFPJTHPPHMFCPUBCMFUP
    SFOEFSBTJOHMFQBHFBQQMJDBUJPOGFBC
    ৄࡉʹݕূͯ͘͠Εͨํ͕͍ͨͷͰύΫΓ݁ՌΛ͓आΓ͠·͢
    લఏ


    &MNͰͰ͖ͨ41"αΠτ
    QVTI4UBUFͰϖʔδΛมߋ͍ͯ͠Δ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. ՝୊ϝλ৘ใ͸αʔό͔Βฦ࣌͢఺Ͱ)5.-
    ʹؚ·Ε͍ͯΔඞཁ͕͋Δ
    ͦ΋ͦ΋+4Λ࣮ߦͯ͘͠Εͳ͍ͷͰɺ

    αʔό͔Βฦͬͯ͘Δ࣌఺Ͱ)5.-ʹؚ·Ε͍ͯͳ͍ͱղऍͯ͘͠Εͳ͍
    ͪͳΈʹ".1ͩͱϝλ৘ใʹݶΒͣશͯαʔόଆͰඳը͢Δඞཁ͕͋Δ


    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. IUUQTXXXZPVUVCFDPNXBUDI W:1U.#IZ6*

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  43. $ISPNFͰϨϯμϦϯάͰ͖ΔΑ͏ʹ͢Δ
    ςετͷํ๏'FUDIBT(PPHMF https://www.google.com/webmasters/tools/googlebot-fetch?hl=JA
    ˝੍ݶ͕ͪΐͬͱ͚ͩݫ͍͠

    ೔ճ·Ͱ ݱࡏ


    ˝ݪҼෆ໌ͷΤϥʔͰ࢖͑ͳ͘ͳͬͨΓ͢Δ

    άάͬͯ΋ղܾࡦ͕ʮ೔଴ͪ·͠ΐ͏ʯ


    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  47. %ZOBNJD3FOEFSJOH QSFSFOEFS

    IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTHVJEFTEZOBNJDSFOEFSJOH
    QSFSFOEFSJP SFOEFSUSPO

    View Slide

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

    View Slide

  49. %ZOBNJD3FOEFSJOH QSFSFOEFS

    IUUQTXXXZPVUVCFDPNXBUDI W1'X6CHWQEB2
    (PPHMF*0ʹͯ ଟ෼
    ॳΊͯ

    ʮ%ZOBNJD3FOEFSJOHʯ

    ͱ͍͏໊લ͕͍ͭͨɻ


    (PPHMF͓๽෇͖ͷख๏ɻ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  55. 443 4FSWFS4JEF3FOEFSJOH

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  60. $ISPNF
    ໰୊
    λΠϜΞ΢τ ϝλ৘ใ
    3FOEFS
    2VFVF
    ίετ ࣮૷ɾ

    ϝϯςφϯε

    ϫΫϫΫײ
    $ISPNF
    ରࡦ
    ⭕ ❌ ❌ ❌ ௿ ௿
    ϝλ৘ใͷΈ
    443
    ❌ ❌ ⭕ ❌ ௿ ௿
    %ZOBNJD

    3FOEFSJOH
    ⭕ ⭕ ⭕ ⭕ த ௿
    4UBUJD4JUF

    (FOFSBUPS
    ⭕ ⭕ த ߴ
    443
    ⭕ ⭕ ߴ ߴ

    View Slide

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

    SSR

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  65. Thank you for listening!!

    View Slide

  66. 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

    View Slide

  67. 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

    View Slide

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

    View Slide

  69. 6TFGVM3FTPVSDFT
    ࣄྫ
    <3BJMT3FBDUͳ41"αΠτͰ4&0Λ͠Α͏ͱͯ͠Ϳ͔ͭͬͨนΦ΢νʔϊ։ൃऀϒϩά> IUUQT
    EFWFMPQFSTPVDDJOPDPNFOUSZ

    <443ແ͠ͷ3FBDUɾ"OHVMBS੡ͷ41"αΠτ͸(PPHMFCPUʹͲΕ͘Β͍ೝࣝ͞ΕΔͷ͔ʁจܥϓϩάϥϚʹΑ
    Δ5*14ϒϩά> IUUQTXXXCVOLFJQSPHSBNNFSOFUFOUSZ

    <αʔόϨεΞʔΩςΫνϟ41"Ͱ443ͳ͠ͷ4&0ରࡦͨ͠࿩4QFBLFS%FDL> IUUQT
    TQFBLFSEFDLDPNNBUTOPXTBCBSFTVBLJUFLVUJZBQMVTTQBEFTTSOBTJGBMTFTFPEVJDFTJUBIVB TMJEF

    View Slide