Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

τ μ [taumu]

May 23, 2020
Tweet

More Decks by τ μ [taumu]

Other Decks in Programming

Transcript

  1. ͓͞Β͍Jamstack • JS + API + ϏϧυࡁΈMarkup • ߴ଎ •

    ηΩϡΞ • ߴεέʔϥϏϦςΟ • SSR ∉ Jamstack
  2. ࣮૷ྫ // gatsby-ssr.js // gatsby-browser.js (ڞ௨) export const wrapRootElement =

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

    ({ element }) => { const store = createStore() return <Provider store={store}>{element}</Provider> } Gatsbyͷϧʔτίϯϙʔωϯτʹ React ReduxͷProviderΛwrap͢Δ
  4. खʹೖͬͨ΋ͷ • UX • ReactʹΑΔϦονͳSPA • GatsbyʹΑΔγʔϜϨεͳϖʔδҠಈ • ੩తϖʔδ഑৴ʹΑΔݕࡧྲྀೖ •

    DX • React ReduxʹΑΔϞμϯͳΞϓϦ։ൃ؀ڥ • GatsbyʹΑΔϞμϯͳ੩తϖʔδ։ൃ؀ڥ • Continuous Deploy(master pushͰଈσϓϩΠ; GitHub + Netlify)
  5. ·ͱΊ Gatsby + React + Redux ʹΑΔݸਓ։ൃ → ແྉ +

    SEO + Ϟμϯͳ։ൃ؀ڥ + ϦονͳΞϓϦέʔγϣϯ