Tweet
Tweet

Slide 1

Slide 1 text

Gatsby.js ͰಋೖࣄྫΛ όγόγಡΊΔSPAͳLPΛ࡞ͬͨ࿩ @kikunantoka We Are JavaScripters! @31th on 2018/04/25

Slide 2

Slide 2 text

ࣗݾ঺հ @kikunantoka

Slide 3

Slide 3 text

ݸਓ։ൃ https://nakamy.com

Slide 4

Slide 4 text

ϘʔυήʔϜ੍࡞ https://tapir-studio.com

Slide 5

Slide 5 text

ࣗݾ঺հ about: name: Fumitaka Kikukawa url: https://kikunantoka.com twitter: @kikunantoka job: engineer work_at: giftee Inc. // giftee is a good company.

Slide 6

Slide 6 text

ࠓճ࿩͢಺༰ • Gatsby.js ͕ྲྀߦ͖͍ͬͯͯͯɺݸਓϒϩάͳͲͰ࢖ΘΕΔ͜ ͱ͕ଟ͘ͳ͖͕ͬͯͨɺͦΕΛۀ຿Ͱ࢖ͬͨࣄྫͷ঺հ

Slide 7

Slide 7 text

఻͍͑ͨ͜ͱ • Gatsby.js Λ࠾༻ͨ͠എܠ • Gatsby.js ͱ͸ • Ͳ͏΍ͬͯ࡞͔ͬͨ • Ͱ͖͕͋ͬͨ΋ͷ • ϦϦʔεͯ͠Ͳ͏͔ͩͬͨ • ॴײͳͲ

Slide 8

Slide 8 text

Gatsby.js Λ࠾༻ͨ͠എܠ

Slide 9

Slide 9 text

giftee

Slide 10

Slide 10 text

giftee

Slide 11

Slide 11 text

giftee

Slide 12

Slide 12 text

giftee

Slide 13

Slide 13 text

giftee for Buisness

Slide 14

Slide 14 text

୲౰͍ͯ͠ΔϓϩμΫτ ʢࣾ಺Ͱ($1ͱུ͞Εͩ͢ʜʣ HJGUFFΠϯελϯτ΢ΟϯGPS5XJUUFSͷڧΈᶃ நબ͔Βܠ඼ͷఏڙ·ͰҰؾ௨؏Ͱ͝ఏڙ நબγεςϜ ʢΠϯελϯτ΢Οϯʣ σδλϧΪϑτͷఏڙ ʢछྨҎ্ͷܠ඼ʣ ϦΞϧλΠϜʹநબɺ ͦͷ৔Ͱܠ඼Λ෇༩

Slide 15

Slide 15 text

LINEೝূͷύλʔϯ΋ఏڙ HJGUFFΠϯελϯτ΢ΟϯGPS-*/&ͷڧΈᶃ ©2018 gi)ee Inc. all rights reserved J நબ͔Βܠ඼ͷఏڙ·ͰҰؾ௨؏Ͱ͝ఏڙ நબγεςϜ ʢΠϯελϯτ΢Οϯʣ σδλϧΪϑτͷఏڙ ʢछྨҎ্ͷܠ඼ʣ ϦΞϧλΠϜʹநબɺ ͦͷ৔Ͱܠ඼Λ෇༩

Slide 16

Slide 16 text

ΊͬͪΌΞΫηεདྷΔ • ༑ͩͪ਺ 2300ສͷLINEΞΧ΢ϯτͰΩϟϯϖʔϯΛ࣮ࢪͨ݁͠Ռ ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ࠷େ 30ສRPMɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^ʉ

Slide 17

Slide 17 text

๏ਓ޲͚ͷLP͕͋ͬͨ • ͕ɺWordPressͷWYSIWYGϓϥάΠϯͰϖʔδ͕ߏ੒͞Εͯ ͓ΓɺϖʔδͷಡΈࠐΈ͕ΊͬͪΌ஗͍

Slide 18

Slide 18 text

՝୊ײ • αʔόͷอक΋͞Ε͓ͯΒͣɺPHPͷόʔδϣϯ͸5ܥͷ·· ͩͬͨ • Α͘མ͍ͪͯͨ • WordPress͕ѱ͍༁Ͱ͸ͳ͍

Slide 19

Slide 19 text

