Tweet
Tweet

Slide 1

Slide 1 text

WebϑϩϯτΤϯυͷτϨϯυ ʙ αʔόʔϨεSPAɺJamstack ʙ ࣲా ࿨ف / @shibe97 #devsumiA A-3 ΢Υϯλגࣜձࣾ

Slide 2

Slide 2 text

ࣲా ࿨ف / Kazuki Shibata ΢Υϯλגࣜձࣾͷڞಉ૑ۀऀ $00ɻ NJDSP$.4ͷσβΠϯɺϑϩϯτ
 ։ൃΛ͍ͯ͠·͢ɻ +BNTUBDL/FYU/VYU͕޷͖ɻ !TIJCF

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Agenda 1. WebαΠτͱWebΞϓϦέʔγϣϯͷҧ͍ 2. WebΞϓϦέʔγϣϯߏஙͷྺ࢙ 3. WebαΠτͷߏஙख๏ʹ͍ͭͯ 4. ·ͱΊ

Slide 5

Slide 5 text

WebΞϓϦέʔγϣϯͱ WebαΠτ

Slide 6

Slide 6 text

WebαΠτ WebΞϓϦέʔγϣϯ ϚʔέςΟϯάʢू٬ʣ αʔϏεʢՁ஋ʣͷఏڙ ໨త ໨త खஈ Ϣʔβʔͷཉ͍͠৘ใΛൃ৴͢Δ Ϣʔβʔͷ΍Γ͍ͨ͜ͱΛ࣮ݱ͢Δ खஈ ݕࡧΤϯδϯϑϨϯυϦʔͰ͋Δ ฤूऀ͕ίϯςϯπΛฤूͰ͖Δ ෳࡶͳػೳཁٻʹ଱͑ΒΕΔ ඞཁ৚݅ ඞཁ৚݅

Slide 7

Slide 7 text

໨త͕ҧ͏ͷͰ࡞Γํ΋౰વҧ͏ React WordPress Vue Gulp

Slide 8

Slide 8 text

WebΞϓϦέʔγϣϯ WebαΠτ 2ͭͷؒʹ͸ඇৗʹେ͖ͳߔ͕͋Δ

Slide 9

Slide 9 text

WebΞϓϦέʔγϣϯ ߏஙͷྺ࢙

Slide 10

Slide 10 text

ೋͭͷసػ 1. Ajaxͷొ৔ 2. ϞδϡʔϧγεςϜͷొ৔ γϯάϧϖʔδΞϓϦέʔγϣϯ΁ͷ෍ੴ ΫϥΠΞϯταΠυʹ͓͚Δ
 େن໛ΞϓϦέʔγϣϯͷ࣮૷͕Մೳʹ

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Ajaxͷ஀ੜ • 2005೥ɺXMLHttpRequestΛ༻͍ͨ
 ඇಉظ௨৴ΛWebΞϓϦέʔγϣϯʹ
 ༻͍Δํ๏͕঺հ͞ΕΔ • Google MapΛൽ੾Γʹരൃతʹීٴ • ੲͷ஍ਤ͸̔ํ޲ͷ໼ҹϦϯΫͩͬͨ

Slide 13

Slide 13 text

ओઓ৔͸ΫϥΠΞϯταΠυ΁ • ϖʔδભҠͷͨͼʹຖճαʔόʔ͔ΒHTMLΛฦͯ͠΋Β͏ͷ͸஗͍ ʢ౰࣌ͷωοτϫʔΫ؀ڥͷ͍ͤͰ΋͋Δʣ • ඞཁͳσʔλ͚ͩ౎౓AjaxͰऔಘ͠Α͏ γϯάϧϖʔδΞϓϦέʔγϣϯʢSPAʣͷ࣌୅΁

Slide 14

Slide 14 text

MVCઃܭͷಋೖ 1. jQueryͷݶք 2. MVCઃܭ jQuery͚ͩͰSPAΛ࡞Δʹ͸ঢ়ଶ؅ཧ͕ෳࡶ Ͱݶք͕͋ͬͨ αʔόʔαΠυͷϑϨʔϜϫʔΫʢCakePHP ΍Strutsʣʹश͍ɺΫϥΠΞϯταΠυ΋ MVCઃܭΛಋೖ͢ΔྲྀΕ͕ग़͖ͯͨ Model Controller View

Slide 15

Slide 15 text

JSϑϨʔϜϫʔΫઓࠃ࣌୅ Ember Angular React Vue Riot Backbone Marionette Knockout Mithril

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

