JAM Stackと静的サイトのイマ / modern-static-site

by mottox2

Slide 1

Slide 1 text

JAM Stackͱ੩తαΠτͷΠϚ 2018.07.06 Webք۾LTձ - @mottox2 αʔόʔαΠυͷਓʹ΋఻͍͑ͨ

Slide 2

Slide 2 text

੩తαΠτͱಈతαΠτ • Ϩεϙϯε͕ૣ͍ • མͪͳ͍͠εέʔϧ͢Δ • ηΩϡϦςΟOK • ࣗ༝౓௿ͦ͏ • ࣮૷ʹΑͬͯ஗͘ͳΔ͜ͱ΋ • େྔͷΞΫηεʹऑ͍ • ηΩϡϦςΟతʹͭΒΈ΋ • େମͳΜͰ΋Ͱ͖Δ ੩తαΠτ ಈతαΠτ

Slide 3

Slide 3 text

੩తαΠτδΣωϨʔλʔ • ੩తαΠτδΣωϨʔλʔΛ࢖ͬͯੜ੒͢Δ͜ͱ͕ଟ͍ • ಈతʹ੩తαΠτΛੜ੒͢ΔδΣωϨʔλ • جຊతʹGitHubͷpushͱ࿈ಈͯ͠Ϗϧυ͢ΔΑ͏ͳײ͡

Slide 4

Slide 4 text

Web։ൃΛऔΓר࣌͘୅ͷมԽ

Slide 5

Slide 5 text

࣌୅ͷมԽ ϞϊϦγοΫ͔ΒϚΠΫϩαʔϏεʹ GitHubத৺ͷ։ൃ؀ڥʹ PC͔ΒεϚϗத৺ͷWebʹ 1 2 3

Slide 6

Slide 6 text

ϞϊϦγοΫ͔ΒϚΠΫϩαʔϏεʹ • Micro Service͕ҰൠతʹͳΓɺαʔόʔαΠυͷ෼཭͸ͱ΋͔͘ɺStipeʢ՝ۚʣ ΍ContentfulʢHeadless CMSʣɺSentryʢΤϥʔऩूʣͳͲͷ֎෦αʔϏεͱAPI Λܦ༝ͯ͠ར༻͢Δํ๏͕ҰൠԽͨ͠ʢ͸ͣʣɻ • backend͸ผαʔϏεͷAPIΛ࢖ͬͨΓɺࣗલͰ࣮૷͢ΔͳΓͯ͠ɺϑϩϯτΤϯ υ͚ͩผϓϩδΣΫτʹ੾Γग़͢ͷ΋ࣗવɻ • WebHookʹΑΔαʔϏεؒ࿈ܞ΋े෼ʹීٴͨ͠ɻ

Slide 7

Slide 7 text

GitHubத৺ͷ։ൃ؀ڥʹ • ιʔείʔυ؅ཧ͕GitHub্ͰߦΘΕΔΑ͏ʹͳΓɺCIͱ࿈ܞ͢Δ͜ͱ͕Ұൠత ʹɻ • GitHub PagesͰ؆୯ʹαΠτ͕ެ։Ͱ͖ͨΓɺGitHubͱ࿈ܞͯ͠੩తαΠτΛެ ։Ͱ͖ΔNetlifyͷొ৔ • ϏϧυίϚϯυͷࢦఆ΍ɺGlobal CDNɺPR PreviewͳͲ͕σϑΥϧτͰ࢖͑ ΔɻਆαʔϏεɻ ▶ ੩తαΠτͷσϓϩΠ͕ͲΜͲΜָʹ

Slide 8

Slide 8 text

PC͔ΒεϚϗத৺ͷWebʹ • 3G͔Β4Gʹͳͬͨͱ͸͍͑ɺ౎ࢢ෦͔Β཭ΕΔͱ3G΍ྼѱͳ௨৴؀ڥ͕ଘࡏ͢ Δɻ • GoogleͷΞϧΰϦζϜͰ஗͍αΠτ͸ϥϯΫ͕Լ͕Δɻ • ΑΓૣ͘ϨεϙϯεΛฦͯ͠ɺ௨৴ྔΛ཈͑Δඞཁੑ͕ߴ·͍ͬͯΔɻ • ಈతαΠτ͸αʔόʔαΠυͰͷॲཧͷ෼଎౓తʹෆརɻ • ·ͨɺόζΓ΍͘͢ͳͬͯҰؾʹτϥϑΟοΫ͕૿͑Δ৔߹΋ɻ ▶ εέʔϧ͠΍͘͢ɺTTFB͕ૣ͍੩తαΠτʹΞυ͕

