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]
自作AIアプリの品質を上げるためにプロンプトエンジニアリングに再入門する
taumu
0
9
AIによる商品説明文生成〜よい説明文をとは何かを考える
taumu
0
21
CI改善もDatadogとともに
taumu
0
310
react-query-auth + gin-jwtでユーザ認証
taumu
0
810
総合トップグロースに向けた負債返済のお話
taumu
0
1.1k
Other Decks in Programming
See All in Programming
止められない医療アプリ、そっと Swift 6 へ
medley
1
140
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.2k
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.5k
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
660
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
5
1.7k
チームの境界をブチ抜いていけ
tokai235
0
140
CSC509 Lecture 01
javiergs
PRO
1
440
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
170
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1.2k
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
520
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
130
開発生産性を上げるための生成AI活用術
starfish719
3
380
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Designing for Performance
lara
610
69k
A Tale of Four Properties
chriscoyier
160
23k
Making Projects Easy
brettharned
119
6.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Invisible Side of Design
smashingmag
301
51k
How to train your dragon (web standard)
notwaldorf
96
6.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
What's in a price? How to price your products and services
michaelherold
246
12k
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 + Ϟμϯͳ։ൃڥ + ϦονͳΞϓϦέʔγϣϯ