ͦΕͰ΋SPA͸ෳࡶͩͬͨ • ౰࣌ͷJavaScriptʹ͸ϞδϡʔϧγεςϜʢrequireʣ͕ແ͔ͬͨͨΊ ॲཧͷ෼ׂ͕ͮ͠Β͔ͬͨ • άϩʔόϧͳ໊લۭؒͰϞδϡʔϧΛར༻͢Δํࣜ • ScriptͷಡΈࠐΈॱ൪Ͱόά͕ൃੜ͢Δ

Slide 18

Slide 18 text

ϞδϡʔϧγεςϜͷొ৔ 1. Ϟδϡʔϧͷґଘղܾ 2. ΞϓϦέʔγϣϯͷߏ଄Խ Node.jsଆͰ࣮૷͕ਐΜͰ͍ͨϞδϡʔϧͷ
 ґଘղܾػߏΛΫϥΠΞϯταΠυJSͰ΋ ѻ͑ΔΑ͏ʹͳΔ࢓૊Έ͕ొ৔ ͜ΕʹΑΓϞδϡʔϧͷ࠶ར༻͕͠΍͘͢ ͳΓɺJavaScriptͰ΋େن໛ͳ
 ΞϓϦέʔγϣϯΛߏங͠΍͘͢ͳͬͨ

Slide 19

Slide 19 text

Fluxͷొ৔ʢ2014೥ʣ • Facebook͕ఏএͨ͠ΞʔΩςΫνϟ • MVCͷεέʔϧ͠ͳ͍໰୊Λղܾ͢Δ • σʔλͷྲྀΕΛҰํ޲ʹ͢Δ

Slide 20

Slide 20 text

FluxϑϨʔϜϫʔΫઓࠃ࣌୅ • Flux • Fluxxor • Flexible • NuclearJS • Redux

Slide 21

Slide 21 text

SPAͷ໰୊఺ JavaScriptͰಈతʹϖʔδΛߏங͢ΔͨΊɺΫϩʔϥʔ͕ղऍͮ͠Β͍ SEO͕ऑ͍ ࠷ॳʹόϯυϧ͞ΕͨJSΛಡΈࠐΉͨΊɺॳظϩʔυʹ͕͔͔࣌ؒΔ ॳظϩʔυ͕஗͍

Slide 22

Slide 22 text

SSR ͱ૊Έ߹ΘͤΔղܾࡦ • ॳظϩʔυ࣌͸αʔόʔαΠυϨϯμϦϯάʢSSRʣ • ϋΠυϨʔγϣϯΛߦ͍ɺϖʔδભҠҎ߱͸SPAͷΑ͏ͳڍಈΛͤ͞Δ • SPAʹ͓͚ΔSEO΍ॳظϩʔυ஗Ԇͱ͍ͬͨܽ఺Λิͬͨߏ੒ • ࣮૷೉қ౓͕ߴ͍

Slide 23

Slide 23 text

Next / Nuxtͷొ৔ • ϑΝΠϧγεςϜʹج͍ͮͨϧʔςΟϯά • SSRॲཧͷେ൒ΛϑϨʔϜϫʔΫଆ͕୲ͬͯ͘ΕΔ • ෳࡶͳWebpack΍Babelͷઃఆ͕ӅṭͰ͖Δ

Slide 24

Slide 24 text

ͦ΋ͦ΋SSR͕ඞཁͳέʔε͸ଟ͘ͳ͍ • ʮαʔϏεͷఏڙʯʹ͓͍ͯ͸SEO͕ॏཁ ͱͳΔέʔε͸ͦΜͳʹଟ͘ͳ͍ • SEO͕ॏཁͰ͋ΔϥϯσΟϯάϖʔδͷΈ SPA֎Ͱ഑৴͠ɺαʔϏεࣗମ͸
 αϒυϝΠϯ౳Ͱఏڙ͢Δέʔε͕ଟ͍ • όϯυϧJS͕ॏ͍݅΋ɺΩϟογϡ͞ΕΕ ͹ؾʹͳΒͳ͍ ੩తϖʔδ SPA ϥϯσΟϯάϖʔδ ʢhoge.comʣ αʔϏε ʢapp.hoge.comʣ

Slide 25

Slide 25 text