Slide 9

Slide 9 text

੩తαΠτδΣωϨʔλʔ΋มԽ • Ҏલͷ੩తαΠτδΣωϨʔλ • جຊతʹϦϙδτϦ্ʹ͋ΔMarkdownΛݩʹ੩తϖʔδΛੜ੒ • ࠷ۙͷ੩తαΠτδΣωϨʔλ • APIΛୟ͍ͯͦͷσʔλΛݩʹ੩తϖʔδΛੜ੒ • APIΛୟ͘͜ͱΛલఏͱ͍ͯ͠Δ΋ͷ΋ɻMarkdown͸ΦϓγϣϯͷҰͭ ▶ ࢥͬͨΑΓࣗ༝౓͕ߴ͍ͱࢥ͍·ͤΜ͔ʁ

Slide 10

Slide 10 text

ओཁͳ੩తαΠτδΣωϨʔλʔ ▶ ελʔ਺Ͱ͸ෛ͚͍ͯΔ͕ɺJavaScript੡ͷ΋ͷΛ࠾༻͢΂͖ 34728 / Ruby Jekyll 26870 / Golang Hugo 23123 / JavaScript(React) Next 23123 / JavaScript(React) Gatsby 13371 / JavaScript(Vue) Nuxt

Slide 11

Slide 11 text

JavaScript੡ͷδΣωϨʔλʔΛબ୒͢΂͖ཧ༝ • ServerͰੜ੒ͨ͠HTMLΛJSͰ͍͡Δͷ͸ͦΖͦΖࣙΊ͍ͨɻ • APIΛୟ͍ͯViewʹදࣔ͢Δॲཧ͕JSͰ׬݁͢Δɻ • ߟ͑Δ͜ͱ͕૿͑ͳ͍··SPAʹͰ͖Δ͔΋ɻ • ϑϩϯτΤϯυͷࢿ࢈Ͱ͋Δ։ൃ؀ڥ͕ศརɻ • Ϗϧυ؀ڥΛ੔͑ΔͷʹNode͚ͩ༻ҙ͢Ε͹Α͍ɻ

Slide 12

Slide 12 text

JAM Stack ͜ΕΒͷཁૉΛຬͨ͢ελοΫΛJAM Stackͱ͍͏ɻ https://jamstack.org/ JavaScriptͰߏ੒͞Ε͍ͯΔ APIΛར༻͢Δ͜ͱ ࣄલʹϏϧυ͢Δ͜ͱ

Slide 13

Slide 13 text

Կ͕࡞ΕΔͷʁ • Headless CMSΛ࢖ͬͨΦ΢ϯυϝσΟΞ • ্ཱ͕ͪ͛ര଎Ͱग़དྷΔɻ • esa.io΍Qiita:Teamͱ࿈ܞͯ͠ߋ৽Ͱ͖ΔίʔϙϨʔταΠτ • ؅ཧαΠτΛϗεςΟϯά͢Δඞཁͳ͍ͷͰศརɻ • ձࣾͷϝϯόʔͷQiita΍noteɺϒϩάΛ·ͱΊͨϙʔλϧαΠτ • స৬ଟͯ͘։ൃϒϩάʹॻ͘ͷ͕ਏ͍ͷͰɺ৘ใͷϙʔλϏϦςΟ্͕͕Δɻ • Stripe΍MoltinΛۦ࢖͢Ε͹ECαΠτ΋ग़དྷΔɻ • ਖ਼௚ҙຯ͕Θ͔Βͳ͍ɻ

Slide 14

Slide 14 text

֤ϑϨʔϜϫʔΫͷ঺հ

Slide 15

Slide 15 text

ओཁͳ੩తαΠτδΣωϨʔλʔ 34728 / Ruby Jekyll 26870 / Golang Hugo 23123 / JavaScript(React) Next 23123 / JavaScript(React) Gatsby 13371 / JavaScript(Vue) Nuxt

Slide 16

