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

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

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

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

kikunantoka

April 04, 2019
Tweet

More Decks by kikunantoka

Other Decks in Technology

Transcript

  1. Gatsby.js ͰಋೖࣄྫΛ
    όγόγಡΊΔSPAͳLPΛ࡞ͬͨ࿩
    @kikunantoka
    Meguro.es #20 @Drecom on 2018/04/04

    View full-size slide

  2. ࣗݾ঺հ
    @kikunantoka

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Gatsby.js Λ࠾༻ͨ͠എܠ

    View full-size slide

  8. giftee for Buisness

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. ͦ͏ͩɺGatsby.js ͩ

    View full-size slide

  19. Gatsby.js ʹ͍ͭͯ

    View full-size slide

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

    View full-size slide

  21. Gatsby.jsͱ͸

    View full-size slide

  22. Gatsby.jsͱ͸

    View full-size slide

  23. Ͳ͏΍ͬͯ࡞͔ͬͨ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. Q. ը૾ͷ࠷దԽ͸ʁ

    View full-size slide

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

    View full-size slide

  33. A. gatsby-imageΛ࢖ͬͨ
    • Before

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. A. Netlify Λ࢖ͬͨ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. Q. ͦͷଞ͸ʁ

    View full-size slide

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

    View full-size slide

  46. Ͱ͖͕͋ͬͨ΋ͷ

    View full-size slide

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

    View full-size slide

  48. Ͱ͖͕͋ͬͨ΋ͷ ✨
    • ͱʹ͔͘ੈͷதʹग़͢
    • ը૾ͷ࠷దԽ͸·ͩτοϓϖʔδ͔͠Ͱ͖͍ͯͳ͍
    • ೔ʑɺগͣͭ͠վળ͍͍ͯͬͯ͠Δ࠷த
    • ಋೖࣄྫͳͲͷίϯςϯπ΋૿΍͍͍ͯͬͯ͠Δ
    • ৳ͼ͠ΖͰ͢Ͷʂ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide