Developers Summit 2020 KANSAIの登壇資料です。
WebϑϩϯτΤϯυͷτϨϯυʙ αʔόʔϨεSPAɺJamstack ʙࣲా ف / @shibe97 #devsumiAA-3Υϯλגࣜձࣾ
View Slide
ࣲా ف / Kazuki ShibataΥϯλגࣜձࣾͷڞಉۀऀ$00ɻNJDSP$.4ͷσβΠϯɺϑϩϯτ ։ൃΛ͍ͯ͠·͢ɻ+BNTUBDL/FYU/VYU͕͖ɻ!TIJCF
Agenda1. WebαΠτͱWebΞϓϦέʔγϣϯͷҧ͍2. WebΞϓϦέʔγϣϯߏஙͷྺ࢙3. WebαΠτͷߏஙख๏ʹ͍ͭͯ4. ·ͱΊ
WebΞϓϦέʔγϣϯͱWebαΠτ
WebαΠτWebΞϓϦέʔγϣϯϚʔέςΟϯάʢू٬ʣαʔϏεʢՁʣͷఏڙత తखஈϢʔβʔͷཉ͍͠ใΛൃ৴͢ΔϢʔβʔͷΓ͍ͨ͜ͱΛ࣮ݱ͢ΔखஈݕࡧΤϯδϯϑϨϯυϦʔͰ͋Δฤूऀ͕ίϯςϯπΛฤूͰ͖Δෳࡶͳػೳཁٻʹ͑ΒΕΔඞཁ݅ ඞཁ݅
త͕ҧ͏ͷͰ࡞Γํવҧ͏React WordPress Vue Gulp
WebΞϓϦέʔγϣϯ WebαΠτ2ͭͷؒʹඇৗʹେ͖ͳߔ͕͋Δ
WebΞϓϦέʔγϣϯߏஙͷྺ࢙
ೋͭͷసػ 1. Ajaxͷొ2. ϞδϡʔϧγεςϜͷొγϯάϧϖʔδΞϓϦέʔγϣϯͷੴΫϥΠΞϯταΠυʹ͓͚Δ େنΞϓϦέʔγϣϯͷ࣮͕Մೳʹ
Ajaxͷੜ• 2005ɺXMLHttpRequestΛ༻͍ͨ ඇಉظ௨৴ΛWebΞϓϦέʔγϣϯʹ ༻͍Δํ๏͕հ͞ΕΔ• Google MapΛൽΓʹരൃతʹීٴ• ੲͷਤ̔ํͷҹϦϯΫͩͬͨ
ओઓΫϥΠΞϯταΠυ• ϖʔδભҠͷͨͼʹຖճαʔόʔ͔ΒHTMLΛฦͯ͠Β͏ͷ͍ʢ࣌ͷωοτϫʔΫڥͷ͍ͤͰ͋Δʣ• ඞཁͳσʔλ͚ͩAjaxͰऔಘ͠Α͏γϯάϧϖʔδΞϓϦέʔγϣϯʢSPAʣͷ࣌
MVCઃܭͷಋೖ 1. jQueryͷݶք2. MVCઃܭjQuery͚ͩͰSPAΛ࡞Δʹঢ়ଶཧ͕ෳࡶͰݶք͕͋ͬͨαʔόʔαΠυͷϑϨʔϜϫʔΫʢCakePHPStrutsʣʹश͍ɺΫϥΠΞϯταΠυMVCઃܭΛಋೖ͢ΔྲྀΕ͕ग़͖ͯͨModelControllerView
JSϑϨʔϜϫʔΫઓࠃ࣌Ember Angular React Vue RiotBackbone Marionette Knockout Mithril
ͦΕͰ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 GatewayJSON
αʔόʔϨεͷϝϦοτΠϯελϯεཧ͕ෆཁ εέʔϧ͍͢͠ ηΩϡΞӡ༻ɾཧෛՙͷݮՄ༻ੑɾোੑ͕ߴ͍ॊೈͳεέʔϦϯά͕Մೳ͚͓ͬͨͩࢧ͍OSͷηΩϡϦςΟAWSͤΞϓϦέʔγϣϯʹྗ
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_management63.5
ຊͷCMSγΣΞʢ20208݄ʣ8PSE1SFTT "EPCF%SFBNXFBWFS &$$VCF※ւ֎ʹΑΔຊͷௐࠪͳͷͰࢀߟఔʹ※ग़యɿhttps://w3techs.com/technologies/segmentation/cl-ja-/content_management83.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ΫϦΞ
༷ʑͳϔουϨεCMSCosmic WordPress Contentful ButterCMSmicroCMSGraphCMSPrismic
ϔουϨεCMSͷϝϦοτදࣔ໘͕ϑϧΧελϚΠζՄೳͳͨΊɺཧͷαΠτΛ࣮ݱͰ͖·͢"OESPJEJ04ళ಄αΠωʔδɺԻσόΠεͳͲͰར༻ՄೳαΠτͷߏ͕શʹࣗ༝༷ʑͳνϟωϧͰར༻Մೳ࠷৽ͷٕज़Λ༻͢ΕߴͳαΠτΛ࡞ՄೳߴͳαΠτΛ࣮ݱ
Jamstackͷొ
ࣄલʹੜ͞ΕͨHTMLΛCDN͔Β৴͢Δ͜ͱͰɺߴͰ ηΩϡΞͳαΠτΛ࣮ݱ͠·͢ɻ Σϒαʔόʔͷཧ࣮ߦඞཁ͋Γ·ͤΜɻFast and secure sites and apps delivered by pre-rendering filesand serving them directly from a CDN, removing therequirement to manage or run web servers.https://jamstack.org/
Jamstackͱ• Netlify CEOͷMatt Biilmannࢯ͕ఏএͨ͠ݴ༿• SSG + CSRͷϋΠϒϦου• ॳظϖʔδࣄલϏϧυͨ͠੩తϑΝΠϧΛϩʔυ͠ɺϖʔδભҠ࣌CSRΛߦ͏• ϝσΟΞͳͲɺ੩తίϯςϯπͷଟ͍αΠτʹ͍͍ͯΔ
Α͋͘ΔJamstackͷߏ
ϓϦϑΣονʹΑΔϖʔδભҠͷߴԽ• Next / Nuxt ʹViewableΤϦΞͷϦϯΫઌΛϓϦϑΣον͢Δػೳ͕͋Δ• APIϨεϙϯεΛ੩తԽͨ͠JSONϑΝΠϧର• ϒϥβΩϟογϡࡁΈͷϑΝΠϧऔಘ͠ʹߦ͔ͳ͍• ମײతʹඇৗʹߴ
DEMOhttps://microcms.io/blog
JamstackͷϝϦοτ• ඞཁͳͷ੩తϑΝΠϧͷϗεςΟϯάͷΈ• NetlifyɺGitHub PagesɺAmazon S3ɺVercelͳͲʢݸਓར༻ϨϕϧͳΒແྉʣ• APIίʔϧϏϧυ࣌ͷΈ• APIϦΫΤετͷ੍ݶ͕͋ͬͯ҆৺• ສ͕ҰɺAPI͕མͪͯ҆৺• ηΩϡΞˍϋΠύϑΥʔϚϯεˍ͍҆
Jamstackʹ͑Δ੩తϗεςΟϯάαʔϏεҰཡAmazon S3 Google Cloud Microsoft Azure CloudFlareGitHub 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
shibe97
non97
opeonikute
line_developers
yosuke_furukawa
kurochan
takumakume
shiromoto
mitsuakitohei
kazumax55
matsuihidetoshi
shimastripe
wernerkrauss
hatefulcrawdad
destraynor
yeseniaperezcruz
shpigford
brianwarren
aarron
jrom
orderedlist
matthewcrist
holman
geoffreycrofte
rasmusluckow