αʔόʔϨεSPAͱ͍͏બ୒ࢶ • SPA ͸ index.html ͱόϯυϧJS͑͋͞Ε͹ಈ͘ • αʔόʔαΠυͰߦ͏΂͖ॲཧ͸͢΂ͯ API Λհͯ͠
 Cloud Function ্Ͱߦ͏͜ͱͰɺαʔόʔϨεͳ SPA ͕࣮ݱͰ͖Δ • ExpressͳͲͷWebαʔόʔ͸ෆཁ

Slide 26

Slide 26 text

αʔόʔϨεSPAߏ੒ྫʢAWS൛ʣ ϒϥ΢β CloudFront ʢCDNʣ S3 ʢStorageʣ Lambda ʢCloud Functionʣ HTML / JS / CSS / ը૾ औಘɺૹ৴ɺݕࡧ౳ Ωϟογϡ DynamoDB ʢDatabaseʣ CognitoʢIdentityʣ ೝ ূ σʔλ API Gateway JSON

Slide 27

Slide 27 text

αʔόʔϨεͷϝϦοτ Πϯελϯε؅ཧ͕ෆཁ εέʔϧ͠΍͍͢ ηΩϡΞ ӡ༻ɾ؅ཧෛՙͷ௿ݮ Մ༻ੑɾ଱ো֐ੑ͕ߴ͍ ॊೈͳεέʔϦϯά͕Մೳ ࢖ͬͨ෼͚͓ͩࢧ෷͍ OSͷηΩϡϦςΟ͸AWS೚ͤ ΞϓϦέʔγϣϯʹ஫ྗ

Slide 28

Slide 28 text

WebαΠτͷߏங

Slide 29

Slide 29 text

WebαΠτ WebΞϓϦέʔγϣϯ ϚʔέςΟϯάʢू٬ʣ αʔϏεʢՁ஋ʣͷఏڙ ໨త ໨త खஈ Ϣʔβʔͷཉ͍͠৘ใΛൃ৴͢Δ Ϣʔβʔͷ΍Γ͍ͨ͜ͱΛ࣮ݱ͢Δ खஈ ݕࡧΤϯδϯϑϨϯυϦʔͰ͋Δ ฤूऀ͕ίϯςϯπΛฤूͰ͖Δ ෳࡶͳػೳཁٻʹ଱͑ΒΕΔ ඞཁ৚݅ ඞཁ৚݅

Slide 30

Slide 30 text

ҰൠతͳWebαΠτͷߏஙख๏ • SEO͕ॏཁͳͨΊɺ੩తͳαΠτ͕ϝΠϯ • جຊ͸HTML / CSS • ಈ͖Λ͚ͭΔͨΊʹҰ෦JavaScriptʢjQuery͕ओྲྀʣ • ؅ཧը໘͔Β୲౰ऀ͕ฤूͰ͖ΔΑ͏ʹWordPressΛ༻͍Δ

Slide 31

Slide 31 text

ੈքͷCMSγΣΞʢ2020೥8݄ʣ 8PSE1SFTT 4IPQJGZ +PPNMB %SVQBM 8JY 4RVBSFTQBDF #JUSJY #MPHHFS .BHFOUP 0QFO$BSU ※ௐࠪର৅αΠτͷ͏ͪɺCMSΛಋೖ͍ͯ͠ΔαΠτ͕59.5% ※ग़యɿhttps://w3techs.com/technologies/overview/content_management 63.5

Slide 32

Slide 32 text

೔ຊͷCMSγΣΞʢ2020೥8݄ʣ 8PSE1SFTT "EPCF%SFBNXFBWFS &$$VCF ※ւ֎ʹΑΔ೔ຊͷௐࠪͳͷͰࢀߟఔ౓ʹ ※ग़యɿhttps://w3techs.com/technologies/segmentation/cl-ja-/content_management 83.1

Slide 33

Slide 33 text

WebΞϓϦέʔγϣϯͱͷߔ͕޿͕Δϫέ • SEO͕ॏཁͰ͋Δ • αΠτن໛͕খ͍ͨ͞ΊɺReact΍VueͰ࣮૷Λ͢Δʹ͸ίεύ͕ѱ͍ • jQuery͕ະͩʹݱ໾ͳͷ͸ίεύ͕ྑ͍͔Β • ඇΤϯδχΞ͕ฤूՄೳͰ͋Δඞཁ͕͋ΔʢCMS͕ඞཁʣ

Slide 34

Slide 34 text

WebΞϓϦέʔγϣϯ WebαΠτ ͍ͭʹɺ͜ͷߔ͕ຒ·Γͭͭ͋Γ·͢

