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 ΛݟΔݶΓɺ࠷ۙϗοτͳٕज़

6. None
7. None

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ʣͷൺֱ • ͜ΜͳςʔϚ͕ྑ͍ͷͰ͸ɺͱ͍͏Ҋ͕͋Ε͹ɺͥͻ࠙਌ձͰ
28. None

29. ίϚʔγϟϧ - We are hiring !!!