JAM Stackと静的サイトのイマ / modern-static-site

サーバーサイドの人にも知ってほしいJAM Stackと静的サイトのイマ
APIやらMicroServiceが充実してきた現代における静的サイトのお話

https://mottox2.com/posts/150/

Transcript

1. JAM Stackͱ੩తαΠτͷΠϚ
   2018.07.06 Webք۾LTձ - @mottox2
   αʔόʔαΠυͷਓʹ΋఻͍͑ͨ
   

   View Slide

2. ੩తαΠτͱಈతαΠτ
   • Ϩεϙϯε͕ૣ͍
   • མͪͳ͍͠εέʔϧ͢Δ
   • ηΩϡϦςΟOK
   • ࣗ༝౓௿ͦ͏
   • ࣮૷ʹΑͬͯ஗͘ͳΔ͜ͱ΋
   • େྔͷΞΫηεʹऑ͍
   • ηΩϡϦςΟతʹͭΒΈ΋
   • େମͳΜͰ΋Ͱ͖Δ
   ੩తαΠτ ಈతαΠτ
   

   View Slide

3. ੩తαΠτδΣωϨʔλʔ
   • ੩తαΠτδΣωϨʔλʔΛ࢖ͬͯੜ੒͢Δ͜ͱ͕ଟ͍
   • ಈతʹ੩తαΠτΛੜ੒͢ΔδΣωϨʔλ
   • جຊతʹGitHubͷpushͱ࿈ಈͯ͠Ϗϧυ͢ΔΑ͏ͳײ͡
   

   View Slide

4. Web։ൃΛऔΓר࣌͘୅ͷมԽ
   

   View Slide

5. ࣌୅ͷมԽ
   ϞϊϦγοΫ͔ΒϚΠΫϩαʔϏεʹ
   GitHubத৺ͷ։ൃ؀ڥʹ
   PC͔ΒεϚϗத৺ͷWebʹ
   1
   2
   3
   

   View Slide

6. ϞϊϦγοΫ͔ΒϚΠΫϩαʔϏεʹ
   • Micro Service͕ҰൠతʹͳΓɺαʔόʔαΠυͷ෼཭͸ͱ΋͔͘ɺStipeʢ՝ۚʣ
   ΍ContentfulʢHeadless CMSʣɺSentryʢΤϥʔऩूʣͳͲͷ֎෦αʔϏεͱAPI
   Λܦ༝ͯ͠ར༻͢Δํ๏͕ҰൠԽͨ͠ʢ͸ͣʣɻ
   • backend͸ผαʔϏεͷAPIΛ࢖ͬͨΓɺࣗલͰ࣮૷͢ΔͳΓͯ͠ɺϑϩϯτΤϯ
   υ͚ͩผϓϩδΣΫτʹ੾Γग़͢ͷ΋ࣗવɻ
   • WebHookʹΑΔαʔϏεؒ࿈ܞ΋े෼ʹීٴͨ͠ɻ
   

   View Slide

7. GitHubத৺ͷ։ൃ؀ڥʹ
   • ιʔείʔυ؅ཧ͕GitHub্ͰߦΘΕΔΑ͏ʹͳΓɺCIͱ࿈ܞ͢Δ͜ͱ͕Ұൠత
   ʹɻ
   • GitHub PagesͰ؆୯ʹαΠτ͕ެ։Ͱ͖ͨΓɺGitHubͱ࿈ܞͯ͠੩తαΠτΛެ
   ։Ͱ͖ΔNetlifyͷొ৔
   • ϏϧυίϚϯυͷࢦఆ΍ɺGlobal CDNɺPR PreviewͳͲ͕σϑΥϧτͰ࢖͑
   ΔɻਆαʔϏεɻ
   ▶ ੩తαΠτͷσϓϩΠ͕ͲΜͲΜָʹ
   

   View Slide

8. PC͔ΒεϚϗத৺ͷWebʹ
   • 3G͔Β4Gʹͳͬͨͱ͸͍͑ɺ౎ࢢ෦͔Β཭ΕΔͱ3G΍ྼѱͳ௨৴؀ڥ͕ଘࡏ͢
   Δɻ
   • GoogleͷΞϧΰϦζϜͰ஗͍αΠτ͸ϥϯΫ͕Լ͕Δɻ
   • ΑΓૣ͘ϨεϙϯεΛฦͯ͠ɺ௨৴ྔΛ཈͑Δඞཁੑ͕ߴ·͍ͬͯΔɻ
   • ಈతαΠτ͸αʔόʔαΠυͰͷॲཧͷ෼଎౓తʹෆརɻ
   • ·ͨɺόζΓ΍͘͢ͳͬͯҰؾʹτϥϑΟοΫ͕૿͑Δ৔߹΋ɻ
   ▶ εέʔϧ͠΍͘͢ɺTTFB͕ૣ͍੩తαΠτʹΞυ͕
   

   View Slide

