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
940
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
Javaアプリケーションの配布とパッケージング / Distribution and packaging of Java applications
hogelog
1
120
ローカル環境でAIを動かそう!
falken
PRO
1
170
AIオンボーディングとAIプロセスマイニング
nrryuya
5
1.3k
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
740
オープンソースのハードウェアのコンテストに参加している話
iotengineer22
0
530
S3 Tables を図解でやさしくおさらい~基本から QuickSight 連携まで/s3-tables-illustrated-basics-quicksight
emiki
1
330
SmartHRの複数のチームにおけるMCPサーバーの活用事例と課題
yukisnow1823
2
1.2k
What's Next in OpenShift Q2 CY2025
redhatlivestreaming
1
790
ソフトウェアテストのAI活用_ver1.10
fumisuke
0
230
KMP導⼊において、マネジャーとして考えた事
sansantech
PRO
1
210
データ戦略部門 紹介資料
sansan33
PRO
1
3.1k
JNation 2025 - Quarkus for Spring Developers
edeandrea
PRO
0
110
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
Become a Pro
speakerdeck
PRO
28
5.4k
Thoughts on Productivity
jonyablonski
69
4.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Scaling GitHub
holman
459
140k
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