Gatsby + React + Redux によるゼロリスク・ハイリターンな個人開発

by τ μ [taumu]

Slide 1

Slide 1 text

Gatsby + React + Redux ʹΑΔ θϩϦεΫɾϋΠϦλʔϯͳ ݸਓ։ൃ taumu

Slide 2

Slide 2 text

ୈ1෦ ݸਓ։ൃͰ Gatsby + React + Redux ߏ੒Λબఆͨ͠࿩

Slide 3

Slide 3 text

React+ReduxͷSPA ݸਓ։ൃapp v1

Slide 4

Slide 4 text

React+ReduxͷSPA +੩తϖʔδ(SEOରࡦɾ޿ࠂϦϯΫ) ݸਓ։ൃapp v2 ੩తϖʔδ ੩తϖʔδ 41"

Slide 5

Slide 5 text

v1 -> v2 ػೳཁ݅ • SPAΛ։ൃͯ͠ಈ͔ͤΔ͜ͱ • ੩తͳϖʔδΛ੩తͳϖʔδͱͯ͠഑৴Ͱ͖Δ͜ͱʢΫϩʔ ϥ͕र͑Δ͜ͱʣ ੩తϖʔδ ੩తϖʔδ 41"

Slide 6

Slide 6 text

v1 -> v2 ػೳཁ݅ • SPAΛ։ൃͯ͠ಈ͔ͤΔ͜ͱ • ੩తͳϖʔδΛ੩తͳϖʔδͱͯ͠഑৴Ͱ͖Δ͜ͱʢΫϩʔ ϥ͕र͑Δ͜ͱʣ • ͱ͸͍͑ੜͷHTML௚ॻ͖͸ͭΒ͍ ੩తϖʔδ ੩తϖʔδ 41"

Slide 7

Slide 7 text

SSR?

Slide 8

Slide 8 text

Jamstack!

Slide 9

Slide 9 text

͓͞Β͍Jamstack • JS + API + ϏϧυࡁΈMarkup • ߴ଎ • ηΩϡΞ • ߴεέʔϥϏϦςΟ • SSR ∉ Jamstack

Slide 10

Slide 10 text

JamstackʹΑΔԸܙ • γεςϜͷ୯७Խ • assetsΛద౰ͳ৔ॴʹஔ͚ͩ͘ • ϥϯχϯάίετ • ׬શແྉ • ύϑΥʔϚϯεɾεέʔϥϏϦςΟ • ΞΫηε͕૿͑ͯ΋େৎ෉

Slide 11

Slide 11 text

JamstackΛࢧ͑Δٕज़

Slide 12

Slide 12 text

ୈ2෦ GatsbyͰReduxΛ࢖͏ํ๏

Slide 13

Slide 13 text

CVOEMFKT μϝͳྫ(1) TDSJQU ੩తϖʔδ ੩తϖʔδ 41"

Slide 14

Slide 14 text

CVOEMFKT μϝͳྫ(1) TDSJQU ੩తϖʔδ ੩తϖʔδ 41" ͜ͷભҠ͕ܹ஗ ϓϩδΣΫτ΍Ϗϧυϓ ϩηε͕෼͔Εͯ໘౗ 3FBDUίϯϙʔωϯτͰ TDSJQUλάΛ࢖͏ͷʹ࢓ ࠐΈ͕ඞཁ

Slide 15

Slide 15 text

CVOEMFKT μϝͳྫ(1) TDSJQU ੩తϖʔδ ੩తϖʔδ 41" ͜ͷભҠ͕ܹ஗ ϓϩδΣΫτ΍Ϗϧυϓ ϩηε͕෼͔Εͯ໘౗ 3FBDUίϯϙʔωϯτͰ TDSJQUλάΛ࢖͏ͷʹ࢓ ࠐΈ͕ඞཁ ˞࣮ࡍʹ͜ͷߏ੒Ͱ ೥͘Β͍ӡ༻͍ͯ͠·ͨ͠

Slide 16

Slide 16 text

μϝͳྫ(2) ੩తϖʔδ ੩తϖʔδ 41" (BUTCZͷQBHFTίϯϙʔωϯτ ͔Β3FBDU3FEVYͷ1SPWJEFSί ϯϙʔωϯτΛݺͼग़͢

Slide 17

Slide 17 text