ϦχϡʔΞϧ • ๏ਓ޲͚ϓϩμΫτΛ୲౰͍ͯͨ͠ͷͰɺͲ͏ʹ͔͔ͨͬ͠ ͨ • Πϯό΢ϯυͷ໰͍߹ΘͤͰޮ཰Α͘ϓϩμΫτΛεέʔϧ ͍͖͔ͤͯͨͬͨ͞ • ϦχϡʔΞϧ͢Δ͜ͱʹ • ϏδωεαΠυʹ࣮ݱ͍ͨ͜͠ͱɺίϯςϯπͷ಺༰ΛXDͰ ॻ͖ग़ͯ͠΋Β͏

Slide 20

Slide 20 text

XDͷ಺༰

Slide 21

Slide 21 text

ཁ݅ • XDʹඳ͍ͨ಺༰Λެ։͍ͨ͠ • ಋೖࣄྫΛͲΜͲΜ૿΍͍͖͍ͯͨ͠ • ΠϯϑϥΛؚΊͨอकͷ޻਺͕௿͍

Slide 22

Slide 22 text

Ͳ͏΍࣮ͬͯݱ͠Α͏ • ίϯϙʔωϯτԽ͍͚ͯ͠͹ɺ্ख͘࢖͍·Θͤͦ͏ • ϏδωεαΠυ΋HTMLɺCSSॻ͚Δ͠ɺίϯϙʔωϯτ͑͞ ࡞ͬͯ͠·͑͹ɺ૊Έ߹ΘͤͯϖʔδΛ࡞ΕΔͷͰ͸આ • Git͸ؤுͬͯڭ͑Α͏

Slide 23

Slide 23 text

Ͳ͏΍࣮ͬͯݱ͠Α͏ • ͦ΋ͦ΋LPͬͯ੩తίϯςϯπͩ͠ɺ੩తαΠτδΣωϨʔ λͰྑ͍ͷͰ͸ • ϗεςΟϯά͸NetlifyΛ࢖͑͹ɺϏϧυ&σϓϩΠϑϩʔ͸ ೚ͤΒΕΔ͠ɺ૬ੑ͕ྑ͍ͷͰ͸

Slide 24

Slide 24 text

ͦ͏ͩɺGatsby.js ͩ

Slide 25

Slide 25 text

Gatsby.js ʹ͍ͭͯ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Gatsby.jsͱ͸

Slide 28

Slide 28 text

Gatsby.jsͱ͸

Slide 29

Slide 29 text

Ͳ͏΍ͬͯ࡞͔ͬͨ

Slide 30

Slide 30 text

Starter ͷબఆ • ଞͷҊ݅Ͱ΋࢖͍ͬͯΔͷͰɺSemantic UIΛ࢖͍͔ͨͬͨ • Semantic UI React ؚ͕·Ε͍ͯΔStarterΛબΜͩ • https://github.com/pretzelhands/gatsby-starter-semantic-ui

Slide 31

Slide 31 text

Starter ͷબఆ • ެࣜͰ΋୳ͤΔΑ͏ʹͳ͍ͬͯΔ • v2ͷ΋ͷΛ୳͢ͱྑ͍ • https://www.gatsbyjs.org/starters/?v=2

Slide 32

Slide 32 text

ͻͨ͢ΒίϯϙʔωϯτΛ࡞͍ͬͯ͘ • XDΛݟͳ͕Β଍Γͳ͍෦඼Λఆٛͯ͠ɺ࣮૷͍ͯ͘͠ • ͳΔ΂͘൚༻తʹͳΔΑ͏ʹઃܭ • 35ݸ͙Β͍ͷίϯϙʔωϯτʹͳͬͨ

Slide 33

Slide 33 text

ϏδωεαΠυ͸ϖʔδΛ࡞͍ͬͯ͘ • Կݸ͔࡞ͬͨαϯϓϧϖʔδΛݩʹɺจݴΛม͑ͨΓɺίϯ ϙʔωϯτΛม͑ͨΓ • ίϯϙʔωϯτΛ͜͏࢖͏ͱ͜͏ͳΔΑɺͷαϯϓϧ͕͋Δ ͱɺҙ֎ͱͭ·͔ͮͣʹϖʔδ͕Ͱ͖͍ͯͬͨ • Git͸GUIͰ෼͔Γ΍͍͢GitHub DesktopΛೖΕͯ΋Βͬͨ

