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

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

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