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.2k
SvelteKitでJamstackを試す
shibe97
1
1.2k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
1.2k
CSR / SSR / SSGの動向2020
shibe97
2
1.7k
Jamstack×microCMS 実装編
shibe97
4
980
SentryでSPAのエラーログを収集する
shibe97
1
1.7k
useRefについて調べてみた
shibe97
1
170
フロントエンドエンジニアのキャリアパス
shibe97
9
3.9k
Containerどこに置く?
shibe97
1
1.9k
Other Decks in Technology
See All in Technology
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
130
Findy Team+のSOC2取得までの道のり
rvirus0817
0
330
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
520
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.8k
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
170
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
FastAPIの魔法をgRPC/Connect RPCへ
monotaro
PRO
1
740
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
310
AWSにおけるTrend Vision Oneの効果について
shimak
0
120
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
130
KMP の Swift export
kokihirokawa
0
330
Green Tea Garbage Collector の今
zchee
PRO
2
390
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
339
57k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Side Projects
sachag
455
43k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Scaling GitHub
holman
463
140k
Fireside Chat
paigeccino
40
3.7k
Docker and Python
trallard
46
3.6k
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