Slide 35

Slide 35 text

伴ͱͳΔͷ͕ҎԼͷ̎ͭ • SSGʢελςΟοΫαΠτδΣωϨʔτʣ • ϔουϨεCMS

Slide 36

Slide 36 text

• HTMLΛࣄલʹੜ੒͢Δख๏ • Gatsby / Next / Nuxt ͷొ৔Ͱɺ
 React΍Vueͱ͍ͬͨߴੑೳͳ
 ϥΠϒϥϦΛWebαΠτ੍࡞ʹ΋
 ౤ೖͰ͖ΔΑ͏ʹͳͬͨ ✅ SEO໰୊ͳ͠ ✅ ࣮૷΋؆୯Ͱɺίεύྑ͠ SSGͷਐԽ

Slide 37

Slide 37 text

ϔουϨεCMSͷొ৔ σʔλϕʔε API ϒϥ΢β / ΞϓϦ / IoT ฤूऀ ؅ཧը໘ ʢGUIʣ ϔουϨεCMS

Slide 38

Slide 38 text

ϔουϨεCMSͷొ৔ • ίϯςϯπ؅ཧը໘ͱදࣔ໘ʢViewʣ͕੾Γ཭͞ΕͨCMS • ϦονͳGUIͰૢ࡞Ͱ͖ɺ͔ͭAPI΋ඪ४૷උͳDBͷΑ͏ͳ΋ͷ • CMSΛReact΍Vueͷதʹ؆୯ʹ૊ΈࠐΉ͜ͱ͕Մೳʹͳͬͨ ✅ CMS΋ΫϦΞ

Slide 39

Slide 39 text

༷ʑͳϔουϨεCMS Cosmic WordPress Contentful ButterCMS microCMS GraphCMS Prismic

Slide 40

Slide 40 text

ϔουϨεCMSͷϝϦοτ දࣔ໘͕ϑϧΧελϚΠζՄೳͳͨΊɺཧ૝ͷαΠτΛ࣮ݱͰ͖·͢ "OESPJEJ04΍ళ಄αΠωʔδɺԻ੠σόΠεͳͲͰ΋ར༻Մೳ αΠτͷߏ଄͕׬શʹࣗ༝ ༷ʑͳνϟωϧͰར༻Մೳ ࠷৽ͷٕज़Λ࢖༻͢Ε͹௒ߴ଎ͳαΠτΛ࡞੒Մೳ ߴ଎ͳαΠτΛ࣮ݱ

Slide 41

Slide 41 text

Jamstackͷొ৔

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

ࣄલʹੜ੒͞Εͨ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/

Slide 44

Slide 44 text

Jamstackͱ͸ • Netlify CEOͷMatt Biilmannࢯ͕ఏএͨ͠ݴ༿ • SSG + CSRͷϋΠϒϦου • ॳظϖʔδ͸ࣄલϏϧυͨ͠੩తϑΝΠϧΛϩʔυ͠ɺϖʔδભҠ࣌ ͸CSRΛߦ͏ • ϝσΟΞͳͲɺ੩తίϯςϯπͷଟ͍αΠτʹ޲͍͍ͯΔ

Slide 45

Slide 45 text

Α͋͘ΔJamstackͷߏ੒

Slide 46

Slide 46 text

ϓϦϑΣονʹΑΔϖʔδભҠͷߴ଎Խ • Next / Nuxt ʹ͸ViewableΤϦΞͷϦϯΫઌΛϓϦϑΣον͢Δ ػೳ͕͋Δ • APIϨεϙϯεΛ੩తԽͨ͠JSONϑΝΠϧ΋ର৅ • ϒϥ΢βΩϟογϡࡁΈͷϑΝΠϧ͸औಘ͠ʹߦ͔ͳ͍ • ମײతʹ͸ඇৗʹߴ଎

Slide 47

Slide 47 text

DEMO https://microcms.io/blog

Slide 48

Slide 48 text

JamstackͷϝϦοτ • ඞཁͳͷ͸੩తϑΝΠϧͷϗεςΟϯάͷΈ • NetlifyɺGitHub PagesɺAmazon S3ɺVercelͳͲʢݸਓར༻ϨϕϧͳΒແྉʣ • APIίʔϧ͸Ϗϧυ࣌ͷΈ • APIϦΫΤετ਺ͷ੍ݶ͕͋ͬͯ΋҆৺ • ສ͕ҰɺAPI͕མͪͯ΋҆৺ • ηΩϡΞˍϋΠύϑΥʔϚϯεˍ͍҆

