Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Kazuki Shibata

August 27, 2020
Tweet

More Decks by Kazuki Shibata

Other Decks in Technology

Transcript

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

    View full-size slide

  2. ࣲా ࿨ف / Kazuki Shibata
    ΢Υϯλגࣜձࣾͷڞಉ૑ۀऀ
    $00ɻ
    NJDSP$.4ͷσβΠϯɺϑϩϯτ

    ։ൃΛ͍ͯ͠·͢ɻ
    +BNTUBDL/FYU/VYU͕޷͖ɻ
    !TIJCF

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. WebαΠτ
    WebΞϓϦέʔγϣϯ
    ϚʔέςΟϯάʢू٬ʣ
    αʔϏεʢՁ஋ʣͷఏڙ
    ໨త ໨త
    खஈ
    Ϣʔβʔͷཉ͍͠৘ใΛൃ৴͢Δ
    Ϣʔβʔͷ΍Γ͍ͨ͜ͱΛ࣮ݱ͢Δ
    खஈ
    ݕࡧΤϯδϯϑϨϯυϦʔͰ͋Δ
    ฤूऀ͕ίϯςϯπΛฤूͰ͖Δ
    ෳࡶͳػೳཁٻʹ଱͑ΒΕΔ
    ඞཁ৚݅ ඞཁ৚݅

    View full-size slide

  6. ໨త͕ҧ͏ͷͰ࡞Γํ΋౰વҧ͏
    React WordPress Vue Gulp

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    େن໛ΞϓϦέʔγϣϯͷ࣮૷͕Մೳʹ

    View full-size slide

  10. Ajaxͷ஀ੜ
    • 2005೥ɺXMLHttpRequestΛ༻͍ͨ

    ඇಉظ௨৴ΛWebΞϓϦέʔγϣϯʹ

    ༻͍Δํ๏͕঺հ͞ΕΔ
    • Google MapΛൽ੾Γʹരൃతʹීٴ
    • ੲͷ஍ਤ͸̔ํ޲ͷ໼ҹϦϯΫͩͬͨ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. ϞδϡʔϧγεςϜͷొ৔ 1. Ϟδϡʔϧͷґଘղܾ
    2. ΞϓϦέʔγϣϯͷߏ଄Խ
    Node.jsଆͰ࣮૷͕ਐΜͰ͍ͨϞδϡʔϧͷ

    ґଘղܾػߏΛΫϥΠΞϯταΠυJSͰ΋
    ѻ͑ΔΑ͏ʹͳΔ࢓૊Έ͕ొ৔
    ͜ΕʹΑΓϞδϡʔϧͷ࠶ར༻͕͠΍͘͢
    ͳΓɺJavaScriptͰ΋େن໛ͳ

    ΞϓϦέʔγϣϯΛߏங͠΍͘͢ͳͬͨ

    View full-size slide

  16. Fluxͷొ৔ʢ2014೥ʣ
    • Facebook͕ఏএͨ͠ΞʔΩςΫνϟ
    • MVCͷεέʔϧ͠ͳ͍໰୊Λղܾ͢Δ
    • σʔλͷྲྀΕΛҰํ޲ʹ͢Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. ͦ΋ͦ΋SSR͕ඞཁͳέʔε͸ଟ͘ͳ͍
    • ʮαʔϏεͷఏڙʯʹ͓͍ͯ͸SEO͕ॏཁ
    ͱͳΔέʔε͸ͦΜͳʹଟ͘ͳ͍
    • SEO͕ॏཁͰ͋ΔϥϯσΟϯάϖʔδͷΈ
    SPA֎Ͱ഑৴͠ɺαʔϏεࣗମ͸

    αϒυϝΠϯ౳Ͱఏڙ͢Δέʔε͕ଟ͍
    • όϯυϧJS͕ॏ͍݅΋ɺΩϟογϡ͞ΕΕ
    ͹ؾʹͳΒͳ͍
    ੩తϖʔδ SPA
    ϥϯσΟϯάϖʔδ
    ʢhoge.comʣ
    αʔϏε
    ʢapp.hoge.comʣ

    View full-size slide

  22. αʔόʔϨεSPAͱ͍͏બ୒ࢶ
    • SPA ͸ index.html ͱόϯυϧJS͑͋͞Ε͹ಈ͘
    • αʔόʔαΠυͰߦ͏΂͖ॲཧ͸͢΂ͯ API Λհͯ͠

    Cloud Function ্Ͱߦ͏͜ͱͰɺαʔόʔϨεͳ SPA ͕࣮ݱͰ͖Δ
    • ExpressͳͲͷWebαʔόʔ͸ෆཁ

    View full-size slide

  23. αʔόʔϨεSPAߏ੒ྫʢAWS൛ʣ
    ϒϥ΢β
    CloudFront
    ʢCDNʣ
    S3
    ʢStorageʣ
    Lambda
    ʢCloud Functionʣ
    HTML / JS / CSS / ը૾
    औಘɺૹ৴ɺݕࡧ౳
    Ωϟογϡ
    DynamoDB
    ʢDatabaseʣ
    CognitoʢIdentityʣ


    σʔλ
    API Gateway
    JSON

    View full-size slide

  24. αʔόʔϨεͷϝϦοτ
    Πϯελϯε؅ཧ͕ෆཁ εέʔϧ͠΍͍͢ ηΩϡΞ
    ӡ༻ɾ؅ཧෛՙͷ௿ݮ
    Մ༻ੑɾ଱ো֐ੑ͕ߴ͍
    ॊೈͳεέʔϦϯά͕Մೳ
    ࢖ͬͨ෼͚͓ͩࢧ෷͍
    OSͷηΩϡϦςΟ͸AWS೚ͤ
    ΞϓϦέʔγϣϯʹ஫ྗ

    View full-size slide

  25. WebαΠτͷߏங

    View full-size slide

  26. WebαΠτ
    WebΞϓϦέʔγϣϯ
    ϚʔέςΟϯάʢू٬ʣ
    αʔϏεʢՁ஋ʣͷఏڙ
    ໨త ໨త
    खஈ
    Ϣʔβʔͷཉ͍͠৘ใΛൃ৴͢Δ
    Ϣʔβʔͷ΍Γ͍ͨ͜ͱΛ࣮ݱ͢Δ
    खஈ
    ݕࡧΤϯδϯϑϨϯυϦʔͰ͋Δ
    ฤूऀ͕ίϯςϯπΛฤूͰ͖Δ
    ෳࡶͳػೳཁٻʹ଱͑ΒΕΔ
    ඞཁ৚݅ ඞཁ৚݅

    View full-size slide

  27. ҰൠతͳWebαΠτͷߏஙख๏
    • SEO͕ॏཁͳͨΊɺ੩తͳαΠτ͕ϝΠϯ
    • جຊ͸HTML / CSS
    • ಈ͖Λ͚ͭΔͨΊʹҰ෦JavaScriptʢjQuery͕ओྲྀʣ
    • ؅ཧը໘͔Β୲౰ऀ͕ฤूͰ͖ΔΑ͏ʹWordPressΛ༻͍Δ

    View full-size slide

  28. ੈքͷ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

    View full-size slide

  29. ೔ຊͷCMSγΣΞʢ2020೥8݄ʣ





    8PSE1SFTT "EPCF%SFBNXFBWFS &$$VCF
    ※ւ֎ʹΑΔ೔ຊͷௐࠪͳͷͰࢀߟఔ౓ʹ
    ※ग़యɿhttps://w3techs.com/technologies/segmentation/cl-ja-/content_management
    83.1

    View full-size slide

  30. WebΞϓϦέʔγϣϯͱͷߔ͕޿͕Δϫέ
    • SEO͕ॏཁͰ͋Δ
    • αΠτن໛͕খ͍ͨ͞ΊɺReact΍VueͰ࣮૷Λ͢Δʹ͸ίεύ͕ѱ͍
    • jQuery͕ະͩʹݱ໾ͳͷ͸ίεύ͕ྑ͍͔Β
    • ඇΤϯδχΞ͕ฤूՄೳͰ͋Δඞཁ͕͋ΔʢCMS͕ඞཁʣ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. • HTMLΛࣄલʹੜ੒͢Δख๏
    • Gatsby / Next / Nuxt ͷొ৔Ͱɺ

    React΍Vueͱ͍ͬͨߴੑೳͳ

    ϥΠϒϥϦΛWebαΠτ੍࡞ʹ΋

    ౤ೖͰ͖ΔΑ͏ʹͳͬͨ
    ✅ SEO໰୊ͳ͠
    ✅ ࣮૷΋؆୯Ͱɺίεύྑ͠
    SSGͷਐԽ

    View full-size slide

  34. ϔουϨεCMSͷొ৔
    σʔλϕʔε
    API
    ϒϥ΢β / ΞϓϦ / IoT
    ฤूऀ
    ؅ཧը໘
    ʢGUIʣ
    ϔουϨεCMS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Jamstackͷొ৔

    View full-size slide

  39. ࣄલʹੜ੒͞Εͨ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/

    View full-size slide

  40. Jamstackͱ͸
    • Netlify CEOͷMatt Biilmannࢯ͕ఏএͨ͠ݴ༿
    • SSG + CSRͷϋΠϒϦου
    • ॳظϖʔδ͸ࣄલϏϧυͨ͠੩తϑΝΠϧΛϩʔυ͠ɺϖʔδભҠ࣌
    ͸CSRΛߦ͏
    • ϝσΟΞͳͲɺ੩తίϯςϯπͷଟ͍αΠτʹ޲͍͍ͯΔ

    View full-size slide

  41. Α͋͘ΔJamstackͷߏ੒

    View full-size slide

  42. ϓϦϑΣονʹΑΔϖʔδભҠͷߴ଎Խ
    • Next / Nuxt ʹ͸ViewableΤϦΞͷϦϯΫઌΛϓϦϑΣον͢Δ
    ػೳ͕͋Δ
    • APIϨεϙϯεΛ੩తԽͨ͠JSONϑΝΠϧ΋ର৅
    • ϒϥ΢βΩϟογϡࡁΈͷϑΝΠϧ͸औಘ͠ʹߦ͔ͳ͍
    • ମײతʹ͸ඇৗʹߴ଎

    View full-size slide

  43. DEMO
    https://microcms.io/blog

    View full-size slide

  44. JamstackͷϝϦοτ
    • ඞཁͳͷ͸੩తϑΝΠϧͷϗεςΟϯάͷΈ
    • NetlifyɺGitHub PagesɺAmazon S3ɺVercelͳͲʢݸਓར༻ϨϕϧͳΒແྉʣ
    • APIίʔϧ͸Ϗϧυ࣌ͷΈ
    • APIϦΫΤετ਺ͷ੍ݶ͕͋ͬͯ΋҆৺
    • ສ͕ҰɺAPI͕མͪͯ΋҆৺
    • ηΩϡΞˍϋΠύϑΥʔϚϯεˍ͍҆

    View full-size slide

  45. Jamstackʹ࢖͑Δ੩తϗεςΟϯάαʔϏεҰཡ
    Amazon S3 Google Cloud Microsoft Azure CloudFlare
    GitHub Pages Vercel Firebase Netlify Gatsby Cloud

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. Next.js ͷ Incremental Static Regeneration
    • SSR / SSG / CSR ͷϋΠϒϦου
    • ॳճΞΫηε࣌͸SSR
    • ୭͔͕Ұ౓Ͱ΋ΞΫηε͢Ε͹ɺͦͷλΠϛϯάͰSSG͕͞ΕΔ
    • ϖʔδભҠ࣌͸CSR
    • TwitterͷσϞ
    https://static-tweet.now.sh/

    View full-size slide

  49. • Next.jsΛ։ൃ͍ͯ͠ΔVercel͕ࣾఏڙ͍ͯ͠ΔϗεςΟϯάαʔϏε
    • αʔόʔαΠυॲཧ΋ಈ࡞͢Δ
    • ඞཁ࠷௿ݶͳՕॴΛSSR͠ɺͰ͖ΔݶΓSSGͯ͠ύϑΥʔϚϯεͷ

    ࠷େԽΛਤ͍ͬͯΔ
    • Next.jsʹ͸αʔόʔαΠυ༻ͷػೳ͕݁ߏ͋ΔͷͰɺNetlify΍S3Ͱ͸
    े෼ʹ࢖͍͜ͳͤͳ͍
    Vercel

    View full-size slide

  50. Gatsby ͷ Incremental Builds
    • Gatsby Cloud্Ͱࠩ෼ϏϧυΛ
    ߦ͏͜ͱ͕Ͱ͖Δ
    • ॳճϏϧυ͚͔͔ͩ࣌ؒΔ͕ɺ
    2ճ໨Ҏ߱͸ߴ଎ʢ਺ඵʣ

    View full-size slide

  51. WebϑϩϯτΤϯυͷτϨϯυ૯ධ
    • WebαΠτ੍࡞ͱ͍͏؍఺Ͱ͸Jamstackͷొ৔Ͱେ͖ͳมԽ͕

    དྷ͍ͯΔͱײ͡Δ
    • ҰํͰɺWebΞϓϦέʔγϣϯ։ൃʹ͓͍ͯ͸େہతʹ͸มΘΓͳ͍
    • Redux → Hooks ͳͲࡉ͔͍มԽ͸ͨ͘͞Μ͋Δ
    • RustͷϑϩϯτΤϯυ࣮૷ʢYew౳ʣ͕ྲྀߦͬͯ͘ΔͱΨϥοͱ

    มΘΓͦ͏͕ͩɺͲ͏ͳΔ͔ʁ

    View full-size slide

  52. ·ͱΊ
    • Jamstackͷొ৔ͰɺWebαΠτͱWebΞϓϦέʔγϣϯͷߔ͸

    ຒ·Γͭͭ͋Δ
    • WebΞϓϦέʔγϣϯ͸ଟ͘ͷ৔߹ɺSPAͰಛʹ໰୊ͳ͠
    • αʔόʔϨεͷԸܙ͕ಘΒΕΔαʔόʔϨεSPAߏ੒͸ߋʹΦεεϝ

    View full-size slide

  53. Thanks :)
    !TIJCF

    View full-size slide