Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Gatsby.jsとCloud Functionsで毎週自動でコンテンツが更新され続けるフレームワーク比較サイトを作った話 / frontend_night_1
kikunantoka
September 04, 2019
Technology
3
970
Gatsby.jsとCloud Functionsで毎週自動でコンテンツが更新され続けるフレームワーク比較サイトを作った話 / frontend_night_1
kikunantoka
September 04, 2019
Tweet
Share
More Decks by kikunantoka
See All by kikunantoka
kikunantoka
0
350
kikunantoka
1
1.4k
kikunantoka
1
850
kikunantoka
3
350
kikunantoka
2
370
kikunantoka
1
1.2k
kikunantoka
0
170
kikunantoka
0
470
kikunantoka
1
410
Other Decks in Technology
See All in Technology
yshr1200
0
170
lancers_pr
4
1.5k
go5paopao
8
720
karabish
0
270
pohjus
0
3.3k
yuzutas0
8
3k
900groove
2
450
swoon
1
610
futo23
1
330
akitok_
1
690
ihcomega56
1
570
inductor
1
130
Featured
See All Featured
frogandcode
128
20k
deanohume
294
28k
colly
188
14k
bryan
31
3.4k
rmw
11
810
eileencodes
113
25k
dougneiner
55
5.4k
jonrohan
1021
380k
gr2m
83
11k
paulrobertlloyd
71
3.6k
jponch
103
5k
mongodb
23
3.9k
Transcript
Gatsby.jsͱCloud FunctionsͰ ຖिࣗಈͰίϯςϯπ͕ߋ৽͞Εଓ͚Δ ϑϨʔϜϫʔΫൺֱαΠτΛ࡞ͬͨ ϑϩϯτΤϯυ Night #1on 2019/09/04 @kikunantoka
ࣗݾհ about: name: Fumitaka Kikukawa work_at: giftee Inc. twitter: @kikunantoka
job: engineer // ීஈRailsΛ৮͍ͬͯ·͢ // ॊΒ͔ΊͳΦϊΛ͓ئ͍͠·͢ //ʢࢦఠ͍͖͍ͯͨͩͨ͠Ͱ͢ ʣ
ݸਓ։ൃ https://nakamy.com
ʮGatsby.jsʯ ͬͯͬͯ·͔͢ʁ ?
• ੩తαΠτδΣωϨʔλ • React Ͱॻ͚Δ • SPAͳ੩తαΠτΛੜͰ͖Δ • StaticGen ΛݟΔݶΓɺ࠷ۙϗοτͳٕज़
None
None
ϗεςΟϯά • NetlifyΛ͏ͱGatsby.jsͰ࡞ͨ͠੩తαΠτΛ؆୯ʹϗεςΟϯάͰ͖Δ
Gatsby.jsͰݸਓͷϒϩάΛ࡞ͬͨ https://kikunantoka.com
Gatsby.jsͰۀͰ๏ਓ͚LPΛ࡞ͬͨ https://giftee.biz
Gatsby.jsͰۀͰ๏ਓ͚LPΛ࡞ͬͨ https://speakerdeck.com/kikunantoka/
Gatsby.js x Netlify ศར !
͜ͷΈ߹ΘͤͰԿ͔໘ന͍͜ͱ͕Ͱ͖ͳ͍͔ • GitHubͷϦϙδτϦʹPush͢ΔͱɺNetlifyͰBuild͕ΓɺσϓϩΠͯ͘͠Εͯί ϯςϯπ͕ߋ৽͞ΕΔ • GitHubͷAPIΛୟ͍ͯɺίϛοτͤ͞Εɺߋ৽ΛࣗಈԽͰ͖ΔͷͰ
͜ͷΈ߹ΘͤͰԿ͔໘ന͍͜ͱ͕Ͱ͖ͳ͍͔
͜Εͩ !
Gatsby.jsͱCloud FunctionsͰ ຖिࣗಈͰίϯςϯπ͕ߋ৽͞Εଓ͚Δ ϑϨʔϜϫʔΫൺֱαΠτΛ࡞ͬͨ ϑϩϯτΤϯυ Night #1on 2019/09/04 @kikunantoka
Cloud Functions for Firebase • αʔόϨεͰJSͷؔΛ࣮ߦͰ͖ΔαʔϏε • JSͰTSͰॻ͚Δ • FunctionΛੜ͢Δ࣌ʹࢦఆͰ͖Δ
Cloud Functions for Firebase • ఆظ࣮ߦ͕Ͱ͖Δ • CronܗࣜͰࢦఆ͢Δ͚ͩʢຖि݄༵10࣌ʣ exports.scheduledFunctionCrontab =
functions.pubsub .schedule("0 10 * * 1”) .timeZone("Asia/Tokyo") .onRun(() => { return 0 })
γεςϜߏ 0 10 * * 1 ᶃ ϑϨʔϜϫʔΫͷ ϦϙδτϦҰཡΛऔಘ ᶄ
GitHub APIΛୟ͍֤ͯϦϙδτϦͷ ελʔͳͲͷσʔλΛऩू ᶅ σʔλΛYamlϑΝΠϧʹ·ͱΊͯ kikunantoka/framework-mania ʹPush ᶆ PushΛhookͯ͠ɺbuild & deploy ᶇίϯςϯπ͕ߋ৽͞ΕΔ
σϞ
σϞ
͜ͷγεςϜߏͷྑ͍ͱ͜Ζ • ϝσΟΞͱͯ͠ɺߋ৽ස͕1िؒʹ1ճఔͰྑ͍ • ຖճAPIΛୟ͘ඞཁ͕ͳ͍ • APIͷ݁ՌΛΩϟογϡ͢Δʁ • ιʔεΛॻ͖͑Δํ๏Ͱྑ͍ͷͰ •
APIΛୟ͔ͳ͍ͷͰɺඳը͕ૣ͍
͜ͷγεςϜߏͷྑ͍ͱ͜Ζ • ΄΅ແྉͰӡ༻Ͱ͖Δ • ์ஔ͍ͯͯ͠େৎ • Ϟνϕʔγϣϯ͕อͯΔ • ݸਓ։ൃͱͯ͠ɺ͚ͬ͜͏େࣄ
։ൃͷ͋Ε͜Ε
GitHub APIʹ͍ͭͯ • JSΫϥΠΞϯτެࣜͷͷΛ͏ͱྑ͍ • https://github.com/octokit/rest.js • υΩϡϝϯτ͕গ͠ݕࡧͮ͠Β͍
ࠓޙͷల • ʮLatest commit XX daysʯग़͍ͨ͠ • 1िؒͷࠩΛऔΓ͍ͨ • Starͷ৳ͼͳͲ
• FireStoreʹຖिͷஅ໘σʔλΛੵ͍ͯͬͯ͠ɺࠩΛग़͢
ࠓޙͷల • ଞͷϑϨʔϜϫʔΫ/ϥΠϒϥϦͷςʔϚ·ͱΊ͍ͨ • React UI Component Framework • Vue
UI Component Framework • ϥΠϒϥϦʢmoment.js, day.jsʣͷൺֱ • ͜ΜͳςʔϚ͕ྑ͍ͷͰɺͱ͍͏Ҋ͕͋Εɺͥͻ࠙ձͰ
None
ίϚʔγϟϧ - We are hiring !!!