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

by kikunantoka

Slide 1

Slide 1 text

Gatsby.jsͱCloud FunctionsͰ ຖिࣗಈͰίϯςϯπ͕ߋ৽͞Εଓ͚Δ ϑϨʔϜϫʔΫൺֱαΠτΛ࡞ͬͨ࿩ Gotanda.js #13on 2019/10/04 @kikunantoka

Slide 2

Slide 2 text

ࣗݾ঺հ about: name: Fumitaka Kikukawa work_at: giftee Inc. twitter: @kikunantoka job: software engineer // ීஈ͸RailsΛ৮͍ͬͯ·͢ // ॊΒ͔ΊͳΦϊΛ͓ئ͍͠·͢ //ʢࢦఠ͸͍͖͍ͯͨͩͨ͠Ͱ͢ ʣ

Slide 3

Slide 3 text

giftee Inc, in Gotanda

Slide 4

Slide 4 text

ʮGatsby.jsʯ ͬͯ஌ͬͯ·͔͢ʁ ?

Slide 5

Slide 5 text

• ੩తαΠτδΣωϨʔλ • React Ͱॻ͚Δ • SPAͳ੩తαΠτΛੜ੒Ͱ͖Δ • StaticGen ΛݟΔݶΓɺ࠷ۙϗοτͳٕज़

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

ϗεςΟϯά • NetlifyΛ࢖͏ͱGatsby.jsͰ࡞੒ͨ͠੩తαΠτΛ؆୯ʹϗεςΟϯάͰ͖Δ

Slide 9

Slide 9 text

Gatsby.jsͰݸਓͷϒϩάΛ࡞ͬͨ https://kikunantoka.com

Slide 10

Slide 10 text

Gatsby.jsͰۀ຿Ͱ๏ਓ޲͚LPΛ࡞ͬͨ https://giftee.biz

Slide 11

Slide 11 text

Gatsby.jsͰۀ຿Ͱ๏ਓ޲͚LPΛ࡞ͬͨ https://speakerdeck.com/kikunantoka/

Slide 12

Slide 12 text

Gatsby.js x Netlify ศར !

Slide 13

Slide 13 text

͜ͷ૊Έ߹ΘͤͰԿ͔໘ന͍͜ͱ͕Ͱ͖ͳ͍͔ • GitHubͷϦϙδτϦʹPush͢ΔͱɺNetlifyͰBuild͕૸ΓɺσϓϩΠͯ͘͠Εͯί ϯςϯπ͕ߋ৽͞ΕΔ • GitHubͷAPIΛୟ͍ͯɺ௚઀ίϛοτͤ͞Ε͹ɺߋ৽ΛࣗಈԽͰ͖ΔͷͰ͸

Slide 14

Slide 14 text

͜ͷ૊Έ߹ΘͤͰԿ͔໘ന͍͜ͱ͕Ͱ͖ͳ͍͔

Slide 15

Slide 15 text

͜Εͩ !

Slide 16

Slide 16 text

Gatsby.jsͱCloud FunctionsͰ ຖिࣗಈͰίϯςϯπ͕ߋ৽͞Εଓ͚Δ ϑϨʔϜϫʔΫൺֱαΠτΛ࡞ͬͨ࿩ ϑϩϯτΤϯυ Night #1on 2019/09/04 @kikunantoka

Slide 17

Slide 17 text

͜Μͳײ͡ͷϓϩτλΠϓΛ࡞ͬͨ

Slide 18

Slide 18 text

γεςϜߏ੒ 0 10 * * 1 ᶃ ϑϨʔϜϫʔΫͷ ϦϙδτϦҰཡΛऔಘ ᶄ GitHub APIΛୟ͍֤ͯϦϙδτϦͷ ελʔ਺ͳͲͷσʔλΛऩू ᶅ σʔλΛYamlϑΝΠϧʹ·ͱΊͯ kikunantoka/framework-mania ʹPush ᶆ PushΛhookͯ͠ɺbuild & deploy ᶇίϯςϯπ͕ߋ৽͞ΕΔ