Slide 49

Slide 49 text

Jamstackʹ࢖͑Δ੩తϗεςΟϯάαʔϏεҰཡ Amazon S3 Google Cloud Microsoft Azure CloudFlare GitHub Pages Vercel Firebase Netlify Gatsby Cloud

Slide 50

Slide 50 text

JamstackͷσϝϦοτ • ϖʔδ਺͕ଟ͍ͱϏϧυʹຖճ͕͔͔࣌ؒͬͯ͠·͏ • ϓϨϏϡʔͷ࣮૷ΛࣗલͰ͢Δඞཁ͕͋Δ • ஌ݟ͕·ͩগͳ͍

Slide 51

Slide 51 text

Jamstack͸Ϗϧυ͕9ׂ • JamstackͰ࠷΋େࣄͳͷ͸Ϗϧυʂͱݴͬͯ΋աݴͰ͸ͳ͍ • جຊతʹͰ͖ΔݶΓͷॲཧΛϏϧυ࣌ʹࡁ·͢ • ϖʔδੜ੒ʹ͔͔Δ࣌ؒΛͰ͖ΔݶΓݮΒ͢ͷ͕ॏཁ • ϖʔδੜ੒࣌ͷAPIϦΫΤετ਺Λ࠷খݶʹ཈͑Δ • ແବͳॲཧΛݮΒ͢

Slide 52

Slide 52 text

Next.js ͷ Incremental Static Regeneration • SSR / SSG / CSR ͷϋΠϒϦου • ॳճΞΫηε࣌͸SSR • ୭͔͕Ұ౓Ͱ΋ΞΫηε͢Ε͹ɺͦͷλΠϛϯάͰSSG͕͞ΕΔ • ϖʔδભҠ࣌͸CSR • TwitterͷσϞ https://static-tweet.now.sh/

Slide 53

Slide 53 text

• Next.jsΛ։ൃ͍ͯ͠ΔVercel͕ࣾఏڙ͍ͯ͠ΔϗεςΟϯάαʔϏε • αʔόʔαΠυॲཧ΋ಈ࡞͢Δ • ඞཁ࠷௿ݶͳՕॴΛSSR͠ɺͰ͖ΔݶΓSSGͯ͠ύϑΥʔϚϯεͷ
 ࠷େԽΛਤ͍ͬͯΔ • Next.jsʹ͸αʔόʔαΠυ༻ͷػೳ͕݁ߏ͋ΔͷͰɺNetlify΍S3Ͱ͸ े෼ʹ࢖͍͜ͳͤͳ͍ Vercel

Slide 54

Slide 54 text

Gatsby ͷ Incremental Builds • Gatsby Cloud্Ͱࠩ෼ϏϧυΛ ߦ͏͜ͱ͕Ͱ͖Δ • ॳճϏϧυ͚͔͔ͩ࣌ؒΔ͕ɺ 2ճ໨Ҏ߱͸ߴ଎ʢ਺ඵʣ

Slide 55

Slide 55 text

WebϑϩϯτΤϯυͷτϨϯυ૯ධ • WebαΠτ੍࡞ͱ͍͏؍఺Ͱ͸Jamstackͷొ৔Ͱେ͖ͳมԽ͕
 དྷ͍ͯΔͱײ͡Δ • ҰํͰɺWebΞϓϦέʔγϣϯ։ൃʹ͓͍ͯ͸େہతʹ͸มΘΓͳ͍ • Redux → Hooks ͳͲࡉ͔͍มԽ͸ͨ͘͞Μ͋Δ • RustͷϑϩϯτΤϯυ࣮૷ʢYew౳ʣ͕ྲྀߦͬͯ͘ΔͱΨϥοͱ
 มΘΓͦ͏͕ͩɺͲ͏ͳΔ͔ʁ

Slide 56

Slide 56 text

·ͱΊ • Jamstackͷొ৔ͰɺWebαΠτͱWebΞϓϦέʔγϣϯͷߔ͸
 ຒ·Γͭͭ͋Δ • WebΞϓϦέʔγϣϯ͸ଟ͘ͷ৔߹ɺSPAͰಛʹ໰୊ͳ͠ • αʔόʔϨεͷԸܙ͕ಘΒΕΔαʔόʔϨεSPAߏ੒͸ߋʹΦεεϝ

Slide 57

Slide 57 text

Thanks :) !TIJCF