Slide 34

Slide 34 text

Q. CSS͸ʁ

Slide 35

Slide 35 text

A. CSS ModulesΛ࢖ͬͨ • ଞͷҊ݅Ͱ࢖༻͍ͯ͠ΔSassΛͦͷ··࢖͍͔ͨͬͨ • `gatsby-plugin-sass` ͱ `node-sass` ΛೖΕΔͱྑ͍

Slide 36

Slide 36 text

A. CSS ModulesΛ࢖ͬͨ • ͿͬͪΌ͚޷Έͷ෦෼΋͋Δ • ϑΝΠϧ෼͚͍ͨ • Կ΋͠ͳͯ͘΋ɺϑΝΠϧͷγϯλοΫεϋΠϥΠτ͕ޮ͍ͯཉ ͍͠ • ଞͷબ୒ࢶͱͯ͠͸͜ͷล • Styled Components • CSS in JS

Slide 37

Slide 37 text

A. CSS ModulesΛ࢖ͬͨ • ίϯϙʔωϯτͷjsϑΝΠϧͱ1ର1ରԠ • footer.js / footer.module.sass • pages/ ͰCSSΛॻ͔ͳ͍Α͏ʹઃܭͨ͠ • ίϯϙʔωϯτଆͰελΠϧͷࠩ෼ΛΧόʔ͢Δ • ίϯϙʔωϯτΛ࢖͏͚ͩͰϖʔδ͕׬੒͢Δ • CSS͕อकͰ͖ͳ͘ͳΔͷΛ๷͙

Slide 38

Slide 38 text

Q. ը૾ͷ࠷దԽ͸ʁ

Slide 39

Slide 39 text

A. gatsby-imageΛ࢖ͬͨ • ಡΈࠐΈʹΑΔΨλπΩΛ๷͛Δ • ͦͷ·· λάͰը૾ΛಡΈࠐΉͱΨλπΫ • ը૾ͷϦαΠζ&ѹॖ΋΍ͬͯ͘ΕΔ • .webp ʹ΋ରԠͯ͘͠ΕΔ • ϨΠδʔϩʔυ΋΍ͬͯ͘ΕΔ • ߥΒ໨ͷBase64Λઌग़ͨ͠͠ΓɺTransitionΛՃ͑ͨΓ

Slide 40

Slide 40 text

A. gatsby-imageΛ࢖ͬͨ • Before

Slide 41

Slide 41 text

A. gatsby-imageΛ࢖ͬͨ • After

Slide 42

Slide 42 text

Q. ϗεςΟϯά͸ʁ

Slide 43

Slide 43 text

A. Netlify Λ࢖ͬͨ

Slide 44

Slide 44 text

A. Netlify Λ࢖ͬͨ • GitHubͷϦϙδτϦΛඥ෇͚Δ͚ͩͰɺϏϧυ & σϓϩΠ͕ Ͱ͖Δ • ΧελϜυϝΠϯ & SSLԽରԠ΋ແྉͰͰ͖Δ • Ϗϧυ͕͚͜ΔίϛοτΛͯ͠΋ɺຊ൪؀ڥ͸ͪΌΜͱಈ࡞ ͨ͠··ͷঢ়ଶ͕อͨΕΔ • ϏδωεαΠυ΋҆৺ͯ͠ίϛοτͰ͖Δ

Slide 45

Slide 45 text

A. Netlify Λ࢖ͬͨ • READMEʹόοδΛ෇͚Δ͜ͱͰσϓϩΠ͕੒ޭ͍ͯ͠Δ͔ Λڞ༗Ͱ͖Δ

Slide 46

Slide 46 text

A. Netlify Λ࢖ͬͨ • ϦμΠϨΫτ΋ઃఆͰ͖Δ • ࠓճͷΑ͏ʹϦχϡʔΞϧͱ͔ͰچαΠτͷߏ଄ͱ৽αΠ τͷߏ଄͕ҧ͏৔߹͸ॏๅ͢Δ • ͪΌΜͱઃఆ͢Δ͜ͱͰSEO΋Լ͕Γʹ͍͘

Slide 47

Slide 47 text

