Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

kikunantoka

April 25, 2019
Tweet

More Decks by kikunantoka

Other Decks in Technology

Transcript

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

    Ͱ͖͕͋ͬͨ΋ͷ • ϦϦʔεͯ͠Ͳ͏͔ͩͬͨ • ॴײͳͲ
  2. LINEೝূͷύλʔϯ΋ఏڙ HJGUFFΠϯελϯτ΢ΟϯGPS-*/&ͷڧΈᶃ ©2018 gi)ee Inc. all rights reserved J நબ͔Βܠ඼ͷఏڙ·ͰҰؾ௨؏Ͱ͝ఏڙ

    நબγεςϜ ʢΠϯελϯτ΢Οϯʣ σδλϧΪϑτͷఏڙ ʢछྨҎ্ͷܠ඼ʣ ϦΞϧλΠϜʹநબɺ ͦͷ৔Ͱܠ඼Λ෇༩
  3. A. CSS ModulesΛ࢖ͬͨ • ίϯϙʔωϯτͷjsϑΝΠϧͱ1ର1ରԠ • footer.js / footer.module.sass •

    pages/ ͰCSSΛॻ͔ͳ͍Α͏ʹઃܭͨ͠ • ίϯϙʔωϯτଆͰελΠϧͷࠩ෼ΛΧόʔ͢Δ • ίϯϙʔωϯτΛ࢖͏͚ͩͰϖʔδ͕׬੒͢Δ • CSS͕อकͰ͖ͳ͘ͳΔͷΛ๷͙
  4. A. gatsby-imageΛ࢖ͬͨ • ಡΈࠐΈʹΑΔΨλπΩΛ๷͛Δ • ͦͷ·· <img> λάͰը૾ΛಡΈࠐΉͱΨλπΫ • ը૾ͷϦαΠζ&ѹॖ΋΍ͬͯ͘ΕΔ

    • .webp ʹ΋ରԠͯ͘͠ΕΔ • ϨΠδʔϩʔυ΋΍ͬͯ͘ΕΔ • ߥΒ໨ͷBase64Λઌग़ͨ͠͠ΓɺTransitionΛՃ͑ͨΓ
  5. A. Netlify Λ࢖ͬͨ • GitHubͷϦϙδτϦΛඥ෇͚Δ͚ͩͰɺϏϧυ & σϓϩΠ͕ Ͱ͖Δ • ΧελϜυϝΠϯ

    & SSLԽରԠ΋ແྉͰͰ͖Δ • Ϗϧυ͕͚͜ΔίϛοτΛͯ͠΋ɺຊ൪؀ڥ͸ͪΌΜͱಈ࡞ ͨ͠··ͷঢ়ଶ͕อͨΕΔ • ϏδωεαΠυ΋҆৺ͯ͠ίϛοτͰ͖Δ
  6. A. ॾʑἧ͖͍ͬͯͯ·͢ • OGP͸HelmetΛ࢖͏ • ֤ϖʔδͰΦʔόʔϥΠυ΋Ͱ͖Δ • Google Analytics ͸

    `gatsby-plugin-google-analytics` Λ࢖͏ • Google Tag Manager ͸ `gatsby-plugin-google- tagmanager`
  7. ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠ • ϒϩάΛ࡞Δ࣌ͷ࢓૊ΈΛԠ༻ͨ͠ • 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
  8. ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠ • ϒϩάΛ࡞Δ࣌ͷ࢓૊ΈΛԠ༻ͨ͠ • 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
  9. ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠ • ϒϩάΛ࡞Δ࣌ͷ࢓૊ΈΛԠ༻ͨ͠ • 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 }) })
  10. ಋೖࣄྫΛͲ͏΍࣮ͬͯݱ͔ͨ͠ // 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
  11. ॴײͳͲ • Gatsby + Netlify ͷ૊Έ߹Θͤศར • ։ൃମݧͱͯ͠͸ྑ͔ͬͨ • Ұ௨ΓඞཁͳϓϥάΠϯ͕ἧ͖͍ͬͯͯΔ

    • νϡʔτϦΞϧ͕ॆ࣮͍ͯͯ͠ɺ΍Γ͍ͨ͜ͱ͸େମެࣜʹ ॻ͍ͯ͋Δ • ϏδωεαΠυʹReactΛ৮ͬͯ΋Β͏͜ͱ΋Ͱ͖ͨ