State of SEO for SPA 2018

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