Netlify ͷ஫ҙ఺ • ͜ͷઃఆ͸ؾΛ͚ͭͨํ͕ྑ͍ • σϑΥϧτ͕ ʮAutomatically build…ʯʹͳ͍ͬͯΔ

Slide 48

Slide 48 text

Netlify ͷ஫ҙ఺ • PRΛ࡞ͬͨ࣌ʹϨϏϡʔ༻ͷ؀ڥΛཱͯͯ͘ΕΔ • ΊͬͪΌศརʂ • ͕ɺ͔͠͠ɺϚʔδ͞Εͨޙ΋࢒Γଓ͚Δ • ͔͠΋ɺফͤͳ͍

Slide 49

Slide 49 text

Netlify ͷ஫ҙ఺ • ҰԠɺϩϘοτͳͲʹ͸ิ଍͞Εͳ͍Α͏ʹ͸ͳ͍ͬͯΔ ͕ɺաڈͷ։ൃ్தͷ΋ͷ͕ݟΕͯ͠·͏ • ͔͠΋ɺਪଌ͠΍͍͢URL • https://deploy-preview-1--your-domain.netlify.com/ • ਺஋Λए͍ͯ͘͘͠ͱɺͲΜͲΜॳظͷը໘͕…

Slide 50

Slide 50 text

Netlify ͷ஫ҙ఺ • ެࣜʹ࣭໰ͯ͠Έͨ • ͕ɺҰ౓ɺ؀ڥ͝ͱফ͠ ͯɺཱͯ௚͔͢͠ͳ͍ɺ ͱͷ͜ͱ

Slide 51

Slide 51 text

Q. ͦͷଞ͸ʁ

Slide 52

Slide 52 text

A. ॾʑἧ͖͍ͬͯͯ·͢ • OGP͸HelmetΛ࢖͏ • ֤ϖʔδͰΦʔόʔϥΠυ΋Ͱ͖Δ • Google Analytics ͸ `gatsby-plugin-google-analytics` Λ࢖͏ • Google Tag Manager ͸ `gatsby-plugin-google- tagmanager`

Slide 53

Slide 53 text

Ͱ͖͕͋ͬͨ΋ͷ

Slide 54

Slide 54 text

Ͱ͖͕͋ͬͨ΋ͷ ✨ https://giftee.biz

Slide 55

Slide 55 text

Ͱ͖͕͋ͬͨ΋ͷ ✨ • ͱʹ͔͘ੈͷதʹग़ͯ͠ɺվળ • ϝΠϯͷαʔϏεͷ։ൃΛ͠ͳ͕Β3ϲ݄͘Β͍ • ը૾ͷ࠷దԽ͸·ͩҰ෦ͷϖʔδ͔͠Ͱ͖͍ͯͳ͍ • ΞΫηεͷଟ͍ϖʔδ͔Βվળ͍ͯ͘͠ • ೔ʑɺগͣͭ͠վળ͍͍ͯͬͯ͠Δ࠷த • ಋೖࣄྫͳͲͷίϯςϯπ΋૿΍͍͍ͯͬͯ͠Δ

Slide 56

Slide 56 text

ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠ • ཁ݅ • λάΛ෇͚͍ͨ • λάͰݕࡧͯ͠ಋೖࣄྫΛݟ͍͖͍ͯͨ • ֤ϖʔδͷ಺༰͸ଞͷϖʔδͱಉ༷ʹίϯϙʔωϯτͷ૊ Έ߹ΘͤͰࣗ༝ʹϨΠΞ΢τΛ͍ͨ͠

Slide 57

Slide 57 text

ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠ • ϒϩάΛ࡞Δ࣌ͷ࢓૊ΈΛԠ༻ͨ͠ • gatsby-source-filesystem ͰϚʔΫμ΢ϯΛύʔεͯ͠λΠ τϧ΍λάͳͲͷ৘ใΛऔಘ --- path: "/cases/tsutaya" date: "2019-02-01" title: "TSUTAYA様｜新感染Twitterキャンペーン" pointText: "広告出稿なしにオーガニックのみに拡散でCPRT約47円を実現" componentPath: "src/cases/tsutaya/index.js" image: "images/tsutaya.png" tags: ["Twitter", "ファミリーマート"] --- src/cases/tsutaya/index.md

Slide 58