Slide 19

Slide 19 text

Cloud Functions for Firebase • αʔόϨεͰJSͷؔ਺Λ࣮ߦͰ͖ΔαʔϏε • JSͰ΋TSͰ΋ॻ͚Δ • FunctionΛੜ੒͢Δ࣌ʹࢦఆͰ͖Δ

Slide 20

Slide 20 text

Cloud Functions for Firebase • ఆظ࣮ߦ͕Ͱ͖Δ • CronܗࣜͰࢦఆ͢Δ͚ͩʢຖि݄༵೔10࣌ʣ exports.scheduledFunctionCrontab = functions.pubsub .schedule("0 10 * * 1”) .timeZone("Asia/Tokyo") .onRun(() => { return 0 })

Slide 21

Slide 21 text

σϞ

Slide 22

Slide 22 text

Slide 23

Slide 23 text

σϞ

Slide 24

Slide 24 text

Slide 25

Slide 25 text

σϞ

Slide 26

Slide 26 text

Slide 27

Slide 27 text

σϞ

Slide 28

Slide 28 text

σϞ

Slide 29

Slide 29 text

Slide 30

Slide 30 text

σϞ

Slide 31

Slide 31 text

Slide 32

Slide 32 text

σϞ

Slide 33

Slide 33 text

͜ͷγεςϜߏ੒ʹର͢Δ૝͍ • ࢖͍ͬͯΔͷ͸JS͚ͩ • ೴಺ͷ੾Γସ͑ίετ͕গͳ͍

Slide 34

Slide 34 text

͜ͷγεςϜߏ੒ʹର͢Δ૝͍ • ϝσΟΞͱͯ͠͸ɺߋ৽ස౓͕1िؒʹ1ճఔ౓Ͱྑ͍ • ຖճAPIΛୟ͘ඞཁ͕ͳ͍ • APIͷ݁ՌΛΩϟογϡ͢Δʁ • ιʔεΛॻ͖׵͑Δํ๏Ͱ΋ྑ͍ͷͰ͸ • APIΛୟ͔ͳ͍ͷͰɺඳը͕ૣ͍

Slide 35

Slide 35 text

͜ͷγεςϜߏ੒ʹର͢Δ૝͍ • ΄΅ແྉͰӡ༻Ͱ͖Δ • ์ஔ͍ͯͯ͠΋େৎ෉ • Ϟνϕʔγϣϯ͕อͯΔ • ݸਓ։ൃͱͯ͠͸ɺ͚ͬ͜͏େࣄ

Slide 36

Slide 36 text

։ൃͷ͋Ε͜Ε

Slide 37

Slide 37 text

GitHub APIʹ͍ͭͯ • JSΫϥΠΞϯτ͸ެࣜͷ΋ͷΛ࢖͏ͱྑ͍ • https://github.com/octokit/rest.js • υΩϡϝϯτ͕গ͠ݕࡧͮ͠Β͍

Slide 38

Slide 38 text

ࠓޙͷల๬ • ʮLatest commit XX daysʯग़͍ͨ͠ • 1िؒͷࠩ෼ΛऔΓ͍ͨ • Star਺ͷ৳ͼͳͲ • FireStoreʹຖिͷஅ໘σʔλΛ஝ੵ͍ͯͬͯ͠ɺࠩ෼Λग़͢

Slide 39

Slide 39 text

ࠓޙͷల๬ • ଞͷϑϨʔϜϫʔΫ/ϥΠϒϥϦͷςʔϚ΋·ͱΊ͍ͨ • React UI Component Framework • Vue UI Component Framework • ೔෇ϥΠϒϥϦʢmoment.js, day.jsʣͷൺֱ • ͜ΜͳςʔϚ͕ྑ͍ͷͰ͸ɺͱ͍͏Ҋ͕͋Ε͹ɺͥͻ࠙਌ձͰ