Gatsby.jsとCloud Functionsで毎週自動でコンテンツが更新され続けるフレームワーク比較サイトを作った話 / gotanda_js_13

Transcript

1. Gatsby.jsͱCloud FunctionsͰ ຖिࣗಈͰίϯςϯπ͕ߋ৽͞Εଓ͚Δ ϑϨʔϜϫʔΫൺֱαΠτΛ࡞ͬͨ࿩ Gotanda.js #13on 2019/10/04 @kikunantoka
2. ࣗݾ঺հ about: name: Fumitaka Kikukawa work_at: giftee Inc. twitter: @kikunantoka job: software engineer // ීஈ͸RailsΛ৮͍ͬͯ·͢ // ॊΒ͔ΊͳΦϊΛ͓ئ͍͠·͢ //ʢࢦఠ͸͍͖͍ͯͨͩͨ͠Ͱ͢ ʣ
3. giftee Inc, in Gotanda
4. ʮGatsby.jsʯ ͬͯ஌ͬͯ·͔͢ʁ ?
5. • ੩తαΠτδΣωϨʔλ • React Ͱॻ͚Δ • SPAͳ੩తαΠτΛੜ੒Ͱ͖Δ • StaticGen ΛݟΔݶΓɺ࠷ۙϗοτͳٕज़
8. ϗεςΟϯά • NetlifyΛ࢖͏ͱGatsby.jsͰ࡞੒ͨ͠੩తαΠτΛ؆୯ʹϗεςΟϯάͰ͖Δ
9. Gatsby.jsͰݸਓͷϒϩάΛ࡞ͬͨ https://kikunantoka.com
10. Gatsby.jsͰۀ຿Ͱ๏ਓ޲͚LPΛ࡞ͬͨ https://giftee.biz
11. Gatsby.jsͰۀ຿Ͱ๏ਓ޲͚LPΛ࡞ͬͨ https://speakerdeck.com/kikunantoka/
12. Gatsby.js x Netlify ศར !
13. ͜ͷ૊Έ߹ΘͤͰԿ͔໘ന͍͜ͱ͕Ͱ͖ͳ͍͔ • GitHubͷϦϙδτϦʹPush͢ΔͱɺNetlifyͰBuild͕૸ΓɺσϓϩΠͯ͘͠Εͯί ϯςϯπ͕ߋ৽͞ΕΔ • GitHubͷAPIΛୟ͍ͯɺ௚઀ίϛοτͤ͞Ε͹ɺߋ৽ΛࣗಈԽͰ͖ΔͷͰ͸
14. ͜ͷ૊Έ߹ΘͤͰԿ͔໘ന͍͜ͱ͕Ͱ͖ͳ͍͔
15. ͜Εͩ !
16. Gatsby.jsͱCloud FunctionsͰ ຖिࣗಈͰίϯςϯπ͕ߋ৽͞Εଓ͚Δ ϑϨʔϜϫʔΫൺֱαΠτΛ࡞ͬͨ࿩ ϑϩϯτΤϯυ Night #1on 2019/09/04 @kikunantoka
17. ͜Μͳײ͡ͷϓϩτλΠϓΛ࡞ͬͨ
18. γεςϜߏ੒ 0 10 * * 1 ᶃ ϑϨʔϜϫʔΫͷ ϦϙδτϦҰཡΛऔಘ ᶄ GitHub APIΛୟ͍֤ͯϦϙδτϦͷ ελʔ਺ͳͲͷσʔλΛऩू ᶅ σʔλΛYamlϑΝΠϧʹ·ͱΊͯ kikunantoka/framework-mania ʹPush ᶆ PushΛhookͯ͠ɺbuild & deploy ᶇίϯςϯπ͕ߋ৽͞ΕΔ
19. Cloud Functions for Firebase • αʔόϨεͰJSͷؔ਺Λ࣮ߦͰ͖ΔαʔϏε • JSͰ΋TSͰ΋ॻ͚Δ • FunctionΛੜ੒͢Δ࣌ʹࢦఆͰ͖Δ
20. Cloud Functions for Firebase • ఆظ࣮ߦ͕Ͱ͖Δ • CronܗࣜͰࢦఆ͢Δ͚ͩʢຖि݄༵೔10࣌ʣ exports.scheduledFunctionCrontab = functions.pubsub .schedule("0 10 * * 1”) .timeZone("Asia/Tokyo") .onRun(() => { return 0 })
21. σϞ
22. γεςϜߏ੒ 0 10 * * 1 ᶃ ϑϨʔϜϫʔΫͷ ϦϙδτϦҰཡΛऔಘ ᶄ GitHub APIΛୟ͍֤ͯϦϙδτϦͷ ελʔ਺ͳͲͷσʔλΛऩू ᶅ σʔλΛYamlϑΝΠϧʹ·ͱΊͯ kikunantoka/framework-mania ʹPush ᶆ PushΛhookͯ͠ɺbuild & deploy ᶇίϯςϯπ͕ߋ৽͞ΕΔ
23. σϞ
24. γεςϜߏ੒ 0 10 * * 1 ᶃ ϑϨʔϜϫʔΫͷ ϦϙδτϦҰཡΛऔಘ ᶄ GitHub APIΛୟ͍֤ͯϦϙδτϦͷ ελʔ਺ͳͲͷσʔλΛऩू ᶅ σʔλΛYamlϑΝΠϧʹ·ͱΊͯ kikunantoka/framework-mania ʹPush ᶆ PushΛhookͯ͠ɺbuild & deploy ᶇίϯςϯπ͕ߋ৽͞ΕΔ
25. σϞ
26. γεςϜߏ੒ 0 10 * * 1 ᶃ ϑϨʔϜϫʔΫͷ ϦϙδτϦҰཡΛऔಘ ᶄ GitHub APIΛୟ͍֤ͯϦϙδτϦͷ ελʔ਺ͳͲͷσʔλΛऩू ᶅ σʔλΛYamlϑΝΠϧʹ·ͱΊͯ kikunantoka/framework-mania ʹPush ᶆ PushΛhookͯ͠ɺbuild & deploy ᶇίϯςϯπ͕ߋ৽͞ΕΔ
27. σϞ
28. σϞ
29. γεςϜߏ੒ 0 10 * * 1 ᶃ ϑϨʔϜϫʔΫͷ ϦϙδτϦҰཡΛऔಘ ᶄ GitHub APIΛୟ͍֤ͯϦϙδτϦͷ ελʔ਺ͳͲͷσʔλΛऩू ᶅ σʔλΛYamlϑΝΠϧʹ·ͱΊͯ kikunantoka/framework-mania ʹPush ᶆ PushΛhookͯ͠ɺbuild & deploy ᶇίϯςϯπ͕ߋ৽͞ΕΔ
30. σϞ
31. γεςϜߏ੒ 0 10 * * 1 ᶃ ϑϨʔϜϫʔΫͷ ϦϙδτϦҰཡΛऔಘ ᶄ GitHub APIΛୟ͍֤ͯϦϙδτϦͷ ελʔ਺ͳͲͷσʔλΛऩू ᶅ σʔλΛYamlϑΝΠϧʹ·ͱΊͯ kikunantoka/framework-mania ʹPush ᶆ PushΛhookͯ͠ɺbuild & deploy ᶇίϯςϯπ͕ߋ৽͞ΕΔ
32. σϞ
33. ͜ͷγεςϜߏ੒ʹର͢Δ૝͍ • ࢖͍ͬͯΔͷ͸JS͚ͩ • ೴಺ͷ੾Γସ͑ίετ͕গͳ͍
34. ͜ͷγεςϜߏ੒ʹର͢Δ૝͍ • ϝσΟΞͱͯ͠͸ɺߋ৽ස౓͕1िؒʹ1ճఔ౓Ͱྑ͍ • ຖճAPIΛୟ͘ඞཁ͕ͳ͍ • APIͷ݁ՌΛΩϟογϡ͢Δʁ • ιʔεΛॻ͖׵͑Δํ๏Ͱ΋ྑ͍ͷͰ͸ • APIΛୟ͔ͳ͍ͷͰɺඳը͕ૣ͍
35. ͜ͷγεςϜߏ੒ʹର͢Δ૝͍ • ΄΅ແྉͰӡ༻Ͱ͖Δ • ์ஔ͍ͯͯ͠΋େৎ෉ • Ϟνϕʔγϣϯ͕อͯΔ • ݸਓ։ൃͱͯ͠͸ɺ͚ͬ͜͏େࣄ
36. ։ൃͷ͋Ε͜Ε
37. GitHub APIʹ͍ͭͯ • JSΫϥΠΞϯτ͸ެࣜͷ΋ͷΛ࢖͏ͱྑ͍ • https://github.com/octokit/rest.js • υΩϡϝϯτ͕গ͠ݕࡧͮ͠Β͍
38. ࠓޙͷల๬ • ʮLatest commit XX daysʯग़͍ͨ͠ • 1िؒͷࠩ෼ΛऔΓ͍ͨ • Star਺ͷ৳ͼͳͲ • FireStoreʹຖिͷஅ໘σʔλΛ஝ੵ͍ͯͬͯ͠ɺࠩ෼Λग़͢
39. ࠓޙͷల๬ • ଞͷϑϨʔϜϫʔΫ/ϥΠϒϥϦͷςʔϚ΋·ͱΊ͍ͨ • React UI Component Framework • Vue UI Component Framework • ೔෇ϥΠϒϥϦʢmoment.js, day.jsʣͷൺֱ • ͜ΜͳςʔϚ͕ྑ͍ͷͰ͸ɺͱ͍͏Ҋ͕͋Ε͹ɺͥͻ࠙਌ձͰ
41. ίϚʔγϟϧ - We are hiring !!!