9. ੩తαΠτδΣωϨʔλʔ΋มԽ
   • Ҏલͷ੩తαΠτδΣωϨʔλ
   • جຊతʹϦϙδτϦ্ʹ͋ΔMarkdownΛݩʹ੩తϖʔδΛੜ੒
   • ࠷ۙͷ੩తαΠτδΣωϨʔλ
   • APIΛୟ͍ͯͦͷσʔλΛݩʹ੩తϖʔδΛੜ੒
   • APIΛୟ͘͜ͱΛલఏͱ͍ͯ͠Δ΋ͷ΋ɻMarkdown͸ΦϓγϣϯͷҰͭ
   ▶ ࢥͬͨΑΓࣗ༝౓͕ߴ͍ͱࢥ͍·ͤΜ͔ʁ
   

   View Slide

10. ओཁͳ੩తαΠτδΣωϨʔλʔ
    ▶ ελʔ਺Ͱ͸ෛ͚͍ͯΔ͕ɺJavaScript੡ͷ΋ͷΛ࠾༻͢΂͖
    34728 / Ruby
    Jekyll
    26870 / Golang
    Hugo
    23123 / JavaScript(React)
    Next
    23123 / JavaScript(React)
    Gatsby
    13371 / JavaScript(Vue)
    Nuxt
    

    View Slide

11. JavaScript੡ͷδΣωϨʔλʔΛબ୒͢΂͖ཧ༝
    • ServerͰੜ੒ͨ͠HTMLΛJSͰ͍͡Δͷ͸ͦΖͦΖࣙΊ͍ͨɻ
    • APIΛୟ͍ͯViewʹදࣔ͢Δॲཧ͕JSͰ׬݁͢Δɻ
    • ߟ͑Δ͜ͱ͕૿͑ͳ͍··SPAʹͰ͖Δ͔΋ɻ
    • ϑϩϯτΤϯυͷࢿ࢈Ͱ͋Δ։ൃ؀ڥ͕ศརɻ
    • Ϗϧυ؀ڥΛ੔͑ΔͷʹNode͚ͩ༻ҙ͢Ε͹Α͍ɻ
    

    View Slide

12. JAM Stack
    ͜ΕΒͷཁૉΛຬͨ͢ελοΫΛJAM Stackͱ͍͏ɻ
    https://jamstack.org/
    JavaScriptͰߏ੒͞Ε͍ͯΔ
    APIΛར༻͢Δ͜ͱ
    ࣄલʹϏϧυ͢Δ͜ͱ
    

    View Slide

13. Կ͕࡞ΕΔͷʁ
    • Headless CMSΛ࢖ͬͨΦ΢ϯυϝσΟΞ
    • ্ཱ͕ͪ͛ര଎Ͱग़དྷΔɻ
    • esa.io΍Qiita:Teamͱ࿈ܞͯ͠ߋ৽Ͱ͖ΔίʔϙϨʔταΠτ
    • ؅ཧαΠτΛϗεςΟϯά͢Δඞཁͳ͍ͷͰศརɻ
    • ձࣾͷϝϯόʔͷQiita΍noteɺϒϩάΛ·ͱΊͨϙʔλϧαΠτ
    • స৬ଟͯ͘։ൃϒϩάʹॻ͘ͷ͕ਏ͍ͷͰɺ৘ใͷϙʔλϏϦςΟ্͕͕Δɻ
    • Stripe΍MoltinΛۦ࢖͢Ε͹ECαΠτ΋ग़དྷΔɻ
    • ਖ਼௚ҙຯ͕Θ͔Βͳ͍ɻ
    

    View Slide

14. ֤ϑϨʔϜϫʔΫͷ঺հ
    

    View Slide

15. ओཁͳ੩తαΠτδΣωϨʔλʔ
    34728 / Ruby
    Jekyll
    26870 / Golang
    Hugo
    23123 / JavaScript(React)
    Next
    23123 / JavaScript(React)
    Gatsby
    13371 / JavaScript(Vue)
    Nuxt
    

    View Slide