Slide 16 text

Next • SSR෇͖ͷReactΞϓϦέʔγϣϯ༻ͷSPAϑϨʔϜϫʔΫɻ • Routing΍SSRʹؔͯ͠ϨʔϧΛෑ͍ͯ͘ΕΔɻ • easyΑΓ͸simpleدΓɻυΩϡϝϯτ΋؆ૉɻ • ੩తαΠτͷΤΫεϙʔτػೳ͕͋Δɻ

Slide 17

Slide 17 text

Nuxt • ೔ຊʹྲྀߦͬͯΔʢؾ͕͢ΔʣVueͷSPAϑϨʔϜϫʔΫɻ • Next.jsΠϯεύΠΞܥͷϑϨʔϜϫʔΫ͚ͩͬͨͲɺϑϧελοΫํ໘ʹ޲͔ͬͯ ͍Δɻ • ઃఆΑΓن໿ͳϑϨʔϜϫʔΫɻϑϩϯτΤϯυͷRailsʢݸਓͷݟղʣ • SSRϞʔυɺSPAϞʔυɺ੩తϑΝΠϧϞʔυ͕͋Δɻ • ࠷ۙຊ൪ͰNuxtΛ࠾༻͍ͯ͠ΔྫΛԿճ͔ݟͨɻʢͨͩ͠SSRϞʔυʣ

Slide 18

Slide 18 text

Gatsby • ReactͰ੩తαΠτΛॻͨ͘ΊͷϑϨʔϜϫʔΫɻ • ී௨ʹॻ͚͹ૣ͘ͳΔΑ͏ʹઃܭ͞Ε͍ͯΔɻ • ෳ਺ͷσʔλιʔεΛѻ͍΍͍͢ઃܭʹͳ͍ͬͯΔɻ • ΞϓϦέʔγϣϯͬΆ͍΋ͷΛॻ͘΋ͷͰ͸ͳ͍ɻ

Slide 19

Slide 19 text

ϑϨʔϜϫʔΫΛબͿͱ͖ͷϙΠϯτ • Next, Nuxt, Gatsbyʹؔͯ͠͸ɺ֎෦ͷAPIΛୟ͍ͯͳʹ͔͢Δ৔߹ʹɻ͋͘·Ͱ JAM Stackʹ৐͔ͬΔͳΒ͜ͷ3ͭͰ͸ʁͱ͍͏࿩ɻ • ͜ͷ3ͭͷϑϨʔϜϫʔΫ͸੩తαΠτͱͯ͠ग़ྗ͢ΔͱɺJS͕ಡΈࠐ·Εͨޙʹ SPAͱͯ͠ಈ࡞͢Δɻ • ͨͩNext, Nuxt͸ΞϓϦέʔγϣϯϑϨʔϜϫʔΫͷଆ໘͕ڧ͍ͷͰɺ͜͜Ͱൺֱ ͢Δͷ͸ద੾Ͱ͸ͳ͍ • ٯʹMarkdownͰϒϩάΛ࡞Γ͍ͨ৔߹͸ɺͦ͏͍ͬͨࢥ૝ͷϑϨʔϜϫʔΫΛબ Ϳ΂͖ɻ • ϑϨʔϜϫʔΫຖͷࢥ૝͕͋ΔͷͰݴޠ໰ΘͣʹݟͯΈΔͱ͍͍͔΋

Slide 20

Slide 20 text

Α͋͘Δ͔΋͠Εͳ͍࣭໰

Slide 21

Slide 21 text

ϑΥʔϜͱ͔Ͳ͏͢ΜͷΑʁ • Ұ൪؆୯ͳͷ͕Google FormͷຒΊࠐΈɻ • FormܥͷSaaS΍Netlify FormΛ࢖͏બ୒ࢶ΋ • Netlify Functions΍Lambdaͱ࿈ܞͯ͠؆қతͳαʔόʔαΠυͱΈͳ͢͜ͱ΋Ͱ͖ Δɻ

Slide 22

Slide 22 text

Ϗϧυ࣌ؒͱ͔Ͳ͏ͳͷʁ • HTML෦෼ΑΓ֎෦APIΛୟ͘෦෼͕ωοΫʹͳΓ͕ͪɻ • WordPress+GatsbyͰ࡞ͬͯΔαΠτ͸2000ϖʔδ͙Β͍Ͱ໿6෼ͱ͍͏ͱ͜Ζɻ • ΋͏গ͠γϯϓϧͳHeadless CMSΛ࢖͑͹਺෼ͰऴΘΔ͸ͣɻ

