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.6k
Jamstack×microCMS 実装編
shibe97
4
970
SentryでSPAのエラーログを収集する
shibe97
1
1.7k
useRefについて調べてみた
shibe97
1
160
フロントエンドエンジニアのキャリアパス
shibe97
9
3.8k
Containerどこに置く?
shibe97
1
1.9k
Other Decks in Technology
See All in Technology
事業価値と Engineering
recruitengineers
PRO
1
200
Goss: Faiss向けの新しい本番環境対応 Goバインディング #coefl_go_jp
bengo4com
0
1.4k
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
2
150
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
1
2.2k
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
5
1.5k
[OCI Skill Mapping] AWSユーザーのためのOCI(2025年8月20日開催)
oracle4engineer
PRO
2
140
EKS Pod Identity における推移的な session tags
z63d
1
200
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
180
LLMエージェント時代に適応した開発フロー
hiragram
1
410
あとはAIに任せて人間は自由に生きる
kentaro
3
1.1k
自社製CMSからmicroCMSへのリプレースがプロダクトグロースを加速させた話
nextbeatdev
0
130
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
Designing for humans not robots
tammielis
253
25k
Done Done
chrislema
185
16k
What's in a price? How to price your products and services
michaelherold
246
12k
YesSQL, Process and Tooling at Scale
rocio
173
14k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Writing Fast Ruby
sferik
628
62k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
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