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
300
react-query-auth + gin-jwtでユーザ認証
taumu
0
810
総合トップグロースに向けた負債返済のお話
taumu
0
1.1k
Other Decks in Programming
See All in Programming
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
570
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
1.8k
為你自己學 Python - 冷知識篇
eddie
1
350
Kiroで始めるAI-DLC
kaonash
2
620
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
450
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
チームのテスト力を鍛える
goyoki
3
890
Testing Trophyは叫ばない
toms74209200
0
890
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.5k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
AI時代のUIはどこへ行く?
yusukebe
18
9.1k
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
260
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Thoughts on Productivity
jonyablonski
70
4.8k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Navigating Team Friction
lara
189
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
How STYLIGHT went responsive
nonsquared
100
5.8k
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 + Ϟμϯͳ։ൃڥ + ϦονͳΞϓϦέʔγϣϯ