16. Next
    • SSR෇͖ͷReactΞϓϦέʔγϣϯ༻ͷSPAϑϨʔϜϫʔΫɻ
    • Routing΍SSRʹؔͯ͠ϨʔϧΛෑ͍ͯ͘ΕΔɻ
    • easyΑΓ͸simpleدΓɻυΩϡϝϯτ΋؆ૉɻ
    • ੩తαΠτͷΤΫεϙʔτػೳ͕͋Δɻ
    

    View Slide

17. Nuxt
    • ೔ຊʹྲྀߦͬͯΔʢؾ͕͢ΔʣVueͷSPAϑϨʔϜϫʔΫɻ
    • Next.jsΠϯεύΠΞܥͷϑϨʔϜϫʔΫ͚ͩͬͨͲɺϑϧελοΫํ໘ʹ޲͔ͬͯ
    ͍Δɻ
    • ઃఆΑΓن໿ͳϑϨʔϜϫʔΫɻϑϩϯτΤϯυͷRailsʢݸਓͷݟղʣ
    • SSRϞʔυɺSPAϞʔυɺ੩తϑΝΠϧϞʔυ͕͋Δɻ
    • ࠷ۙຊ൪ͰNuxtΛ࠾༻͍ͯ͠ΔྫΛԿճ͔ݟͨɻʢͨͩ͠SSRϞʔυʣ
    

    View Slide

18. Gatsby
    • ReactͰ੩తαΠτΛॻͨ͘ΊͷϑϨʔϜϫʔΫɻ
    • ී௨ʹॻ͚͹ૣ͘ͳΔΑ͏ʹઃܭ͞Ε͍ͯΔɻ
    • ෳ਺ͷσʔλιʔεΛѻ͍΍͍͢ઃܭʹͳ͍ͬͯΔɻ
    • ΞϓϦέʔγϣϯͬΆ͍΋ͷΛॻ͘΋ͷͰ͸ͳ͍ɻ
    

    View Slide

19. ϑϨʔϜϫʔΫΛબͿͱ͖ͷϙΠϯτ
    • Next, Nuxt, Gatsbyʹؔͯ͠͸ɺ֎෦ͷAPIΛୟ͍ͯͳʹ͔͢Δ৔߹ʹɻ͋͘·Ͱ
    JAM Stackʹ৐͔ͬΔͳΒ͜ͷ3ͭͰ͸ʁͱ͍͏࿩ɻ
    • ͜ͷ3ͭͷϑϨʔϜϫʔΫ͸੩తαΠτͱͯ͠ग़ྗ͢ΔͱɺJS͕ಡΈࠐ·Εͨޙʹ
    SPAͱͯ͠ಈ࡞͢Δɻ
    • ͨͩNext, Nuxt͸ΞϓϦέʔγϣϯϑϨʔϜϫʔΫͷଆ໘͕ڧ͍ͷͰɺ͜͜Ͱൺֱ
    ͢Δͷ͸ద੾Ͱ͸ͳ͍
    • ٯʹMarkdownͰϒϩάΛ࡞Γ͍ͨ৔߹͸ɺͦ͏͍ͬͨࢥ૝ͷϑϨʔϜϫʔΫΛબ
    Ϳ΂͖ɻ
    • ϑϨʔϜϫʔΫຖͷࢥ૝͕͋ΔͷͰݴޠ໰ΘͣʹݟͯΈΔͱ͍͍͔΋
    

    View Slide

20. Α͋͘Δ͔΋͠Εͳ͍࣭໰
    

    View Slide

21. ϑΥʔϜͱ͔Ͳ͏͢ΜͷΑʁ
    • Ұ൪؆୯ͳͷ͕Google FormͷຒΊࠐΈɻ
    • FormܥͷSaaS΍Netlify FormΛ࢖͏બ୒ࢶ΋
    • Netlify Functions΍Lambdaͱ࿈ܞͯ͠؆қతͳαʔόʔαΠυͱΈͳ͢͜ͱ΋Ͱ͖
    Δɻ
    

    View Slide