Slide 23

Slide 23 text

React, Vueͬͯߟ͑Δ͜ͱ͕ଟͦ͏ • Next.js, GatsbyJS, Nuxt.jsΛબ΂͹ɺ͋Δఔ౓ͷϨʔϧ͕ෑ͔Ε͍ͯΔͨΊϥΠϒ ϥϦબఆ໰୊ͱ௚໘͢Δ͜ͱ͸গͳ͍ɻ • ίϯϙʔωϯτ୯ҐͰCSS͕͔͚ͨΓ͢ΔͷͰɺCSSͷҋͱ΋௚໘͠ʹ͍͘ɻ • ݸਓͷݟղͰ͍͑͹ɺී௨ʹHTMLΛॻ͘ΑΓߟ͑Δ͜ͱ͕গͳ͍ɻ

Slide 24

Slide 24 text

SPA(+SSR)ͱ੩తαΠτͷ࢖͍෼͚͸ʁ • ߋ৽ස౓͕ߴ͘ͳ͍·ͨ͸APIͷར༻੍ݶ͕͋Δ৔߹͸੩తαΠτɻ • ੩తαΠτͰ͸ͳ͘SPA(+SSR)ʹ͢Δ৔߹ͰReactͳΒNext.jsɺVueͳΒNuxt.js • ۩ମతʹCGMͷΑ͏ͳߋ৽ස౓͕ߴ͍αΠτͰ͋Ε͹Next.jsɺNuxt.jsʹ͢Δɻ • 3rd Party ServiceͷAPIʹར༻੍ݶ͕͋Δ৔߹ɺ੩తαΠτԽ͢Δඞཁ͕͋Δɻ

Slide 25

Slide 25 text

͋ͳͨͷαΠτɺSPAͰ΋͍͍ͷͰ͸ʁ JAM StackͷMarkup͕ຬͨͤͳ͘ͳΔ͚Ͳ ૣ্ཱͪ͛͘Δͱ͍͏ҙຯͰڧ͍બ୒ࢶʹͳΔ ͓·͚

Slide 26

Slide 26 text

• SPA΋੩తαΠτ • JS͕ϒϥ΢βͰϨϯμϦϯά͍ͯ͠Δ SPA΋੩తαΠτ

Slide 27

Slide 27 text

• Netlify͕PrerenderingΛαϙʔτ(beta) • Ϋϩʔϥʔ޲͚ʹJSͰϨϯμϦϯάͨ݁͠ՌΛฦͯ͘͠ΕΔɻ • ϗεςΟϯάαʔϏεʹ͍͍ͬͭͯ͘ΔͷͰγʔϜϨεʹઃఆՄೳ • Ҏલ͔Β΋prerender.ioͷΑ͏ͳαʔϏε΋͕͋ͬͨɺ͋·Γྲྀߦ͍ͬͯͳ͍ҹ৅ Netlify Prerenderingͷొ৔

Slide 28

Slide 28 text

ࣄྫ: SmartDrive https://smartdrive.co.jp @takanoripe͞Μ࡞ɻNuxt.jsͷSPAϞʔυ+WordPress REST API

Slide 29

Slide 29 text

੩తαΠτͰͰ͖Δ͜ͱ͸ͲΜͲΜ૿͍͑ͯΔ ࡞Βͳͯ͘΋͍͍΋ͷ͕૿͑ͨͷͰ ΑΓຊ࣭తͳ΋ͷʹ஫ྗͰ͖Δ࣌୅ʹ ·ͱΊ

Slide 30

Slide 30 text

@mottox2 • ReactͱRuby on RailsΛத৺ʹWebαʔϏε։ൃ͍ͯ͠·͢ • ϒϩά΍ͬͯ·͢(esa.io + note.mu + GatsbyJS) => mottox2.com • ࢓ࣄͰ͸σβΠϯ͠ͳ͕ΒNext(SSR)΍GatsbyJSΛ΍ͬͯ·͢ Freelance web engineer Yuki Takemoto ୭ʁ