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

Transcript

1. Gatsby.jsͱCloud FunctionsͰ ຖिࣗಈͰίϯςϯπ͕ߋ৽͞Εଓ͚Δ ϑϨʔϜϫʔΫൺֱαΠτΛ࡞ͬͨ࿩ ϑϩϯτΤϯυ Night #1on 2019/09/04 @kikunantoka
2. ࣗݾ঺հ about: name: Fumitaka Kikukawa work_at: giftee Inc. twitter: @kikunantoka job: engineer // ීஈ͸RailsΛ৮͍ͬͯ·͢ // ॊΒ͔ΊͳΦϊΛ͓ئ͍͠·͢ //ʢࢦఠ͸͍͖͍ͯͨͩͨ͠Ͱ͢ ʣ
3. ݸਓ։ൃ https://nakamy.com
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. Cloud Functions for Firebase • αʔόϨεͰJSͷؔ਺Λ࣮ߦͰ͖ΔαʔϏε • JSͰ΋TSͰ΋ॻ͚Δ • FunctionΛੜ੒͢Δ࣌ʹࢦఆͰ͖Δ
18. Cloud Functions for Firebase • ఆظ࣮ߦ͕Ͱ͖Δ • CronܗࣜͰࢦఆ͢Δ͚ͩʢຖि݄༵೔10࣌ʣ exports.scheduledFunctionCrontab = functions.pubsub .schedule("0 10 * * 1”) .timeZone("Asia/Tokyo") .onRun(() => { return 0 })
19. γεςϜߏ੒ 0 10 * * 1 ᶃ ϑϨʔϜϫʔΫͷ ϦϙδτϦҰཡΛऔಘ ᶄ GitHub APIΛୟ͍֤ͯϦϙδτϦͷ ελʔ਺ͳͲͷσʔλΛऩू ᶅ σʔλΛYamlϑΝΠϧʹ·ͱΊͯ kikunantoka/framework-mania ʹPush ᶆ PushΛhookͯ͠ɺbuild & deploy ᶇίϯςϯπ͕ߋ৽͞ΕΔ
20. σϞ
21. σϞ
22. ͜ͷγεςϜߏ੒ͷྑ͍ͱ͜Ζ • ϝσΟΞͱͯ͠͸ɺߋ৽ස౓͕1िؒʹ1ճఔ౓Ͱྑ͍ • ຖճAPIΛୟ͘ඞཁ͕ͳ͍ • APIͷ݁ՌΛΩϟογϡ͢Δʁ • ιʔεΛॻ͖׵͑Δํ๏Ͱ΋ྑ͍ͷͰ͸ • APIΛୟ͔ͳ͍ͷͰɺඳը͕ૣ͍
23. ͜ͷγεςϜߏ੒ͷྑ͍ͱ͜Ζ • ΄΅ແྉͰӡ༻Ͱ͖Δ • ์ஔ͍ͯͯ͠΋େৎ෉ • Ϟνϕʔγϣϯ͕อͯΔ • ݸਓ։ൃͱͯ͠͸ɺ͚ͬ͜͏େࣄ
24. ։ൃͷ͋Ε͜Ε
25. GitHub APIʹ͍ͭͯ • JSΫϥΠΞϯτ͸ެࣜͷ΋ͷΛ࢖͏ͱྑ͍ • https://github.com/octokit/rest.js • υΩϡϝϯτ͕গ͠ݕࡧͮ͠Β͍
26. ࠓޙͷల๬ • ʮLatest commit XX daysʯग़͍ͨ͠ • 1िؒͷࠩ෼ΛऔΓ͍ͨ • Star਺ͷ৳ͼͳͲ • FireStoreʹຖिͷஅ໘σʔλΛ஝ੵ͍ͯͬͯ͠ɺࠩ෼Λग़͢
27. ࠓޙͷల๬ • ଞͷϑϨʔϜϫʔΫ/ϥΠϒϥϦͷςʔϚ΋·ͱΊ͍ͨ • React UI Component Framework • Vue UI Component Framework • ೔෇ϥΠϒϥϦʢmoment.js, day.jsʣͷൺֱ • ͜ΜͳςʔϚ͕ྑ͍ͷͰ͸ɺͱ͍͏Ҋ͕͋Ε͹ɺͥͻ࠙਌ձͰ
29. ίϚʔγϟϧ - We are hiring !!!