ಈ͔ͳ͍ʂʂʂ

Slide 18

Slide 18 text

վΊͯ GatsbyͰReduxΛ࢖͏ํ๏

Slide 19

Slide 19 text

GatsbyͰReduxΛ࢖͏ํ๏ ͓·͡ͳ͍ϑΝΠϧΛ2ͭϧʔτʹ௥Ճ • gatsby-ssr.js • gatsby-browser.js

Slide 20

Slide 20 text

࣮૷ྫ // gatsby-ssr.js // gatsby-browser.js (ڞ௨) export const wrapRootElement = ({ element }) => { const store = createStore() return {element} }

Slide 21

Slide 21 text

࣮૷ྫ // gatsby-ssr.js // gatsby-browser.js (ڞ௨) export const wrapRootElement = ({ element }) => { const store = createStore() return {element} } Gatsbyͷϧʔτίϯϙʔωϯτʹ React ReduxͷProviderΛwrap͢Δ

Slide 22

Slide 22 text

αϯϓϧ https://github.com/gatsbyjs/gatsby/tree/ master/examples/using-redux

Slide 23

Slide 23 text

ߏ੒ਤ

Slide 24

Slide 24 text

Կ͕ى͍ͬͯ͜Δͷ͔ Gatsby APIΛར༻ • Gatsby SSR API • Gatsby Browser API

Slide 25

Slide 25 text

ୈ3෦ Gatsby APIs

Slide 26

Slide 26 text

Gatsby APIs 1.Gatsby Node API 2.Gatsby SSR API 3.Gatsby Browser API

Slide 27

Slide 27 text

Gatsby APIs 1.Gatsby Node API Ϗϧυ࣌ͷػೳ֦ு 2.Gatsby SSR API Ϗϧυͷ࠷ޙɺSSR࣌ͷػೳ֦ு 3.Gatsby Browser API ϒϥ΢β࣮ߦ࣌ͷػೳ֦ு

Slide 28

Slide 28 text

Gatsby Node API GatsbyϏϧυ࣌ʹػೳ֦ு͢ΔͨΊͷAPI

Slide 29

Slide 29 text

Gatsby Node API ར༻ྫ • GraphQL͔ΒσʔλΛऔಘͯ͠੩తϖʔδ Λੜ੒͢Δ

Slide 30

Slide 30 text

Gatsby SSR API GatsbyϏϧυͷ࠷ޙɺReactͷSSRΛߦ͏λ ΠϛϯάͰػೳ֦ு͢ΔͨΊͷAPI

Slide 31

Slide 31 text

Gatsby SSR API ར༻ྫ • Redux Providerͷఆٛ • ڞ௨UIͷૠೖʢϖʔδભҠ࣌ʹΞϯϚ΢ϯτ͞Εͳ͍ʣ • css in jsͱͷ౷߹ • i18n

Slide 32

Slide 32 text

Gatsby Browser API GatsbyͰੜ੒ͨ͠αΠτΛϒϥ΢β࣮ߦ࣌ʹ ػೳ֦ுΛߦ͏ͨΊͷAPI

Slide 33

Slide 33 text

Gatsby Browser API ར༻ྫ • Redux Providerͷఆٛ • τϥοΩϯά • ϓϨʔϯͳCSSϑΝΠϧͷಡΈࠐΈ • i18n

Slide 34

Slide 34 text

·ͱΊ

Slide 35

Slide 35 text

ࠓճͷΰʔϧ

Slide 36

Slide 36 text

खʹೖͬͨ΋ͷ • UX • ReactʹΑΔϦονͳSPA • GatsbyʹΑΔγʔϜϨεͳϖʔδҠಈ • ੩తϖʔδ഑৴ʹΑΔݕࡧྲྀೖ • DX • React ReduxʹΑΔϞμϯͳΞϓϦ։ൃ؀ڥ • GatsbyʹΑΔϞμϯͳ੩తϖʔδ։ൃ؀ڥ • Continuous Deploy(master pushͰଈσϓϩΠ; GitHub + Netlify)

Slide 37

Slide 37 text

·ͱΊ Gatsby + React + Redux ʹΑΔݸਓ։ൃ → ແྉ + SEO + Ϟμϯͳ։ൃ؀ڥ + ϦονͳΞϓϦέʔγϣϯ