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

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

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

563172ec6315e116ca0e10dc71d30f42?s=128

τ μ [taumu]

May 23, 2020
Tweet

Transcript

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

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

  3. React+ReduxͷSPA ݸਓ։ൃapp v1

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

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

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

    ͱ͸͍͑ੜͷHTML௚ॻ͖͸ͭΒ͍ ੩తϖʔδ ੩తϖʔδ 41"
  7. SSR?

  8. Jamstack!

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

    ηΩϡΞ • ߴεέʔϥϏϦςΟ • SSR ∉ Jamstack
  10. JamstackʹΑΔԸܙ • γεςϜͷ୯७Խ • assetsΛద౰ͳ৔ॴʹஔ͚ͩ͘ • ϥϯχϯάίετ • ׬શແྉ •

    ύϑΥʔϚϯεɾεέʔϥϏϦςΟ • ΞΫηε͕૿͑ͯ΋େৎ෉
  11. JamstackΛࢧ͑Δٕज़

  12. ୈ2෦ GatsbyͰReduxΛ࢖͏ํ๏

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

  14. CVOEMFKT μϝͳྫ(1) TDSJQU ੩తϖʔδ ੩తϖʔδ 41" ͜ͷભҠ͕ܹ஗ ϓϩδΣΫτ΍Ϗϧυϓ ϩηε͕෼͔Εͯ໘౗ 3FBDUίϯϙʔωϯτͰ

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

    TDSJQUλάΛ࢖͏ͷʹ࢓ ࠐΈ͕ඞཁ ˞࣮ࡍʹ͜ͷߏ੒Ͱ ೥͘Β͍ӡ༻͍ͯ͠·ͨ͠
  16. μϝͳྫ(2) ੩తϖʔδ ੩తϖʔδ 41" (BUTCZͷQBHFTίϯϙʔωϯτ ͔Β3FBDU3FEVYͷ1SPWJEFSί ϯϙʔωϯτΛݺͼग़͢

  17. ಈ͔ͳ͍ʂʂʂ

  18. վΊͯ GatsbyͰReduxΛ࢖͏ํ๏

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

  20. ࣮૷ྫ // gatsby-ssr.js // gatsby-browser.js (ڞ௨) export const wrapRootElement =

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

    ({ element }) => { const store = createStore() return <Provider store={store}>{element}</Provider> } Gatsbyͷϧʔτίϯϙʔωϯτʹ React ReduxͷProviderΛwrap͢Δ
  22. αϯϓϧ https://github.com/gatsbyjs/gatsby/tree/ master/examples/using-redux

  23. ߏ੒ਤ

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

    API
  25. ୈ3෦ Gatsby APIs

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

    API
  27. Gatsby APIs 1.Gatsby Node API Ϗϧυ࣌ͷػೳ֦ு 2.Gatsby SSR API Ϗϧυͷ࠷ޙɺSSR࣌ͷػೳ֦ு

    3.Gatsby Browser API ϒϥ΢β࣮ߦ࣌ͷػೳ֦ு
  28. Gatsby Node API GatsbyϏϧυ࣌ʹػೳ֦ு͢ΔͨΊͷAPI

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

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

  31. Gatsby SSR API ར༻ྫ • Redux Providerͷఆٛ • ڞ௨UIͷૠೖʢϖʔδભҠ࣌ʹΞϯϚ΢ϯτ͞Εͳ͍ʣ •

    css in jsͱͷ౷߹ • i18n
  32. Gatsby Browser API GatsbyͰੜ੒ͨ͠αΠτΛϒϥ΢β࣮ߦ࣌ʹ ػೳ֦ுΛߦ͏ͨΊͷAPI

  33. Gatsby Browser API ར༻ྫ • Redux Providerͷఆٛ • τϥοΩϯά •

    ϓϨʔϯͳCSSϑΝΠϧͷಡΈࠐΈ • i18n
  34. ·ͱΊ

  35. ࠓճͷΰʔϧ

  36. खʹೖͬͨ΋ͷ • UX • ReactʹΑΔϦονͳSPA • GatsbyʹΑΔγʔϜϨεͳϖʔδҠಈ • ੩తϖʔδ഑৴ʹΑΔݕࡧྲྀೖ •

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

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