フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜

 フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜

Developers Summit 2020 KANSAIの登壇資料です。

B22ff27b7826e3299c8dba2e99f2aef8?s=128

Kazuki Shibata

August 27, 2020
Tweet

Transcript

  1. WebϑϩϯτΤϯυͷτϨϯυ ʙ αʔόʔϨεSPAɺJamstack ʙ ࣲా ࿨ف / @shibe97 #devsumiA A-3

    ΢Υϯλגࣜձࣾ
  2. ࣲా ࿨ف / Kazuki Shibata ΢Υϯλגࣜձࣾͷڞಉ૑ۀऀ $00ɻ NJDSP$.4ͷσβΠϯɺϑϩϯτ
 ։ൃΛ͍ͯ͠·͢ɻ +BNTUBDL/FYU/VYU͕޷͖ɻ

    !TIJCF
  3. None
  4. Agenda 1. WebαΠτͱWebΞϓϦέʔγϣϯͷҧ͍ 2. WebΞϓϦέʔγϣϯߏஙͷྺ࢙ 3. WebαΠτͷߏஙख๏ʹ͍ͭͯ 4. ·ͱΊ

  5. WebΞϓϦέʔγϣϯͱ WebαΠτ

  6. WebαΠτ WebΞϓϦέʔγϣϯ ϚʔέςΟϯάʢू٬ʣ αʔϏεʢՁ஋ʣͷఏڙ ໨త ໨త खஈ Ϣʔβʔͷཉ͍͠৘ใΛൃ৴͢Δ Ϣʔβʔͷ΍Γ͍ͨ͜ͱΛ࣮ݱ͢Δ खஈ

    ݕࡧΤϯδϯϑϨϯυϦʔͰ͋Δ ฤूऀ͕ίϯςϯπΛฤूͰ͖Δ ෳࡶͳػೳཁٻʹ଱͑ΒΕΔ ඞཁ৚݅ ඞཁ৚݅
  7. ໨త͕ҧ͏ͷͰ࡞Γํ΋౰વҧ͏ React WordPress Vue Gulp

  8. WebΞϓϦέʔγϣϯ WebαΠτ 2ͭͷؒʹ͸ඇৗʹେ͖ͳߔ͕͋Δ

  9. WebΞϓϦέʔγϣϯ ߏஙͷྺ࢙

  10. ೋͭͷసػ 1. Ajaxͷొ৔ 2. ϞδϡʔϧγεςϜͷొ৔ γϯάϧϖʔδΞϓϦέʔγϣϯ΁ͷ෍ੴ ΫϥΠΞϯταΠυʹ͓͚Δ
 େن໛ΞϓϦέʔγϣϯͷ࣮૷͕Մೳʹ

  11. None
  12. Ajaxͷ஀ੜ • 2005೥ɺXMLHttpRequestΛ༻͍ͨ
 ඇಉظ௨৴ΛWebΞϓϦέʔγϣϯʹ
 ༻͍Δํ๏͕঺հ͞ΕΔ • Google MapΛൽ੾Γʹരൃతʹීٴ • ੲͷ஍ਤ͸̔ํ޲ͷ໼ҹϦϯΫͩͬͨ

  13. ओઓ৔͸ΫϥΠΞϯταΠυ΁ • ϖʔδભҠͷͨͼʹຖճαʔόʔ͔ΒHTMLΛฦͯ͠΋Β͏ͷ͸஗͍ ʢ౰࣌ͷωοτϫʔΫ؀ڥͷ͍ͤͰ΋͋Δʣ • ඞཁͳσʔλ͚ͩ౎౓AjaxͰऔಘ͠Α͏ γϯάϧϖʔδΞϓϦέʔγϣϯʢSPAʣͷ࣌୅΁

  14. MVCઃܭͷಋೖ 1. jQueryͷݶք 2. MVCઃܭ jQuery͚ͩͰSPAΛ࡞Δʹ͸ঢ়ଶ؅ཧ͕ෳࡶ Ͱݶք͕͋ͬͨ αʔόʔαΠυͷϑϨʔϜϫʔΫʢCakePHP ΍Strutsʣʹश͍ɺΫϥΠΞϯταΠυ΋ MVCઃܭΛಋೖ͢ΔྲྀΕ͕ग़͖ͯͨ

    Model Controller View
  15. JSϑϨʔϜϫʔΫઓࠃ࣌୅ Ember Angular React Vue Riot Backbone Marionette Knockout Mithril

  16. None
  17. ͦΕͰ΋SPA͸ෳࡶͩͬͨ • ౰࣌ͷJavaScriptʹ͸ϞδϡʔϧγεςϜʢrequireʣ͕ແ͔ͬͨͨΊ ॲཧͷ෼ׂ͕ͮ͠Β͔ͬͨ • άϩʔόϧͳ໊લۭؒͰϞδϡʔϧΛར༻͢Δํࣜ • ScriptͷಡΈࠐΈॱ൪Ͱόά͕ൃੜ͢Δ

  18. ϞδϡʔϧγεςϜͷొ৔ 1. Ϟδϡʔϧͷґଘղܾ 2. ΞϓϦέʔγϣϯͷߏ଄Խ Node.jsଆͰ࣮૷͕ਐΜͰ͍ͨϞδϡʔϧͷ
 ґଘղܾػߏΛΫϥΠΞϯταΠυJSͰ΋ ѻ͑ΔΑ͏ʹͳΔ࢓૊Έ͕ొ৔ ͜ΕʹΑΓϞδϡʔϧͷ࠶ར༻͕͠΍͘͢ ͳΓɺJavaScriptͰ΋େن໛ͳ


    ΞϓϦέʔγϣϯΛߏங͠΍͘͢ͳͬͨ
  19. Fluxͷొ৔ʢ2014೥ʣ • Facebook͕ఏএͨ͠ΞʔΩςΫνϟ • MVCͷεέʔϧ͠ͳ͍໰୊Λղܾ͢Δ • σʔλͷྲྀΕΛҰํ޲ʹ͢Δ

  20. FluxϑϨʔϜϫʔΫઓࠃ࣌୅ • Flux • Fluxxor • Flexible • NuclearJS •

    Redux
  21. SPAͷ໰୊఺ JavaScriptͰಈతʹϖʔδΛߏங͢ΔͨΊɺΫϩʔϥʔ͕ղऍͮ͠Β͍ SEO͕ऑ͍ ࠷ॳʹόϯυϧ͞ΕͨJSΛಡΈࠐΉͨΊɺॳظϩʔυʹ͕͔͔࣌ؒΔ ॳظϩʔυ͕஗͍

  22. SSR ͱ૊Έ߹ΘͤΔղܾࡦ • ॳظϩʔυ࣌͸αʔόʔαΠυϨϯμϦϯάʢSSRʣ • ϋΠυϨʔγϣϯΛߦ͍ɺϖʔδભҠҎ߱͸SPAͷΑ͏ͳڍಈΛͤ͞Δ • SPAʹ͓͚ΔSEO΍ॳظϩʔυ஗Ԇͱ͍ͬͨܽ఺Λิͬͨߏ੒ • ࣮૷೉қ౓͕ߴ͍

  23. Next / Nuxtͷొ৔ • ϑΝΠϧγεςϜʹج͍ͮͨϧʔςΟϯά • SSRॲཧͷେ൒ΛϑϨʔϜϫʔΫଆ͕୲ͬͯ͘ΕΔ • ෳࡶͳWebpack΍Babelͷઃఆ͕ӅṭͰ͖Δ

  24. ͦ΋ͦ΋SSR͕ඞཁͳέʔε͸ଟ͘ͳ͍ • ʮαʔϏεͷఏڙʯʹ͓͍ͯ͸SEO͕ॏཁ ͱͳΔέʔε͸ͦΜͳʹଟ͘ͳ͍ • SEO͕ॏཁͰ͋ΔϥϯσΟϯάϖʔδͷΈ SPA֎Ͱ഑৴͠ɺαʔϏεࣗମ͸
 αϒυϝΠϯ౳Ͱఏڙ͢Δέʔε͕ଟ͍ • όϯυϧJS͕ॏ͍݅΋ɺΩϟογϡ͞ΕΕ

    ͹ؾʹͳΒͳ͍ ੩తϖʔδ SPA ϥϯσΟϯάϖʔδ ʢhoge.comʣ αʔϏε ʢapp.hoge.comʣ
  25. αʔόʔϨεSPAͱ͍͏બ୒ࢶ • SPA ͸ index.html ͱόϯυϧJS͑͋͞Ε͹ಈ͘ • αʔόʔαΠυͰߦ͏΂͖ॲཧ͸͢΂ͯ API Λհͯ͠


    Cloud Function ্Ͱߦ͏͜ͱͰɺαʔόʔϨεͳ SPA ͕࣮ݱͰ͖Δ • ExpressͳͲͷWebαʔόʔ͸ෆཁ
  26. αʔόʔϨεSPAߏ੒ྫʢAWS൛ʣ ϒϥ΢β CloudFront ʢCDNʣ S3 ʢStorageʣ Lambda ʢCloud Functionʣ HTML

    / JS / CSS / ը૾ औಘɺૹ৴ɺݕࡧ౳ Ωϟογϡ DynamoDB ʢDatabaseʣ CognitoʢIdentityʣ ೝ ূ σʔλ API Gateway JSON
  27. αʔόʔϨεͷϝϦοτ Πϯελϯε؅ཧ͕ෆཁ εέʔϧ͠΍͍͢ ηΩϡΞ ӡ༻ɾ؅ཧෛՙͷ௿ݮ Մ༻ੑɾ଱ো֐ੑ͕ߴ͍ ॊೈͳεέʔϦϯά͕Մೳ ࢖ͬͨ෼͚͓ͩࢧ෷͍ OSͷηΩϡϦςΟ͸AWS೚ͤ ΞϓϦέʔγϣϯʹ஫ྗ

  28. WebαΠτͷߏங

  29. WebαΠτ WebΞϓϦέʔγϣϯ ϚʔέςΟϯάʢू٬ʣ αʔϏεʢՁ஋ʣͷఏڙ ໨త ໨త खஈ Ϣʔβʔͷཉ͍͠৘ใΛൃ৴͢Δ Ϣʔβʔͷ΍Γ͍ͨ͜ͱΛ࣮ݱ͢Δ खஈ

    ݕࡧΤϯδϯϑϨϯυϦʔͰ͋Δ ฤूऀ͕ίϯςϯπΛฤूͰ͖Δ ෳࡶͳػೳཁٻʹ଱͑ΒΕΔ ඞཁ৚݅ ඞཁ৚݅
  30. ҰൠతͳWebαΠτͷߏஙख๏ • SEO͕ॏཁͳͨΊɺ੩తͳαΠτ͕ϝΠϯ • جຊ͸HTML / CSS • ಈ͖Λ͚ͭΔͨΊʹҰ෦JavaScriptʢjQuery͕ओྲྀʣ •

    ؅ཧը໘͔Β୲౰ऀ͕ฤूͰ͖ΔΑ͏ʹWordPressΛ༻͍Δ
  31. ੈքͷCMSγΣΞʢ2020೥8݄ʣ      8PSE1SFTT 4IPQJGZ +PPNMB %SVQBM

    8JY 4RVBSFTQBDF #JUSJY #MPHHFS .BHFOUP 0QFO$BSU ※ௐࠪର৅αΠτͷ͏ͪɺCMSΛಋೖ͍ͯ͠ΔαΠτ͕59.5% ※ग़యɿhttps://w3techs.com/technologies/overview/content_management 63.5
  32. ೔ຊͷCMSγΣΞʢ2020೥8݄ʣ      8PSE1SFTT "EPCF%SFBNXFBWFS &$$VCF ※ւ֎ʹΑΔ೔ຊͷௐࠪͳͷͰࢀߟఔ౓ʹ

    ※ग़యɿhttps://w3techs.com/technologies/segmentation/cl-ja-/content_management 83.1
  33. WebΞϓϦέʔγϣϯͱͷߔ͕޿͕Δϫέ • SEO͕ॏཁͰ͋Δ • αΠτن໛͕খ͍ͨ͞ΊɺReact΍VueͰ࣮૷Λ͢Δʹ͸ίεύ͕ѱ͍ • jQuery͕ະͩʹݱ໾ͳͷ͸ίεύ͕ྑ͍͔Β • ඇΤϯδχΞ͕ฤूՄೳͰ͋Δඞཁ͕͋ΔʢCMS͕ඞཁʣ

  34. WebΞϓϦέʔγϣϯ WebαΠτ ͍ͭʹɺ͜ͷߔ͕ຒ·Γͭͭ͋Γ·͢

  35. 伴ͱͳΔͷ͕ҎԼͷ̎ͭ • SSGʢελςΟοΫαΠτδΣωϨʔτʣ • ϔουϨεCMS

  36. • HTMLΛࣄલʹੜ੒͢Δख๏ • Gatsby / Next / Nuxt ͷొ৔Ͱɺ
 React΍Vueͱ͍ͬͨߴੑೳͳ


    ϥΠϒϥϦΛWebαΠτ੍࡞ʹ΋
 ౤ೖͰ͖ΔΑ͏ʹͳͬͨ ✅ SEO໰୊ͳ͠ ✅ ࣮૷΋؆୯Ͱɺίεύྑ͠ SSGͷਐԽ
  37. ϔουϨεCMSͷొ৔ σʔλϕʔε API ϒϥ΢β / ΞϓϦ / IoT ฤूऀ ؅ཧը໘

    ʢGUIʣ ϔουϨεCMS
  38. ϔουϨεCMSͷొ৔ • ίϯςϯπ؅ཧը໘ͱදࣔ໘ʢViewʣ͕੾Γ཭͞ΕͨCMS • ϦονͳGUIͰૢ࡞Ͱ͖ɺ͔ͭAPI΋ඪ४૷උͳDBͷΑ͏ͳ΋ͷ • CMSΛReact΍Vueͷதʹ؆୯ʹ૊ΈࠐΉ͜ͱ͕Մೳʹͳͬͨ ✅ CMS΋ΫϦΞ

  39. ༷ʑͳϔουϨεCMS Cosmic WordPress Contentful ButterCMS microCMS GraphCMS Prismic

  40. ϔουϨεCMSͷϝϦοτ දࣔ໘͕ϑϧΧελϚΠζՄೳͳͨΊɺཧ૝ͷαΠτΛ࣮ݱͰ͖·͢ "OESPJEJ04΍ళ಄αΠωʔδɺԻ੠σόΠεͳͲͰ΋ར༻Մೳ αΠτͷߏ଄͕׬શʹࣗ༝ ༷ʑͳνϟωϧͰར༻Մೳ ࠷৽ͷٕज़Λ࢖༻͢Ε͹௒ߴ଎ͳαΠτΛ࡞੒Մೳ ߴ଎ͳαΠτΛ࣮ݱ

  41. Jamstackͷొ৔

  42. None
  43. ࣄલʹੜ੒͞ΕͨHTMLΛCDN͔Β഑৴͢Δ͜ͱͰɺߴ଎Ͱ
 ηΩϡΞͳαΠτΛ࣮ݱ͠·͢ɻ
 ΢Σϒαʔόʔͷ؅ཧ΍࣮ߦ͸ඞཁ͋Γ·ͤΜɻ Fast and secure sites and apps delivered

    by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers. https://jamstack.org/
  44. Jamstackͱ͸ • Netlify CEOͷMatt Biilmannࢯ͕ఏএͨ͠ݴ༿ • SSG + CSRͷϋΠϒϦου •

    ॳظϖʔδ͸ࣄલϏϧυͨ͠੩తϑΝΠϧΛϩʔυ͠ɺϖʔδભҠ࣌ ͸CSRΛߦ͏ • ϝσΟΞͳͲɺ੩తίϯςϯπͷଟ͍αΠτʹ޲͍͍ͯΔ
  45. Α͋͘ΔJamstackͷߏ੒

  46. ϓϦϑΣονʹΑΔϖʔδભҠͷߴ଎Խ • Next / Nuxt ʹ͸ViewableΤϦΞͷϦϯΫઌΛϓϦϑΣον͢Δ ػೳ͕͋Δ • APIϨεϙϯεΛ੩తԽͨ͠JSONϑΝΠϧ΋ର৅ •

    ϒϥ΢βΩϟογϡࡁΈͷϑΝΠϧ͸औಘ͠ʹߦ͔ͳ͍ • ମײతʹ͸ඇৗʹߴ଎
  47. DEMO https://microcms.io/blog

  48. JamstackͷϝϦοτ • ඞཁͳͷ͸੩తϑΝΠϧͷϗεςΟϯάͷΈ • NetlifyɺGitHub PagesɺAmazon S3ɺVercelͳͲʢݸਓར༻ϨϕϧͳΒແྉʣ • APIίʔϧ͸Ϗϧυ࣌ͷΈ •

    APIϦΫΤετ਺ͷ੍ݶ͕͋ͬͯ΋҆৺ • ສ͕ҰɺAPI͕མͪͯ΋҆৺ • ηΩϡΞˍϋΠύϑΥʔϚϯεˍ͍҆
  49. Jamstackʹ࢖͑Δ੩తϗεςΟϯάαʔϏεҰཡ Amazon S3 Google Cloud Microsoft Azure CloudFlare GitHub Pages

    Vercel Firebase Netlify Gatsby Cloud
  50. JamstackͷσϝϦοτ • ϖʔδ਺͕ଟ͍ͱϏϧυʹຖճ͕͔͔࣌ؒͬͯ͠·͏ • ϓϨϏϡʔͷ࣮૷ΛࣗલͰ͢Δඞཁ͕͋Δ • ஌ݟ͕·ͩগͳ͍

  51. Jamstack͸Ϗϧυ͕9ׂ • JamstackͰ࠷΋େࣄͳͷ͸Ϗϧυʂͱݴͬͯ΋աݴͰ͸ͳ͍ • جຊతʹͰ͖ΔݶΓͷॲཧΛϏϧυ࣌ʹࡁ·͢ • ϖʔδੜ੒ʹ͔͔Δ࣌ؒΛͰ͖ΔݶΓݮΒ͢ͷ͕ॏཁ • ϖʔδੜ੒࣌ͷAPIϦΫΤετ਺Λ࠷খݶʹ཈͑Δ •

    ແବͳॲཧΛݮΒ͢
  52. Next.js ͷ Incremental Static Regeneration • SSR / SSG /

    CSR ͷϋΠϒϦου • ॳճΞΫηε࣌͸SSR • ୭͔͕Ұ౓Ͱ΋ΞΫηε͢Ε͹ɺͦͷλΠϛϯάͰSSG͕͞ΕΔ • ϖʔδભҠ࣌͸CSR • TwitterͷσϞ https://static-tweet.now.sh/
  53. • Next.jsΛ։ൃ͍ͯ͠ΔVercel͕ࣾఏڙ͍ͯ͠ΔϗεςΟϯάαʔϏε • αʔόʔαΠυॲཧ΋ಈ࡞͢Δ • ඞཁ࠷௿ݶͳՕॴΛSSR͠ɺͰ͖ΔݶΓSSGͯ͠ύϑΥʔϚϯεͷ
 ࠷େԽΛਤ͍ͬͯΔ • Next.jsʹ͸αʔόʔαΠυ༻ͷػೳ͕݁ߏ͋ΔͷͰɺNetlify΍S3Ͱ͸ े෼ʹ࢖͍͜ͳͤͳ͍

    Vercel
  54. Gatsby ͷ Incremental Builds • Gatsby Cloud্Ͱࠩ෼ϏϧυΛ ߦ͏͜ͱ͕Ͱ͖Δ • ॳճϏϧυ͚͔͔ͩ࣌ؒΔ͕ɺ

    2ճ໨Ҏ߱͸ߴ଎ʢ਺ඵʣ
  55. WebϑϩϯτΤϯυͷτϨϯυ૯ධ • WebαΠτ੍࡞ͱ͍͏؍఺Ͱ͸Jamstackͷొ৔Ͱେ͖ͳมԽ͕
 དྷ͍ͯΔͱײ͡Δ • ҰํͰɺWebΞϓϦέʔγϣϯ։ൃʹ͓͍ͯ͸େہతʹ͸มΘΓͳ͍ • Redux → Hooks

    ͳͲࡉ͔͍มԽ͸ͨ͘͞Μ͋Δ • RustͷϑϩϯτΤϯυ࣮૷ʢYew౳ʣ͕ྲྀߦͬͯ͘ΔͱΨϥοͱ
 มΘΓͦ͏͕ͩɺͲ͏ͳΔ͔ʁ
  56. ·ͱΊ • Jamstackͷొ৔ͰɺWebαΠτͱWebΞϓϦέʔγϣϯͷߔ͸
 ຒ·Γͭͭ͋Δ • WebΞϓϦέʔγϣϯ͸ଟ͘ͷ৔߹ɺSPAͰಛʹ໰୊ͳ͠ • αʔόʔϨεͷԸܙ͕ಘΒΕΔαʔόʔϨεSPAߏ੒͸ߋʹΦεεϝ

  57. Thanks :) !TIJCF