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
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
260
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
概念モデル→論理モデルで気をつけていること
sunnyone
3
290
Deep Dive into Kotlin Flow
jmatsu
1
360
Kiroで始めるAI-DLC
kaonash
2
620
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
2k
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
旅行プランAIエージェント開発の裏側
ippo012
2
920
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
Featured
See All Featured
Visualization
eitanlees
148
16k
Making Projects Easy
brettharned
117
6.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
KATA
mclloyd
32
14k
Site-Speed That Sticks
csswizardry
10
820
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Docker and Python
trallard
46
3.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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 + Ϟμϯͳ։ൃڥ + ϦονͳΞϓϦέʔγϣϯ