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

297a42b94a1bda236982ec1cd81089b6?s=47 mottox2
July 06, 2018

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

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

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

297a42b94a1bda236982ec1cd81089b6?s=128

mottox2

July 06, 2018
Tweet

Transcript

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

  2. ੩తαΠτͱಈతαΠτ • Ϩεϙϯε͕ૣ͍ • མͪͳ͍͠εέʔϧ͢Δ • ηΩϡϦςΟOK • ࣗ༝౓௿ͦ͏ •

    ࣮૷ʹΑͬͯ஗͘ͳΔ͜ͱ΋ • େྔͷΞΫηεʹऑ͍ • ηΩϡϦςΟతʹͭΒΈ΋ • େମͳΜͰ΋Ͱ͖Δ ੩తαΠτ ಈతαΠτ
  3. ੩తαΠτδΣωϨʔλʔ • ੩తαΠτδΣωϨʔλʔΛ࢖ͬͯੜ੒͢Δ͜ͱ͕ଟ͍ • ಈతʹ੩తαΠτΛੜ੒͢ΔδΣωϨʔλ • جຊతʹGitHubͷpushͱ࿈ಈͯ͠Ϗϧυ͢ΔΑ͏ͳײ͡

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

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

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

    • WebHookʹΑΔαʔϏεؒ࿈ܞ΋े෼ʹීٴͨ͠ɻ
  7. GitHubத৺ͷ։ൃ؀ڥʹ • ιʔείʔυ؅ཧ͕GitHub্ͰߦΘΕΔΑ͏ʹͳΓɺCIͱ࿈ܞ͢Δ͜ͱ͕Ұൠత ʹɻ • GitHub PagesͰ؆୯ʹαΠτ͕ެ։Ͱ͖ͨΓɺGitHubͱ࿈ܞͯ͠੩తαΠτΛެ ։Ͱ͖ΔNetlifyͷొ৔ • ϏϧυίϚϯυͷࢦఆ΍ɺGlobal

    CDNɺPR PreviewͳͲ͕σϑΥϧτͰ࢖͑ ΔɻਆαʔϏεɻ ▶ ੩తαΠτͷσϓϩΠ͕ͲΜͲΜָʹ
  8. PC͔ΒεϚϗத৺ͷWebʹ • 3G͔Β4Gʹͳͬͨͱ͸͍͑ɺ౎ࢢ෦͔Β཭ΕΔͱ3G΍ྼѱͳ௨৴؀ڥ͕ଘࡏ͢ Δɻ • GoogleͷΞϧΰϦζϜͰ஗͍αΠτ͸ϥϯΫ͕Լ͕Δɻ • ΑΓૣ͘ϨεϙϯεΛฦͯ͠ɺ௨৴ྔΛ཈͑Δඞཁੑ͕ߴ·͍ͬͯΔɻ • ಈతαΠτ͸αʔόʔαΠυͰͷॲཧͷ෼଎౓తʹෆརɻ

    • ·ͨɺόζΓ΍͘͢ͳͬͯҰؾʹτϥϑΟοΫ͕૿͑Δ৔߹΋ɻ ▶ εέʔϧ͠΍͘͢ɺTTFB͕ૣ͍੩తαΠτʹΞυ͕
  9. ੩తαΠτδΣωϨʔλʔ΋มԽ • Ҏલͷ੩తαΠτδΣωϨʔλ • جຊతʹϦϙδτϦ্ʹ͋ΔMarkdownΛݩʹ੩తϖʔδΛੜ੒ • ࠷ۙͷ੩తαΠτδΣωϨʔλ • APIΛୟ͍ͯͦͷσʔλΛݩʹ੩తϖʔδΛੜ੒ •

    APIΛୟ͘͜ͱΛલఏͱ͍ͯ͠Δ΋ͷ΋ɻMarkdown͸ΦϓγϣϯͷҰͭ ▶ ࢥͬͨΑΓࣗ༝౓͕ߴ͍ͱࢥ͍·ͤΜ͔ʁ
  10. ओཁͳ੩తαΠτδΣωϨʔλʔ ▶ ελʔ਺Ͱ͸ෛ͚͍ͯΔ͕ɺJavaScript੡ͷ΋ͷΛ࠾༻͢΂͖ 34728 / Ruby Jekyll 26870 / Golang

    Hugo 23123 / JavaScript(React) Next 23123 / JavaScript(React) Gatsby 13371 / JavaScript(Vue) Nuxt
  11. JavaScript੡ͷδΣωϨʔλʔΛબ୒͢΂͖ཧ༝ • ServerͰੜ੒ͨ͠HTMLΛJSͰ͍͡Δͷ͸ͦΖͦΖࣙΊ͍ͨɻ • APIΛୟ͍ͯViewʹදࣔ͢Δॲཧ͕JSͰ׬݁͢Δɻ • ߟ͑Δ͜ͱ͕૿͑ͳ͍··SPAʹͰ͖Δ͔΋ɻ • ϑϩϯτΤϯυͷࢿ࢈Ͱ͋Δ։ൃ؀ڥ͕ศརɻ •

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

  13. Կ͕࡞ΕΔͷʁ • Headless CMSΛ࢖ͬͨΦ΢ϯυϝσΟΞ • ্ཱ͕ͪ͛ര଎Ͱग़དྷΔɻ • esa.io΍Qiita:Teamͱ࿈ܞͯ͠ߋ৽Ͱ͖ΔίʔϙϨʔταΠτ • ؅ཧαΠτΛϗεςΟϯά͢Δඞཁͳ͍ͷͰศརɻ

    • ձࣾͷϝϯόʔͷQiita΍noteɺϒϩάΛ·ͱΊͨϙʔλϧαΠτ • స৬ଟͯ͘։ൃϒϩάʹॻ͘ͷ͕ਏ͍ͷͰɺ৘ใͷϙʔλϏϦςΟ্͕͕Δɻ • Stripe΍MoltinΛۦ࢖͢Ε͹ECαΠτ΋ग़དྷΔɻ • ਖ਼௚ҙຯ͕Θ͔Βͳ͍ɻ
  14. ֤ϑϨʔϜϫʔΫͷ঺հ

  15. ओཁͳ੩తαΠτδΣωϨʔλʔ 34728 / Ruby Jekyll 26870 / Golang Hugo 23123

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

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

    • ࠷ۙຊ൪ͰNuxtΛ࠾༻͍ͯ͠ΔྫΛԿճ͔ݟͨɻʢͨͩ͠SSRϞʔυʣ
  18. Gatsby • ReactͰ੩తαΠτΛॻͨ͘ΊͷϑϨʔϜϫʔΫɻ • ී௨ʹॻ͚͹ૣ͘ͳΔΑ͏ʹઃܭ͞Ε͍ͯΔɻ • ෳ਺ͷσʔλιʔεΛѻ͍΍͍͢ઃܭʹͳ͍ͬͯΔɻ • ΞϓϦέʔγϣϯͬΆ͍΋ͷΛॻ͘΋ͷͰ͸ͳ͍ɻ

  19. ϑϨʔϜϫʔΫΛબͿͱ͖ͷϙΠϯτ • Next, Nuxt, Gatsbyʹؔͯ͠͸ɺ֎෦ͷAPIΛୟ͍ͯͳʹ͔͢Δ৔߹ʹɻ͋͘·Ͱ JAM Stackʹ৐͔ͬΔͳΒ͜ͷ3ͭͰ͸ʁͱ͍͏࿩ɻ • ͜ͷ3ͭͷϑϨʔϜϫʔΫ͸੩తαΠτͱͯ͠ग़ྗ͢ΔͱɺJS͕ಡΈࠐ·Εͨޙʹ SPAͱͯ͠ಈ࡞͢Δɻ

    • ͨͩNext, Nuxt͸ΞϓϦέʔγϣϯϑϨʔϜϫʔΫͷଆ໘͕ڧ͍ͷͰɺ͜͜Ͱൺֱ ͢Δͷ͸ద੾Ͱ͸ͳ͍ • ٯʹMarkdownͰϒϩάΛ࡞Γ͍ͨ৔߹͸ɺͦ͏͍ͬͨࢥ૝ͷϑϨʔϜϫʔΫΛબ Ϳ΂͖ɻ • ϑϨʔϜϫʔΫຖͷࢥ૝͕͋ΔͷͰݴޠ໰ΘͣʹݟͯΈΔͱ͍͍͔΋
  20. Α͋͘Δ͔΋͠Εͳ͍࣭໰

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

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

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

    ݸਓͷݟղͰ͍͑͹ɺී௨ʹHTMLΛॻ͘ΑΓߟ͑Δ͜ͱ͕গͳ͍ɻ
  24. SPA(+SSR)ͱ੩తαΠτͷ࢖͍෼͚͸ʁ • ߋ৽ස౓͕ߴ͘ͳ͍·ͨ͸APIͷར༻੍ݶ͕͋Δ৔߹͸੩తαΠτɻ • ੩తαΠτͰ͸ͳ͘SPA(+SSR)ʹ͢Δ৔߹ͰReactͳΒNext.jsɺVueͳΒNuxt.js • ۩ମతʹCGMͷΑ͏ͳߋ৽ස౓͕ߴ͍αΠτͰ͋Ε͹Next.jsɺNuxt.jsʹ͢Δɻ • 3rd Party

    ServiceͷAPIʹར༻੍ݶ͕͋Δ৔߹ɺ੩తαΠτԽ͢Δඞཁ͕͋Δɻ
  25. ͋ͳͨͷαΠτɺSPAͰ΋͍͍ͷͰ͸ʁ JAM StackͷMarkup͕ຬͨͤͳ͘ͳΔ͚Ͳ ૣ্ཱͪ͛͘Δͱ͍͏ҙຯͰڧ͍બ୒ࢶʹͳΔ ͓·͚

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

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

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

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

  30. @mottox2 • ReactͱRuby on RailsΛத৺ʹWebαʔϏε։ൃ͍ͯ͠·͢ • ϒϩά΍ͬͯ·͢(esa.io + note.mu +

    GatsbyJS) => mottox2.com • ࢓ࣄͰ͸σβΠϯ͠ͳ͕ΒNext(SSR)΍GatsbyJSΛ΍ͬͯ·͢ Freelance web engineer Yuki Takemoto ୭ʁ