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.8k
フロントエンドのトレンド〜サーバーレス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
920
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
Medmain FACTBOOK
akinaootani
0
110
ウェブアクセシビリティとは
lycorptech_jp
PRO
0
290
製造業の会計システムをDDDで開発した話
caddi_eng
3
980
コード品質向上で得られる効果と実践的取り組み
ham0215
2
200
React Server Componentは 何を解決し何を解決しないのか / What do React Server Components solve, and what do they not solve?
kaminashi
6
1.2k
AIエージェントキャッチアップと論文リサーチ
os1ma
6
1.2k
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
140
OCI見積もり入門セミナー
oracle4engineer
PRO
0
120
チームビルディング「脅威モデリング」ワークショップ
koheiyoshikawa
0
150
技術好きなエンジニアが _リーダーへの進化_ によって得たものと失ったもの / The Gains and Losses of a Tech-Enthusiast Engineer’s “Evolution into Leadership”
kaminashi
0
210
Go の analysis パッケージで自作するリファクタリングツール
kworkdev
PRO
1
420
LINE Notify互換のボットを作った話
kenichirokimura
0
180
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
12
610
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Done Done
chrislema
183
16k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A Philosophy of Restraint
colly
203
16k
Rails Girls Zürich Keynote
gr2m
94
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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