Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
Search
Kazuki Shibata
August 27, 2020
Technology
16
4.9k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
Developers Summit 2020 KANSAIの登壇資料です。
Kazuki Shibata
August 27, 2020
Tweet
Share
More Decks by Kazuki Shibata
See All by Kazuki Shibata
microCMSでif文を作る
shibe97
1
1.1k
SvelteKitでJamstackを試す
shibe97
1
1.1k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
1.2k
CSR / SSR / SSGの動向2020
shibe97
2
1.6k
Jamstack×microCMS 実装編
shibe97
4
930
SentryでSPAのエラーログを収集する
shibe97
1
1.7k
useRefについて調べてみた
shibe97
1
150
フロントエンドエンジニアのキャリアパス
shibe97
9
3.8k
Containerどこに置く?
shibe97
1
1.9k
Other Decks in Technology
See All in Technology
ビジネスとデザインとエンジニアリングを繋ぐために 一人のエンジニアは何ができるか / What can a single engineer do to connect business, design, and engineering?
kaminashi
0
110
AIでめっちゃ便利になったけど、結局みんなで学ぶよねっていう話
kakehashi
PRO
0
190
SmartHR プロダクトエンジニア求人ガイド_2025 / PdE job guide 2025
smarthr
0
130
彩の国で始めよう。おっさんエンジニアから共有したい、当たり前のことを当たり前にする技術
otsuki
0
150
The Tale of Leo: Brave Lion and Curious Little Bug
canalun
1
130
プロダクト開発におけるAI時代の開発生産性
shnjtk
2
240
AIコーディングの最前線 〜活用のコツと課題〜
pharma_x_tech
3
1.9k
AI AgentOps LT大会(2025/04/16) Algomatic伊藤発表資料
kosukeito
0
140
新卒エンジニアがCICDをモダナイズしてみた話
akashi_sn
2
250
ガバクラのAWS長期継続割引 ~次の4/1に慌てないために~
hamijay_cloud
1
280
YOLOv10~v12
tenten0727
4
960
クォータ監視、AWS Organizations環境でも楽勝です✌️
iwamot
PRO
1
320
Featured
See All Featured
Statistics for Hackers
jakevdp
798
220k
Unsuck your backbone
ammeep
670
57k
Gamification - CAS2011
davidbonilla
81
5.2k
Making Projects Easy
brettharned
116
6.1k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Producing Creativity
orderedlist
PRO
344
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Transcript
WebϑϩϯτΤϯυͷτϨϯυ ʙ αʔόʔϨεSPAɺJamstack ʙ ࣲా ف / @shibe97 #devsumiA A-3
Υϯλגࣜձࣾ
ࣲా ف / Kazuki Shibata Υϯλגࣜձࣾͷڞಉۀऀ $00ɻ NJDSP$.4ͷσβΠϯɺϑϩϯτ ։ൃΛ͍ͯ͠·͢ɻ +BNTUBDL/FYU/VYU͕͖ɻ
!TIJCF
None
Agenda 1. WebαΠτͱWebΞϓϦέʔγϣϯͷҧ͍ 2. WebΞϓϦέʔγϣϯߏஙͷྺ࢙ 3. WebαΠτͷߏஙख๏ʹ͍ͭͯ 4. ·ͱΊ
WebΞϓϦέʔγϣϯͱ WebαΠτ
WebαΠτ WebΞϓϦέʔγϣϯ ϚʔέςΟϯάʢू٬ʣ αʔϏεʢՁʣͷఏڙ త త खஈ Ϣʔβʔͷཉ͍͠ใΛൃ৴͢Δ ϢʔβʔͷΓ͍ͨ͜ͱΛ࣮ݱ͢Δ खஈ
ݕࡧΤϯδϯϑϨϯυϦʔͰ͋Δ ฤूऀ͕ίϯςϯπΛฤूͰ͖Δ ෳࡶͳػೳཁٻʹ͑ΒΕΔ ඞཁ݅ ඞཁ݅
త͕ҧ͏ͷͰ࡞Γํવҧ͏ React WordPress Vue Gulp
WebΞϓϦέʔγϣϯ WebαΠτ 2ͭͷؒʹඇৗʹେ͖ͳߔ͕͋Δ
WebΞϓϦέʔγϣϯ ߏஙͷྺ࢙
ೋͭͷసػ 1. Ajaxͷొ 2. ϞδϡʔϧγεςϜͷొ γϯάϧϖʔδΞϓϦέʔγϣϯͷੴ ΫϥΠΞϯταΠυʹ͓͚Δ େنΞϓϦέʔγϣϯͷ࣮͕Մೳʹ
None
Ajaxͷੜ • 2005ɺXMLHttpRequestΛ༻͍ͨ ඇಉظ௨৴ΛWebΞϓϦέʔγϣϯʹ ༻͍Δํ๏͕հ͞ΕΔ • Google MapΛൽΓʹരൃతʹීٴ • ੲͷਤ̔ํͷҹϦϯΫͩͬͨ
ओઓΫϥΠΞϯταΠυ • ϖʔδભҠͷͨͼʹຖճαʔόʔ͔ΒHTMLΛฦͯ͠Β͏ͷ͍ ʢ࣌ͷωοτϫʔΫڥͷ͍ͤͰ͋Δʣ • ඞཁͳσʔλ͚ͩAjaxͰऔಘ͠Α͏ γϯάϧϖʔδΞϓϦέʔγϣϯʢSPAʣͷ࣌
MVCઃܭͷಋೖ 1. jQueryͷݶք 2. MVCઃܭ jQuery͚ͩͰSPAΛ࡞Δʹঢ়ଶཧ͕ෳࡶ Ͱݶք͕͋ͬͨ αʔόʔαΠυͷϑϨʔϜϫʔΫʢCakePHP Strutsʣʹश͍ɺΫϥΠΞϯταΠυ MVCઃܭΛಋೖ͢ΔྲྀΕ͕ग़͖ͯͨ
Model Controller View
JSϑϨʔϜϫʔΫઓࠃ࣌ Ember Angular React Vue Riot Backbone Marionette Knockout Mithril
None
ͦΕͰSPAෳࡶͩͬͨ • ࣌ͷJavaScriptʹϞδϡʔϧγεςϜʢrequireʣ͕ແ͔ͬͨͨΊ ॲཧͷׂ͕ͮ͠Β͔ͬͨ • άϩʔόϧͳ໊લۭؒͰϞδϡʔϧΛར༻͢Δํࣜ • ScriptͷಡΈࠐΈॱ൪Ͱόά͕ൃੜ͢Δ
ϞδϡʔϧγεςϜͷొ 1. Ϟδϡʔϧͷґଘղܾ 2. ΞϓϦέʔγϣϯͷߏԽ Node.jsଆͰ࣮͕ਐΜͰ͍ͨϞδϡʔϧͷ ґଘղܾػߏΛΫϥΠΞϯταΠυJSͰ ѻ͑ΔΑ͏ʹͳΔΈ͕ొ ͜ΕʹΑΓϞδϡʔϧͷ࠶ར༻͕͘͢͠ ͳΓɺJavaScriptͰେنͳ
ΞϓϦέʔγϣϯΛߏங͘͢͠ͳͬͨ
Fluxͷొʢ2014ʣ • Facebook͕ఏএͨ͠ΞʔΩςΫνϟ • MVCͷεέʔϧ͠ͳ͍Λղܾ͢Δ • σʔλͷྲྀΕΛҰํʹ͢Δ
FluxϑϨʔϜϫʔΫઓࠃ࣌ • Flux • Fluxxor • Flexible • NuclearJS •
Redux
SPAͷ JavaScriptͰಈతʹϖʔδΛߏங͢ΔͨΊɺΫϩʔϥʔ͕ղऍͮ͠Β͍ SEO͕ऑ͍ ࠷ॳʹόϯυϧ͞ΕͨJSΛಡΈࠐΉͨΊɺॳظϩʔυʹ͕͔͔࣌ؒΔ ॳظϩʔυ͕͍
SSR ͱΈ߹ΘͤΔղܾࡦ • ॳظϩʔυ࣌αʔόʔαΠυϨϯμϦϯάʢSSRʣ • ϋΠυϨʔγϣϯΛߦ͍ɺϖʔδભҠҎ߱SPAͷΑ͏ͳڍಈΛͤ͞Δ • SPAʹ͓͚ΔSEOॳظϩʔυԆͱ͍ͬͨܽΛิͬͨߏ • ࣮қ͕ߴ͍
Next / Nuxtͷొ • ϑΝΠϧγεςϜʹج͍ͮͨϧʔςΟϯά • SSRॲཧͷେΛϑϨʔϜϫʔΫଆ͕୲ͬͯ͘ΕΔ • ෳࡶͳWebpackBabelͷઃఆ͕ӅṭͰ͖Δ
ͦͦSSR͕ඞཁͳέʔεଟ͘ͳ͍ • ʮαʔϏεͷఏڙʯʹ͓͍ͯSEO͕ॏཁ ͱͳΔέʔεͦΜͳʹଟ͘ͳ͍ • SEO͕ॏཁͰ͋ΔϥϯσΟϯάϖʔδͷΈ SPA֎Ͱ৴͠ɺαʔϏεࣗମ αϒυϝΠϯͰఏڙ͢Δέʔε͕ଟ͍ • όϯυϧJS͕ॏ͍݅ɺΩϟογϡ͞ΕΕ
ؾʹͳΒͳ͍ ੩తϖʔδ SPA ϥϯσΟϯάϖʔδ ʢhoge.comʣ αʔϏε ʢapp.hoge.comʣ
αʔόʔϨεSPAͱ͍͏બࢶ • SPA index.html ͱόϯυϧJS͑͋͞Εಈ͘ • αʔόʔαΠυͰߦ͏͖ॲཧͯ͢ API Λհͯ͠
Cloud Function ্Ͱߦ͏͜ͱͰɺαʔόʔϨεͳ SPA ͕࣮ݱͰ͖Δ • ExpressͳͲͷWebαʔόʔෆཁ
αʔόʔϨεSPAߏྫʢAWS൛ʣ ϒϥβ CloudFront ʢCDNʣ S3 ʢStorageʣ Lambda ʢCloud Functionʣ HTML
/ JS / CSS / ը૾ औಘɺૹ৴ɺݕࡧ Ωϟογϡ DynamoDB ʢDatabaseʣ CognitoʢIdentityʣ ೝ ূ σʔλ API Gateway JSON
αʔόʔϨεͷϝϦοτ Πϯελϯεཧ͕ෆཁ εέʔϧ͍͢͠ ηΩϡΞ ӡ༻ɾཧෛՙͷݮ Մ༻ੑɾোੑ͕ߴ͍ ॊೈͳεέʔϦϯά͕Մೳ ͚͓ͬͨͩࢧ͍ OSͷηΩϡϦςΟAWSͤ ΞϓϦέʔγϣϯʹྗ
WebαΠτͷߏங
WebαΠτ WebΞϓϦέʔγϣϯ ϚʔέςΟϯάʢू٬ʣ αʔϏεʢՁʣͷఏڙ త త खஈ Ϣʔβʔͷཉ͍͠ใΛൃ৴͢Δ ϢʔβʔͷΓ͍ͨ͜ͱΛ࣮ݱ͢Δ खஈ
ݕࡧΤϯδϯϑϨϯυϦʔͰ͋Δ ฤूऀ͕ίϯςϯπΛฤूͰ͖Δ ෳࡶͳػೳཁٻʹ͑ΒΕΔ ඞཁ݅ ඞཁ݅
ҰൠతͳWebαΠτͷߏஙख๏ • SEO͕ॏཁͳͨΊɺ੩తͳαΠτ͕ϝΠϯ • جຊHTML / CSS • ಈ͖Λ͚ͭΔͨΊʹҰ෦JavaScriptʢjQuery͕ओྲྀʣ •
ཧը໘͔Β୲ऀ͕ฤूͰ͖ΔΑ͏ʹWordPressΛ༻͍Δ
ੈքͷCMSγΣΞʢ20208݄ʣ 8PSE1SFTT 4IPQJGZ +PPNMB %SVQBM
8JY 4RVBSFTQBDF #JUSJY #MPHHFS .BHFOUP 0QFO$BSU ※ௐࠪରαΠτͷ͏ͪɺCMSΛಋೖ͍ͯ͠ΔαΠτ͕59.5% ※ग़యɿhttps://w3techs.com/technologies/overview/content_management 63.5
ຊͷCMSγΣΞʢ20208݄ʣ 8PSE1SFTT "EPCF%SFBNXFBWFS &$$VCF ※ւ֎ʹΑΔຊͷௐࠪͳͷͰࢀߟఔʹ
※ग़యɿhttps://w3techs.com/technologies/segmentation/cl-ja-/content_management 83.1
WebΞϓϦέʔγϣϯͱͷߔ͕͕Δϫέ • SEO͕ॏཁͰ͋Δ • αΠτن͕খ͍ͨ͞ΊɺReactVueͰ࣮Λ͢Δʹίεύ͕ѱ͍ • jQuery͕ະͩʹݱͳͷίεύ͕ྑ͍͔Β • ඇΤϯδχΞ͕ฤूՄೳͰ͋Δඞཁ͕͋ΔʢCMS͕ඞཁʣ
WebΞϓϦέʔγϣϯ WebαΠτ ͍ͭʹɺ͜ͷߔ͕ຒ·Γͭͭ͋Γ·͢
伴ͱͳΔͷ͕ҎԼͷ̎ͭ • SSGʢελςΟοΫαΠτδΣωϨʔτʣ • ϔουϨεCMS
• HTMLΛࣄલʹੜ͢Δख๏ • Gatsby / Next / Nuxt ͷొͰɺ ReactVueͱ͍ͬͨߴੑೳͳ
ϥΠϒϥϦΛWebαΠτ੍࡞ʹ ೖͰ͖ΔΑ͏ʹͳͬͨ ✅ SEOͳ͠ ✅ ࣮؆୯Ͱɺίεύྑ͠ SSGͷਐԽ
ϔουϨεCMSͷొ σʔλϕʔε API ϒϥβ / ΞϓϦ / IoT ฤूऀ ཧը໘
ʢGUIʣ ϔουϨεCMS
ϔουϨεCMSͷొ • ίϯςϯπཧը໘ͱදࣔ໘ʢViewʣ͕Γ͞ΕͨCMS • ϦονͳGUIͰૢ࡞Ͱ͖ɺ͔ͭAPIඪ४උͳDBͷΑ͏ͳͷ • CMSΛReactVueͷதʹ؆୯ʹΈࠐΉ͜ͱ͕Մೳʹͳͬͨ ✅ CMSΫϦΞ
༷ʑͳϔουϨεCMS Cosmic WordPress Contentful ButterCMS microCMS GraphCMS Prismic
ϔουϨεCMSͷϝϦοτ දࣔ໘͕ϑϧΧελϚΠζՄೳͳͨΊɺཧͷαΠτΛ࣮ݱͰ͖·͢ "OESPJEJ04ళ಄αΠωʔδɺԻσόΠεͳͲͰར༻Մೳ αΠτͷߏ͕શʹࣗ༝ ༷ʑͳνϟωϧͰར༻Մೳ ࠷৽ͷٕज़Λ༻͢ΕߴͳαΠτΛ࡞Մೳ ߴͳαΠτΛ࣮ݱ
Jamstackͷొ
None
ࣄલʹੜ͞Εͨ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/
Jamstackͱ • Netlify CEOͷMatt Biilmannࢯ͕ఏএͨ͠ݴ༿ • SSG + CSRͷϋΠϒϦου •
ॳظϖʔδࣄલϏϧυͨ͠੩తϑΝΠϧΛϩʔυ͠ɺϖʔδભҠ࣌ CSRΛߦ͏ • ϝσΟΞͳͲɺ੩తίϯςϯπͷଟ͍αΠτʹ͍͍ͯΔ
Α͋͘ΔJamstackͷߏ
ϓϦϑΣονʹΑΔϖʔδભҠͷߴԽ • Next / Nuxt ʹViewableΤϦΞͷϦϯΫઌΛϓϦϑΣον͢Δ ػೳ͕͋Δ • APIϨεϙϯεΛ੩తԽͨ͠JSONϑΝΠϧର •
ϒϥβΩϟογϡࡁΈͷϑΝΠϧऔಘ͠ʹߦ͔ͳ͍ • ମײతʹඇৗʹߴ
DEMO https://microcms.io/blog
JamstackͷϝϦοτ • ඞཁͳͷ੩తϑΝΠϧͷϗεςΟϯάͷΈ • NetlifyɺGitHub PagesɺAmazon S3ɺVercelͳͲʢݸਓར༻ϨϕϧͳΒແྉʣ • APIίʔϧϏϧυ࣌ͷΈ •
APIϦΫΤετͷ੍ݶ͕͋ͬͯ҆৺ • ສ͕ҰɺAPI͕མͪͯ҆৺ • ηΩϡΞˍϋΠύϑΥʔϚϯεˍ͍҆
Jamstackʹ͑Δ੩తϗεςΟϯάαʔϏεҰཡ Amazon S3 Google Cloud Microsoft Azure CloudFlare GitHub Pages
Vercel Firebase Netlify Gatsby Cloud
JamstackͷσϝϦοτ • ϖʔδ͕ଟ͍ͱϏϧυʹຖճ͕͔͔࣌ؒͬͯ͠·͏ • ϓϨϏϡʔͷ࣮ΛࣗલͰ͢Δඞཁ͕͋Δ • ݟ͕·ͩগͳ͍
JamstackϏϧυ͕9ׂ • JamstackͰ࠷େࣄͳͷϏϧυʂͱݴͬͯաݴͰͳ͍ • جຊతʹͰ͖ΔݶΓͷॲཧΛϏϧυ࣌ʹࡁ·͢ • ϖʔδੜʹ͔͔Δ࣌ؒΛͰ͖ΔݶΓݮΒ͢ͷ͕ॏཁ • ϖʔδੜ࣌ͷAPIϦΫΤετΛ࠷খݶʹ͑Δ •
ແବͳॲཧΛݮΒ͢
Next.js ͷ Incremental Static Regeneration • SSR / SSG /
CSR ͷϋΠϒϦου • ॳճΞΫηε࣌SSR • ୭͔͕ҰͰΞΫηε͢ΕɺͦͷλΠϛϯάͰSSG͕͞ΕΔ • ϖʔδભҠ࣌CSR • TwitterͷσϞ https://static-tweet.now.sh/
• Next.jsΛ։ൃ͍ͯ͠ΔVercel͕ࣾఏڙ͍ͯ͠ΔϗεςΟϯάαʔϏε • αʔόʔαΠυॲཧಈ࡞͢Δ • ඞཁ࠷ݶͳՕॴΛSSR͠ɺͰ͖ΔݶΓSSGͯ͠ύϑΥʔϚϯεͷ ࠷େԽΛਤ͍ͬͯΔ • Next.jsʹαʔόʔαΠυ༻ͷػೳ͕݁ߏ͋ΔͷͰɺNetlifyS3Ͱ ेʹ͍͜ͳͤͳ͍
Vercel
Gatsby ͷ Incremental Builds • Gatsby Cloud্ͰࠩϏϧυΛ ߦ͏͜ͱ͕Ͱ͖Δ • ॳճϏϧυ͚͔͔ͩ࣌ؒΔ͕ɺ
2ճҎ߱ߴʢඵʣ
WebϑϩϯτΤϯυͷτϨϯυ૯ධ • WebαΠτ੍࡞ͱ͍͏؍ͰJamstackͷొͰେ͖ͳมԽ͕ དྷ͍ͯΔͱײ͡Δ • ҰํͰɺWebΞϓϦέʔγϣϯ։ൃʹ͓͍ͯେہతʹมΘΓͳ͍ • Redux → Hooks
ͳͲࡉ͔͍มԽͨ͘͞Μ͋Δ • RustͷϑϩϯτΤϯυ࣮ʢYewʣ͕ྲྀߦͬͯ͘ΔͱΨϥοͱ มΘΓͦ͏͕ͩɺͲ͏ͳΔ͔ʁ
·ͱΊ • JamstackͷొͰɺWebαΠτͱWebΞϓϦέʔγϣϯͷߔ ຒ·Γͭͭ͋Δ • WebΞϓϦέʔγϣϯଟ͘ͷ߹ɺSPAͰಛʹͳ͠ • αʔόʔϨεͷԸܙ͕ಘΒΕΔαʔόʔϨεSPAߏߋʹΦεεϝ
Thanks :) !TIJCF