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

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

Transcript

1. WebϑϩϯτΤϯυͷτϨϯυ ʙ αʔόʔϨεSPAɺJamstack ʙ ࣲా ࿨ف / @shibe97 #devsumiA A-3 ΢Υϯλגࣜձࣾ
2. ࣲా ࿨ف / Kazuki Shibata ΢Υϯλגࣜձࣾͷڞಉ૑ۀऀ $00ɻ
   NJDSP$.4ͷσβΠϯɺϑϩϯτ
 ։ൃΛ͍ͯ͠·͢ɻ
   +BNTUBDL
   
   /FYU
   
   /VYU
   ͕޷͖ɻ !TIJCF
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. ϞδϡʔϧγεςϜͷొ৔ γϯάϧϖʔδΞϓϦέʔγϣϯ΁ͷ෍ੴ ΫϥΠΞϯταΠυʹ͓͚Δ
 େن໛ΞϓϦέʔγϣϯͷ࣮૷͕Մೳʹ
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
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ͷొ৔
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