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

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ίϯϙʔωϯτ ͔Β3FBDU
    3FEVYͷ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 + Ϟμϯͳ։ൃ؀ڥ + ϦονͳΞϓϦέʔγϣϯ