Slide 58 text

ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠ • ϒϩάΛ࡞Δ࣌ͷ࢓૊ΈΛԠ༻ͨ͠ • componentPathΛ࣋ͭ͜ͱͰɺ಺༰͸ࣗ༝ʹ੾Γସ͑ΒΕ ΔΑ͏ʹͨ͠ --- path: "/cases/tsutaya" date: "2019-02-01" title: "TSUTAYA様｜新感染Twitterキャンペーン" pointText: "広告出稿なしにオーガニックのみに拡散でCPRT約47円を実現" componentPath: "src/cases/tsutaya/index.js" image: "images/tsutaya.png" tags: ["Twitter", "ファミリーマート"] --- src/cases/tsutaya/index.md

Slide 59

Slide 59 text

ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠ • ϒϩάΛ࡞Δ࣌ͷ࢓૊ΈΛԠ༻ͨ͠ • componentʹઌఔͷcomponentPathΛ৯΂ͤ͞Δ͜ͱͰ ֤ϖʔδ͕ࣗ༝ͳίϯϙʔωϯτΛಡΈࠐΊΔ gatsby-node.js cases.forEach(({ node }) => { createPage({ path: node.frontmatter.path, component: path.resolve(node.frontmatter.componentPath), context: {}, // additional data can be passed via context }) })

Slide 60

Slide 60 text

ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠

Slide 61

Slide 61 text

ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠ // Tag pages: let tags = [] _.each(cases, edge => { if (_.get(edge, 'node.frontmatter.tags')) { tags = tags.concat(edge.node.frontmatter.tags) } }) tags = _.uniq(tags) tags.forEach(tag => { createPage({ path: `/cases/tags/${_.kebabCase(tag)}/`, component: tagTemplate, context: { tag, }, }) }) gatsby-node.js

Slide 62

Slide 62 text

ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠

Slide 63

Slide 63 text

ϦϦʔεͯ͠Ͳ͏͔ͩͬͨ

Slide 64

Slide 64 text

PV • 2/21ʹϦϦʔεΛͨ͠ • 10,000 PV / ݄͙Β͍৳ͼͨ • ճ༡͕૿͑ͨʢʁʣ

Slide 65

Slide 65 text

SEO • ৳ͼ͍ͯΔϫʔυ΋͋Ε͹ɺམ͍ͪͯΔϫʔυ΋͋ͬͨ • ίϯςϯπΛΨϥοͱม͑ͨͷͰ͜ͷล͸Ұఆ࢓ํ͕ͳ͍ • Gatsby.js Λ࢖͔ͬͨΒSEO͕ҰؾʹԼ͕ͬͨɺͱ͍͏͜ͱ ͸ͳ͍

Slide 66

Slide 66 text

ίϯόʔδϣϯ • ໰͍߹Θͤ਺ • ঃʑʹ৳ͼ͍ͯΔ • ೥౓຤ͱ͍͏͜ͱ΋Өڹ͸͋Γͦ͏ͳͷͰɺ௕ظతʹ ΢Υον͍ͯ͘͠

Slide 67

Slide 67 text

ॴײͳͲ

Slide 68

Slide 68 text

ॴײͳͲ • Gatsby + Netlify ͷ૊Έ߹Θͤศར • ։ൃମݧͱͯ͠͸ྑ͔ͬͨ • Ұ௨ΓඞཁͳϓϥάΠϯ͕ἧ͖͍ͬͯͯΔ • νϡʔτϦΞϧ͕ॆ࣮͍ͯͯ͠ɺ΍Γ͍ͨ͜ͱ͸େମެࣜʹ ॻ͍ͯ͋Δ • ϏδωεαΠυʹReactΛ৮ͬͯ΋Β͏͜ͱ΋Ͱ͖ͨ

Slide 69

Slide 69 text

ࠓճ࿩ͨ͠಺༰ • Gatsby.js ͕ྲྀߦ͖͍ͬͯͯͯɺݸਓϒϩάͳͲͰ࢖ΘΕΔ͜ ͱ͕ଟ͘ͳ͖͕ͬͯͨɺͦΕΛۀ຿Ͱ࢖ͬͨࣄྫͷ঺հ

Slide 70

Slide 70 text

ίϚʔγϟϧ • We are hiring!!! - Ұॹʹಇ͘஥ؒΛืूதʂ ձһ਺ສਓಥഁʂ ࠃ಺/PͷΧδϡΞϧΪϑταʔϏε