22. Ϗϧυ࣌ؒͱ͔Ͳ͏ͳͷʁ
    • HTML෦෼ΑΓ֎෦APIΛୟ͘෦෼͕ωοΫʹͳΓ͕ͪɻ
    • WordPress+GatsbyͰ࡞ͬͯΔαΠτ͸2000ϖʔδ͙Β͍Ͱ໿6෼ͱ͍͏ͱ͜Ζɻ
    • ΋͏গ͠γϯϓϧͳHeadless CMSΛ࢖͑͹਺෼ͰऴΘΔ͸ͣɻ
    

    View Slide

23. React, Vueͬͯߟ͑Δ͜ͱ͕ଟͦ͏
    • Next.js, GatsbyJS, Nuxt.jsΛબ΂͹ɺ͋Δఔ౓ͷϨʔϧ͕ෑ͔Ε͍ͯΔͨΊϥΠϒ
    ϥϦબఆ໰୊ͱ௚໘͢Δ͜ͱ͸গͳ͍ɻ
    • ίϯϙʔωϯτ୯ҐͰCSS͕͔͚ͨΓ͢ΔͷͰɺCSSͷҋͱ΋௚໘͠ʹ͍͘ɻ
    • ݸਓͷݟղͰ͍͑͹ɺී௨ʹHTMLΛॻ͘ΑΓߟ͑Δ͜ͱ͕গͳ͍ɻ
    

    View Slide

24. SPA(+SSR)ͱ੩తαΠτͷ࢖͍෼͚͸ʁ
    • ߋ৽ස౓͕ߴ͘ͳ͍·ͨ͸APIͷར༻੍ݶ͕͋Δ৔߹͸੩తαΠτɻ
    • ੩తαΠτͰ͸ͳ͘SPA(+SSR)ʹ͢Δ৔߹ͰReactͳΒNext.jsɺVueͳΒNuxt.js
    • ۩ମతʹCGMͷΑ͏ͳߋ৽ස౓͕ߴ͍αΠτͰ͋Ε͹Next.jsɺNuxt.jsʹ͢Δɻ
    • 3rd Party ServiceͷAPIʹར༻੍ݶ͕͋Δ৔߹ɺ੩తαΠτԽ͢Δඞཁ͕͋Δɻ
    

    View Slide

25. ͋ͳͨͷαΠτɺSPAͰ΋͍͍ͷͰ͸ʁ
    JAM StackͷMarkup͕ຬͨͤͳ͘ͳΔ͚Ͳ
    ૣ্ཱͪ͛͘Δͱ͍͏ҙຯͰڧ͍બ୒ࢶʹͳΔ
    ͓·͚
    

    View Slide

26. • SPA΋੩తαΠτ
    • JS͕ϒϥ΢βͰϨϯμϦϯά͍ͯ͠Δ
    SPA΋੩తαΠτ
    

    View Slide

27. • Netlify͕PrerenderingΛαϙʔτ(beta)
    • Ϋϩʔϥʔ޲͚ʹJSͰϨϯμϦϯάͨ݁͠ՌΛฦͯ͘͠ΕΔɻ
    • ϗεςΟϯάαʔϏεʹ͍͍ͬͭͯ͘ΔͷͰγʔϜϨεʹઃఆՄೳ
    • Ҏલ͔Β΋prerender.ioͷΑ͏ͳαʔϏε΋͕͋ͬͨɺ͋·Γྲྀߦ͍ͬͯͳ͍ҹ৅
    Netlify Prerenderingͷొ৔
    

    View Slide

28. ࣄྫ: SmartDrive https://smartdrive.co.jp
    @takanoripe͞Μ࡞ɻNuxt.jsͷSPAϞʔυ+WordPress REST API
    

    View Slide

29. ੩తαΠτͰͰ͖Δ͜ͱ͸ͲΜͲΜ૿͍͑ͯΔ
    ࡞Βͳͯ͘΋͍͍΋ͷ͕૿͑ͨͷͰ
    ΑΓຊ࣭తͳ΋ͷʹ஫ྗͰ͖Δ࣌୅ʹ
    ·ͱΊ
    

    View Slide

30. @mottox2
    • ReactͱRuby on RailsΛத৺ʹWebαʔϏε։ൃ͍ͯ͠·͢
    • ϒϩά΍ͬͯ·͢(esa.io + note.mu + GatsbyJS) => mottox2.com
    • ࢓ࣄͰ͸σβΠϯ͠ͳ͕ΒNext(SSR)΍GatsbyJSΛ΍ͬͯ·͢
    Freelance web engineer
    Yuki Takemoto
    ୭ʁ
    

    View Slide