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

by kikunantoka

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ݸਓ։ൃ https://nakamy.com

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

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

σϞ

Slide 21

Slide 21 text

σϞ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

։ൃͷ͋Ε͜Ε

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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