Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Gatsby + React + Redux によるゼロリスク・ハイリターンな個人開発
Search
τ μ [taumu]
May 23, 2020
Programming
2
1.4k
Gatsby + React + Redux によるゼロリスク・ハイリターンな個人開発
τ μ [taumu]
May 23, 2020
Tweet
Share
More Decks by τ μ [taumu]
See All by τ μ [taumu]
CI改善もDatadogとともに
taumu
0
280
react-query-auth + gin-jwtでユーザ認証
taumu
0
790
総合トップグロースに向けた負債返済のお話
taumu
0
1.1k
Other Decks in Programming
See All in Programming
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
110
PicoRuby on Rails
makicamel
2
110
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
Java on Azure で LangGraph!
kohei3110
0
170
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
VS Code Update for GitHub Copilot
74th
1
480
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
300
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.7k
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
KATA
mclloyd
30
14k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Producing Creativity
orderedlist
PRO
346
40k
Agile that works and the tools we love
rasmusluckow
329
21k
Bash Introduction
62gerente
614
210k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
Gatsby + React + Redux ʹΑΔ θϩϦεΫɾϋΠϦλʔϯͳ ݸਓ։ൃ taumu
ୈ1෦ ݸਓ։ൃͰ Gatsby + React + Redux ߏΛબఆͨ͠
React+ReduxͷSPA ݸਓ։ൃapp v1
React+ReduxͷSPA +੩తϖʔδ(SEOରࡦɾࠂϦϯΫ) ݸਓ։ൃapp v2 ੩తϖʔδ ੩తϖʔδ 41"
v1 -> v2 ػೳཁ݅ • SPAΛ։ൃͯ͠ಈ͔ͤΔ͜ͱ • ੩తͳϖʔδΛ੩తͳϖʔδͱͯ͠৴Ͱ͖Δ͜ͱʢΫϩʔ ϥ͕र͑Δ͜ͱʣ ੩తϖʔδ
੩తϖʔδ 41"
v1 -> v2 ػೳཁ݅ • SPAΛ։ൃͯ͠ಈ͔ͤΔ͜ͱ • ੩తͳϖʔδΛ੩తͳϖʔδͱͯ͠৴Ͱ͖Δ͜ͱʢΫϩʔ ϥ͕र͑Δ͜ͱʣ •
ͱ͍͑ੜͷHTMLॻ͖ͭΒ͍ ੩తϖʔδ ੩తϖʔδ 41"
SSR?
Jamstack!
͓͞Β͍Jamstack • JS + API + ϏϧυࡁΈMarkup • ߴ •
ηΩϡΞ • ߴεέʔϥϏϦςΟ • SSR ∉ Jamstack
JamstackʹΑΔԸܙ • γεςϜͷ୯७Խ • assetsΛదͳॴʹஔ͚ͩ͘ • ϥϯχϯάίετ • શແྉ •
ύϑΥʔϚϯεɾεέʔϥϏϦςΟ • ΞΫηε͕૿͑ͯେৎ
JamstackΛࢧ͑Δٕज़
ୈ2෦ GatsbyͰReduxΛ͏ํ๏
CVOEMFKT μϝͳྫ(1) TDSJQU ੩తϖʔδ ੩తϖʔδ 41"
CVOEMFKT μϝͳྫ(1) TDSJQU ੩తϖʔδ ੩తϖʔδ 41" ͜ͷભҠ͕ܹ ϓϩδΣΫτϏϧυϓ ϩηε͕͔Εͯ໘ 3FBDUίϯϙʔωϯτͰ
TDSJQUλάΛ͏ͷʹ ࠐΈ͕ඞཁ
CVOEMFKT μϝͳྫ(1) TDSJQU ੩తϖʔδ ੩తϖʔδ 41" ͜ͷભҠ͕ܹ ϓϩδΣΫτϏϧυϓ ϩηε͕͔Εͯ໘ 3FBDUίϯϙʔωϯτͰ
TDSJQUλάΛ͏ͷʹ ࠐΈ͕ඞཁ ˞࣮ࡍʹ͜ͷߏͰ ͘Β͍ӡ༻͍ͯ͠·ͨ͠
μϝͳྫ(2) ੩తϖʔδ ੩తϖʔδ 41" (BUTCZͷQBHFTίϯϙʔωϯτ ͔Β3FBDU3FEVYͷ1SPWJEFSί ϯϙʔωϯτΛݺͼग़͢
ಈ͔ͳ͍ʂʂʂ
վΊͯ GatsbyͰReduxΛ͏ํ๏
GatsbyͰReduxΛ͏ํ๏ ͓·͡ͳ͍ϑΝΠϧΛ2ͭϧʔτʹՃ • gatsby-ssr.js • gatsby-browser.js
࣮ྫ // gatsby-ssr.js // gatsby-browser.js (ڞ௨) export const wrapRootElement =
({ element }) => { const store = createStore() return <Provider store={store}>{element}</Provider> }
࣮ྫ // gatsby-ssr.js // gatsby-browser.js (ڞ௨) export const wrapRootElement =
({ element }) => { const store = createStore() return <Provider store={store}>{element}</Provider> } Gatsbyͷϧʔτίϯϙʔωϯτʹ React ReduxͷProviderΛwrap͢Δ
αϯϓϧ https://github.com/gatsbyjs/gatsby/tree/ master/examples/using-redux
ߏਤ
Կ͕ى͍ͬͯ͜Δͷ͔ Gatsby APIΛར༻ • Gatsby SSR API • Gatsby Browser
API
ୈ3෦ Gatsby APIs
Gatsby APIs 1.Gatsby Node API 2.Gatsby SSR API 3.Gatsby Browser
API
Gatsby APIs 1.Gatsby Node API Ϗϧυ࣌ͷػೳ֦ு 2.Gatsby SSR API Ϗϧυͷ࠷ޙɺSSR࣌ͷػೳ֦ு
3.Gatsby Browser API ϒϥβ࣮ߦ࣌ͷػೳ֦ு
Gatsby Node API GatsbyϏϧυ࣌ʹػೳ֦ு͢ΔͨΊͷAPI
Gatsby Node API ར༻ྫ • GraphQL͔ΒσʔλΛऔಘͯ͠੩తϖʔδ Λੜ͢Δ
Gatsby SSR API GatsbyϏϧυͷ࠷ޙɺReactͷSSRΛߦ͏λ ΠϛϯάͰػೳ֦ு͢ΔͨΊͷAPI
Gatsby SSR API ར༻ྫ • Redux Providerͷఆٛ • ڞ௨UIͷૠೖʢϖʔδભҠ࣌ʹΞϯϚϯτ͞Εͳ͍ʣ •
css in jsͱͷ౷߹ • i18n
Gatsby Browser API GatsbyͰੜͨ͠αΠτΛϒϥβ࣮ߦ࣌ʹ ػೳ֦ுΛߦ͏ͨΊͷAPI
Gatsby Browser API ར༻ྫ • Redux Providerͷఆٛ • τϥοΩϯά •
ϓϨʔϯͳCSSϑΝΠϧͷಡΈࠐΈ • i18n
·ͱΊ
ࠓճͷΰʔϧ
खʹೖͬͨͷ • UX • ReactʹΑΔϦονͳSPA • GatsbyʹΑΔγʔϜϨεͳϖʔδҠಈ • ੩తϖʔδ৴ʹΑΔݕࡧྲྀೖ •
DX • React ReduxʹΑΔϞμϯͳΞϓϦ։ൃڥ • GatsbyʹΑΔϞμϯͳ੩తϖʔδ։ൃڥ • Continuous Deploy(master pushͰଈσϓϩΠ; GitHub + Netlify)
·ͱΊ Gatsby + React + Redux ʹΑΔݸਓ։ൃ → ແྉ +
SEO + Ϟμϯͳ։ൃڥ + ϦονͳΞϓϦέʔγϣϯ