Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Gatsby + React + Redux によるゼロリスク・ハイリターンな個人開発
τ μ [taumu]
May 23, 2020
Programming
2
1.2k
Gatsby + React + Redux によるゼロリスク・ハイリターンな個人開発
τ μ [taumu]
May 23, 2020
Tweet
Share
More Decks by τ μ [taumu]
See All by τ μ [taumu]
react-query-auth + gin-jwtでユーザ認証
taumu
0
58
総合トップグロースに向けた負債返済のお話
taumu
0
810
Other Decks in Programming
See All in Programming
Automating Gradle benchmarks at N26
ubiratansoares
PRO
1
140
このタイミングで知っておきたい 開発生産性の高いエンジニア組織の特徴とは / dev-sumi-20220721-productivity-features
findyinc
7
2.6k
Untangling Coroutine Testing (Droidcon Berlin 2022)
zsmb
1
480
「困りごと」から始める個人開発
ikumatadokoro
4
250
Isar勉強会
hoddy3190
0
370
Google I/O 2022 Android関連概要 / Google I/O 2022 Android summary
phicdy
0
380
Edge Side Frontend という新領域
mizchi
22
10k
回帰分析ではlm()ではなくestimatr::lm_robust()を使おう / TokyoR100
dropout009
0
4.5k
AWS Config Custom Rule、ノーコードでできるかな?
watany
0
250
Lookerとdbtの共存
ttccddtoki
0
620
Regular expressions basics/正規表現の基本
kishikawakatsumi
6
260
Pythonによる開発をアップデートするライブラリの紹介
daikikatsuragawa
1
410
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1351
200k
A better future with KSS
kneath
226
16k
How to Ace a Technical Interview
jacobian
266
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
239
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
Mobile First: as difficult as doing things right
swwweet
213
7.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Rails Girls Zürich Keynote
gr2m
87
12k
A Tale of Four Properties
chriscoyier
149
21k
It's Worth the Effort
3n
172
26k
A Modern Web Designer's Workflow
chriscoyier
689
180k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.3k
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 + Ϟμϯͳ։ൃڥ + ϦονͳΞϓϦέʔγϣϯ