Gatsby.jsで導入事例をバシバシ読めるSPAなLPを作った話 / gatsby-js-for-biz-lp

Gatsby.jsで導入事例をバシバシ読めるSPAなLPを作った話 / gatsby-js-for-biz-lp

- Gatsby.js を採用した背景
- Gatsby.js とは
- どうやって作ったか
- できあがったもの
- リリースしてどうだったか
- 所感など

A79762150f8a3c6015ec11c4f494a371?s=128

kikunantoka

April 25, 2019
Tweet

Transcript

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

  2. ࣗݾ঺հ @kikunantoka

  3. ݸਓ։ൃ https://nakamy.com

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

  5. ࣗݾ঺հ about: name: Fumitaka Kikukawa url: https://kikunantoka.com twitter: @kikunantoka job:

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

  7. ఻͍͑ͨ͜ͱ • Gatsby.js Λ࠾༻ͨ͠എܠ • Gatsby.js ͱ͸ • Ͳ͏΍ͬͯ࡞͔ͬͨ •

    Ͱ͖͕͋ͬͨ΋ͷ • ϦϦʔεͯ͠Ͳ͏͔ͩͬͨ • ॴײͳͲ
  8. Gatsby.js Λ࠾༻ͨ͠എܠ

  9. giftee

  10. giftee

  11. giftee

  12. giftee

  13. giftee for Buisness

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

  15. LINEೝূͷύλʔϯ΋ఏڙ HJGUFFΠϯελϯτ΢ΟϯGPS-*/&ͷڧΈᶃ ©2018 gi)ee Inc. all rights reserved J நબ͔Βܠ඼ͷఏڙ·ͰҰؾ௨؏Ͱ͝ఏڙ

    நબγεςϜ ʢΠϯελϯτ΢Οϯʣ σδλϧΪϑτͷఏڙ ʢछྨҎ্ͷܠ඼ʣ ϦΞϧλΠϜʹநબɺ ͦͷ৔Ͱܠ඼Λ෇༩
  16. ΊͬͪΌΞΫηεདྷΔ • ༑ͩͪ਺ 2300ສͷLINEΞΧ΢ϯτͰΩϟϯϖʔϯΛ࣮ࢪͨ݁͠Ռ ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ࠷େ 30ສRPMɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^ʉ

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

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

  19. ϦχϡʔΞϧ • ๏ਓ޲͚ϓϩμΫτΛ୲౰͍ͯͨ͠ͷͰɺͲ͏ʹ͔͔ͨͬ͠ ͨ • Πϯό΢ϯυͷ໰͍߹ΘͤͰޮ཰Α͘ϓϩμΫτΛεέʔϧ ͍͖͔ͤͯͨͬͨ͞ • ϦχϡʔΞϧ͢Δ͜ͱʹ •

    ϏδωεαΠυʹ࣮ݱ͍ͨ͜͠ͱɺίϯςϯπͷ಺༰ΛXDͰ ॻ͖ग़ͯ͠΋Β͏
  20. XDͷ಺༰

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

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

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

  24. ͦ͏ͩɺGatsby.js ͩ

  25. Gatsby.js ʹ͍ͭͯ

  26. Gatsby.jsͱ͸ • ੩తαΠτδΣωϨʔλ • React Ͱॻ͚Δ • SPAͳ੩తαΠτΛੜ੒Ͱ͖Δ • StaticGen

    ΛݟΔݶΓɺ࠷ۙϗοτͳٕज़
  27. Gatsby.jsͱ͸

  28. Gatsby.jsͱ͸

  29. Ͳ͏΍ͬͯ࡞͔ͬͨ

  30. Starter ͷબఆ • ଞͷҊ݅Ͱ΋࢖͍ͬͯΔͷͰɺSemantic UIΛ࢖͍͔ͨͬͨ • Semantic UI React ؚ͕·Ε͍ͯΔStarterΛબΜͩ

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

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

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

  34. Q. CSS͸ʁ

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

  36. A. CSS ModulesΛ࢖ͬͨ • ͿͬͪΌ͚޷Έͷ෦෼΋͋Δ • ϑΝΠϧ෼͚͍ͨ • Կ΋͠ͳͯ͘΋ɺϑΝΠϧͷγϯλοΫεϋΠϥΠτ͕ޮ͍ͯཉ ͍͠

    • ଞͷબ୒ࢶͱͯ͠͸͜ͷล • Styled Components • CSS in JS
  37. A. CSS ModulesΛ࢖ͬͨ • ίϯϙʔωϯτͷjsϑΝΠϧͱ1ର1ରԠ • footer.js / footer.module.sass •

    pages/ ͰCSSΛॻ͔ͳ͍Α͏ʹઃܭͨ͠ • ίϯϙʔωϯτଆͰελΠϧͷࠩ෼ΛΧόʔ͢Δ • ίϯϙʔωϯτΛ࢖͏͚ͩͰϖʔδ͕׬੒͢Δ • CSS͕อकͰ͖ͳ͘ͳΔͷΛ๷͙
  38. Q. ը૾ͷ࠷దԽ͸ʁ

  39. A. gatsby-imageΛ࢖ͬͨ • ಡΈࠐΈʹΑΔΨλπΩΛ๷͛Δ • ͦͷ·· <img> λάͰը૾ΛಡΈࠐΉͱΨλπΫ • ը૾ͷϦαΠζ&ѹॖ΋΍ͬͯ͘ΕΔ

    • .webp ʹ΋ରԠͯ͘͠ΕΔ • ϨΠδʔϩʔυ΋΍ͬͯ͘ΕΔ • ߥΒ໨ͷBase64Λઌग़ͨ͠͠ΓɺTransitionΛՃ͑ͨΓ
  40. A. gatsby-imageΛ࢖ͬͨ • Before

  41. A. gatsby-imageΛ࢖ͬͨ • After

  42. Q. ϗεςΟϯά͸ʁ

  43. A. Netlify Λ࢖ͬͨ

  44. A. Netlify Λ࢖ͬͨ • GitHubͷϦϙδτϦΛඥ෇͚Δ͚ͩͰɺϏϧυ & σϓϩΠ͕ Ͱ͖Δ • ΧελϜυϝΠϯ

    & SSLԽରԠ΋ແྉͰͰ͖Δ • Ϗϧυ͕͚͜ΔίϛοτΛͯ͠΋ɺຊ൪؀ڥ͸ͪΌΜͱಈ࡞ ͨ͠··ͷঢ়ଶ͕อͨΕΔ • ϏδωεαΠυ΋҆৺ͯ͠ίϛοτͰ͖Δ
  45. A. Netlify Λ࢖ͬͨ • READMEʹόοδΛ෇͚Δ͜ͱͰσϓϩΠ͕੒ޭ͍ͯ͠Δ͔ Λڞ༗Ͱ͖Δ

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

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

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

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

    ਺஋Λए͍ͯ͘͘͠ͱɺͲΜͲΜॳظͷը໘͕…
  50. Netlify ͷ஫ҙ఺ • ެࣜʹ࣭໰ͯ͠Έͨ • ͕ɺҰ౓ɺ؀ڥ͝ͱফ͠ ͯɺཱͯ௚͔͢͠ͳ͍ɺ ͱͷ͜ͱ

  51. Q. ͦͷଞ͸ʁ

  52. A. ॾʑἧ͖͍ͬͯͯ·͢ • OGP͸HelmetΛ࢖͏ • ֤ϖʔδͰΦʔόʔϥΠυ΋Ͱ͖Δ • Google Analytics ͸

    `gatsby-plugin-google-analytics` Λ࢖͏ • Google Tag Manager ͸ `gatsby-plugin-google- tagmanager`
  53. Ͱ͖͕͋ͬͨ΋ͷ

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

  55. Ͱ͖͕͋ͬͨ΋ͷ ✨ • ͱʹ͔͘ੈͷதʹग़ͯ͠ɺվળ • ϝΠϯͷαʔϏεͷ։ൃΛ͠ͳ͕Β3ϲ݄͘Β͍ • ը૾ͷ࠷దԽ͸·ͩҰ෦ͷϖʔδ͔͠Ͱ͖͍ͯͳ͍ • ΞΫηεͷଟ͍ϖʔδ͔Βվળ͍ͯ͘͠

    • ೔ʑɺগͣͭ͠վળ͍͍ͯͬͯ͠Δ࠷த • ಋೖࣄྫͳͲͷίϯςϯπ΋૿΍͍͍ͯͬͯ͠Δ
  56. ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠ • ཁ݅ • λάΛ෇͚͍ͨ • λάͰݕࡧͯ͠ಋೖࣄྫΛݟ͍͖͍ͯͨ • ֤ϖʔδͷ಺༰͸ଞͷϖʔδͱಉ༷ʹίϯϙʔωϯτͷ૊ Έ߹ΘͤͰࣗ༝ʹϨΠΞ΢τΛ͍ͨ͠

  57. ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠ • ϒϩάΛ࡞Δ࣌ͷ࢓૊ΈΛԠ༻ͨ͠ • 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
  58. ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠ • ϒϩάΛ࡞Δ࣌ͷ࢓૊ΈΛԠ༻ͨ͠ • 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
  59. ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠ • ϒϩάΛ࡞Δ࣌ͷ࢓૊ΈΛԠ༻ͨ͠ • 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 }) })
  60. ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠

  61. ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠ // 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
  62. ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠

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

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

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

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

  67. ॴײͳͲ

  68. ॴײͳͲ • Gatsby + Netlify ͷ૊Έ߹Θͤศར • ։ൃମݧͱͯ͠͸ྑ͔ͬͨ • Ұ௨ΓඞཁͳϓϥάΠϯ͕ἧ͖͍ͬͯͯΔ

    • νϡʔτϦΞϧ͕ॆ࣮͍ͯͯ͠ɺ΍Γ͍ͨ͜ͱ͸େମެࣜʹ ॻ͍ͯ͋Δ • ϏδωεαΠυʹReactΛ৮ͬͯ΋Β͏͜ͱ΋Ͱ͖ͨ
  69. ࠓճ࿩ͨ͠಺༰ • Gatsby.js ͕ྲྀߦ͖͍ͬͯͯͯɺݸਓϒϩάͳͲͰ࢖ΘΕΔ͜ ͱ͕ଟ͘ͳ͖͕ͬͯͨɺͦΕΛۀ຿Ͱ࢖ͬͨࣄྫͷ঺հ

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