Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Gatsby.jsで導入事例をバシバシ読めるSPAなLPを作った話 / gatsby-js-f...
Search
kikunantoka
April 25, 2019
Technology
2
680
Gatsby.jsで導入事例をバシバシ読めるSPAなLPを作った話 / gatsby-js-for-biz-lp
- Gatsby.js を採用した背景
- Gatsby.js とは
- どうやって作ったか
- できあがったもの
- リリースしてどうだったか
- 所感など
kikunantoka
April 25, 2019
Tweet
Share
More Decks by kikunantoka
See All by kikunantoka
個人開発しているサービスのインフラをAWSからGCPに載せ替えた話 💪 / kojin_kaihatsu_night_3
kikunantoka
0
1.2k
Gatsby.jsとCloud Functionsで毎週自動でコンテンツが更新され続けるフレームワーク比較サイトを作った話 / gotanda_js_13
kikunantoka
1
2.4k
Gatsby.jsとCloud Functionsで毎週自動でコンテンツが更新され続けるフレームワーク比較サイトを作った話 / frontend_night_1
kikunantoka
3
1.6k
サービスがゼロからN億円規模になるまに実践した7つのやっていき / 7_yatteiki_battle_conference_u30_2019
kikunantoka
1
1.3k
Gatsby.jsとNetlifyとの付き合い方 / gatsby-js-and-netlify
kikunantoka
3
600
Gatsby.jsで導入事例をバシバシ読めるSPAなLPを作った話 / gatsby-js-for-biz-lp
kikunantoka
1
1.8k
今日から始める Flood.io / fuka-taisaku-night-01
kikunantoka
0
320
20万RPMを捌くRailsアプリケーションの作り方
kikunantoka
0
820
MVPに絞ったら個人開発でもちゃんとリリースできた話
kikunantoka
1
530
Other Decks in Technology
See All in Technology
Pure Goで体験するWasmの未来
askua
1
180
pprof vs runtime/trace (FlightRecorder)
task4233
0
170
実装で解き明かす並行処理の歴史
zozotech
PRO
1
330
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
340
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
170
AWSにおけるTrend Vision Oneの効果について
shimak
0
130
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
300
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
110
Green Tea Garbage Collector の今
zchee
PRO
2
390
許しとアジャイル
jnuank
1
120
Trust as Infrastructure
bcantrill
0
340
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
200
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Scaling GitHub
holman
463
140k
Context Engineering - Making Every Token Count
addyosmani
5
180
Bash Introduction
62gerente
615
210k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
The Cult of Friendly URLs
andyhume
79
6.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
How to Ace a Technical Interview
jacobian
280
24k
Done Done
chrislema
185
16k
Transcript
Gatsby.js ͰಋೖࣄྫΛ όγόγಡΊΔSPAͳLPΛ࡞ͬͨ @kikunantoka We Are JavaScripters! @31th on 2018/04/25
ࣗݾհ @kikunantoka
ݸਓ։ൃ https://nakamy.com
ϘʔυήʔϜ੍࡞ https://tapir-studio.com
ࣗݾհ about: name: Fumitaka Kikukawa url: https://kikunantoka.com twitter: @kikunantoka job:
engineer work_at: giftee Inc. // giftee is a good company.
ࠓճ͢༰ • Gatsby.js ͕ྲྀߦ͖͍ͬͯͯͯɺݸਓϒϩάͳͲͰΘΕΔ͜ ͱ͕ଟ͘ͳ͖͕ͬͯͨɺͦΕΛۀͰͬͨࣄྫͷհ
͍͑ͨ͜ͱ • Gatsby.js Λ࠾༻ͨ͠എܠ • Gatsby.js ͱ • Ͳ͏ͬͯ࡞͔ͬͨ •
Ͱ͖͕͋ͬͨͷ • ϦϦʔεͯ͠Ͳ͏͔ͩͬͨ • ॴײͳͲ
Gatsby.js Λ࠾༻ͨ͠എܠ
giftee
giftee
giftee
giftee
giftee for Buisness
୲͍ͯ͠ΔϓϩμΫτ ʢࣾͰ($1ͱུ͞Εͩ͢ʜʣ HJGUFFΠϯελϯτΟϯGPS5XJUUFSͷڧΈᶃ நબ͔Βܠͷఏڙ·ͰҰؾ௨؏Ͱ͝ఏڙ நબγεςϜ ʢΠϯελϯτΟϯʣ σδλϧΪϑτͷఏڙ ʢछྨҎ্ͷܠʣ ϦΞϧλΠϜʹநબɺ ͦͷͰܠΛ༩
LINEೝূͷύλʔϯఏڙ HJGUFFΠϯελϯτΟϯGPS-*/&ͷڧΈᶃ ©2018 gi)ee Inc. all rights reserved J நબ͔Βܠͷఏڙ·ͰҰؾ௨؏Ͱ͝ఏڙ
நબγεςϜ ʢΠϯελϯτΟϯʣ σδλϧΪϑτͷఏڙ ʢछྨҎ্ͷܠʣ ϦΞϧλΠϜʹநબɺ ͦͷͰܠΛ༩
ΊͬͪΌΞΫηεདྷΔ • ༑ͩͪ 2300ສͷLINEΞΧϯτͰΩϟϯϖʔϯΛ࣮ࢪͨ݁͠Ռ ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ࠷େ 30ສRPMɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^ʉ
๏ਓ͚ͷLP͕͋ͬͨ • ͕ɺWordPressͷWYSIWYGϓϥάΠϯͰϖʔδ͕ߏ͞Εͯ ͓ΓɺϖʔδͷಡΈࠐΈ͕ΊͬͪΌ͍
՝ײ • αʔόͷอक͞Ε͓ͯΒͣɺPHPͷόʔδϣϯ5ܥͷ·· ͩͬͨ • Α͘མ͍ͪͯͨ • WordPress͕ѱ͍༁Ͱͳ͍
ϦχϡʔΞϧ • ๏ਓ͚ϓϩμΫτΛ୲͍ͯͨ͠ͷͰɺͲ͏ʹ͔͔ͨͬ͠ ͨ • Πϯόϯυͷ͍߹ΘͤͰޮΑ͘ϓϩμΫτΛεέʔϧ ͍͖͔ͤͯͨͬͨ͞ • ϦχϡʔΞϧ͢Δ͜ͱʹ •
ϏδωεαΠυʹ࣮ݱ͍ͨ͜͠ͱɺίϯςϯπͷ༰ΛXDͰ ॻ͖ग़ͯ͠Β͏
XDͷ༰
ཁ݅ • XDʹඳ͍ͨ༰Λެ։͍ͨ͠ • ಋೖࣄྫΛͲΜͲΜ૿͍͖͍ͯͨ͠ • ΠϯϑϥΛؚΊͨอकͷ͕͍
Ͳ͏࣮ͬͯݱ͠Α͏ • ίϯϙʔωϯτԽ͍͚ͯ͠ɺ্ख͍͘·Θͤͦ͏ • ϏδωεαΠυHTMLɺCSSॻ͚Δ͠ɺίϯϙʔωϯτ͑͞ ࡞ͬͯ͠·͑ɺΈ߹ΘͤͯϖʔδΛ࡞ΕΔͷͰઆ • Gitؤுͬͯڭ͑Α͏
Ͳ͏࣮ͬͯݱ͠Α͏ • ͦͦLPͬͯ੩తίϯςϯπͩ͠ɺ੩తαΠτδΣωϨʔ λͰྑ͍ͷͰ • ϗεςΟϯάNetlifyΛ͑ɺϏϧυ&σϓϩΠϑϩʔ ͤΒΕΔ͠ɺ૬ੑ͕ྑ͍ͷͰ
ͦ͏ͩɺGatsby.js ͩ
Gatsby.js ʹ͍ͭͯ
Gatsby.jsͱ • ੩తαΠτδΣωϨʔλ • React Ͱॻ͚Δ • SPAͳ੩తαΠτΛੜͰ͖Δ • StaticGen
ΛݟΔݶΓɺ࠷ۙϗοτͳٕज़
Gatsby.jsͱ
Gatsby.jsͱ
Ͳ͏ͬͯ࡞͔ͬͨ
Starter ͷબఆ • ଞͷҊ݅Ͱ͍ͬͯΔͷͰɺSemantic UIΛ͍͔ͨͬͨ • Semantic UI React ؚ͕·Ε͍ͯΔStarterΛબΜͩ
• https://github.com/pretzelhands/gatsby-starter-semantic-ui
Starter ͷબఆ • ެࣜͰ୳ͤΔΑ͏ʹͳ͍ͬͯΔ • v2ͷͷΛ୳͢ͱྑ͍ • https://www.gatsbyjs.org/starters/?v=2
ͻͨ͢ΒίϯϙʔωϯτΛ࡞͍ͬͯ͘ • XDΛݟͳ͕ΒΓͳ͍෦Λఆٛͯ͠ɺ࣮͍ͯ͘͠ • ͳΔ͘൚༻తʹͳΔΑ͏ʹઃܭ • 35ݸ͙Β͍ͷίϯϙʔωϯτʹͳͬͨ
ϏδωεαΠυϖʔδΛ࡞͍ͬͯ͘ • Կݸ͔࡞ͬͨαϯϓϧϖʔδΛݩʹɺจݴΛม͑ͨΓɺίϯ ϙʔωϯτΛม͑ͨΓ • ίϯϙʔωϯτΛ͜͏͏ͱ͜͏ͳΔΑɺͷαϯϓϧ͕͋Δ ͱɺҙ֎ͱͭ·͔ͮͣʹϖʔδ͕Ͱ͖͍ͯͬͨ • GitGUIͰ͔Γ͍͢GitHub DesktopΛೖΕͯΒͬͨ
Q. CSSʁ
A. CSS ModulesΛͬͨ • ଞͷҊ݅Ͱ༻͍ͯ͠ΔSassΛͦͷ··͍͔ͨͬͨ • `gatsby-plugin-sass` ͱ `node-sass` ΛೖΕΔͱྑ͍
A. CSS ModulesΛͬͨ • ͿͬͪΌ͚Έͷ෦͋Δ • ϑΝΠϧ͚͍ͨ • Կ͠ͳͯ͘ɺϑΝΠϧͷγϯλοΫεϋΠϥΠτ͕ޮ͍ͯཉ ͍͠
• ଞͷબࢶͱͯ͜͠ͷล • Styled Components • CSS in JS
A. CSS ModulesΛͬͨ • ίϯϙʔωϯτͷjsϑΝΠϧͱ1ର1ରԠ • footer.js / footer.module.sass •
pages/ ͰCSSΛॻ͔ͳ͍Α͏ʹઃܭͨ͠ • ίϯϙʔωϯτଆͰελΠϧͷࠩΛΧόʔ͢Δ • ίϯϙʔωϯτΛ͏͚ͩͰϖʔδ͕͢Δ • CSS͕อकͰ͖ͳ͘ͳΔͷΛ͙
Q. ը૾ͷ࠷దԽʁ
A. gatsby-imageΛͬͨ • ಡΈࠐΈʹΑΔΨλπΩΛ͛Δ • ͦͷ·· <img> λάͰը૾ΛಡΈࠐΉͱΨλπΫ • ը૾ͷϦαΠζ&ѹॖͬͯ͘ΕΔ
• .webp ʹରԠͯ͘͠ΕΔ • ϨΠδʔϩʔυͬͯ͘ΕΔ • ߥΒͷBase64Λઌग़ͨ͠͠ΓɺTransitionΛՃ͑ͨΓ
A. gatsby-imageΛͬͨ • Before
A. gatsby-imageΛͬͨ • After
Q. ϗεςΟϯάʁ
A. Netlify Λͬͨ
A. Netlify Λͬͨ • GitHubͷϦϙδτϦΛඥ͚Δ͚ͩͰɺϏϧυ & σϓϩΠ͕ Ͱ͖Δ • ΧελϜυϝΠϯ
& SSLԽରԠແྉͰͰ͖Δ • Ϗϧυ͕͚͜ΔίϛοτΛͯ͠ɺຊ൪ڥͪΌΜͱಈ࡞ ͨ͠··ͷঢ়ଶ͕อͨΕΔ • ϏδωεαΠυ҆৺ͯ͠ίϛοτͰ͖Δ
A. Netlify Λͬͨ • READMEʹόοδΛ͚Δ͜ͱͰσϓϩΠ͕ޭ͍ͯ͠Δ͔ Λڞ༗Ͱ͖Δ
A. Netlify Λͬͨ • ϦμΠϨΫτઃఆͰ͖Δ • ࠓճͷΑ͏ʹϦχϡʔΞϧͱ͔ͰچαΠτͷߏͱ৽αΠ τͷߏ͕ҧ͏߹ॏๅ͢Δ • ͪΌΜͱઃఆ͢Δ͜ͱͰSEOԼ͕Γʹ͍͘
Netlify ͷҙ • ͜ͷઃఆؾΛ͚ͭͨํ͕ྑ͍ • σϑΥϧτ͕ ʮAutomatically build…ʯʹͳ͍ͬͯΔ
Netlify ͷҙ • PRΛ࡞ͬͨ࣌ʹϨϏϡʔ༻ͷڥΛཱͯͯ͘ΕΔ • ΊͬͪΌศརʂ • ͕ɺ͔͠͠ɺϚʔδ͞ΕͨޙΓଓ͚Δ • ͔͠ɺফͤͳ͍
Netlify ͷҙ • ҰԠɺϩϘοτͳͲʹิ͞Εͳ͍Α͏ʹͳ͍ͬͯΔ ͕ɺաڈͷ։ൃ్தͷͷ͕ݟΕͯ͠·͏ • ͔͠ɺਪଌ͍͢͠URL • https://deploy-preview-1--your-domain.netlify.com/ •
Λए͍ͯ͘͘͠ͱɺͲΜͲΜॳظͷը໘͕…
Netlify ͷҙ • ެࣜʹ࣭ͯ͠Έͨ • ͕ɺҰɺڥ͝ͱফ͠ ͯɺཱ͔ͯ͢͠ͳ͍ɺ ͱͷ͜ͱ
Q. ͦͷଞʁ
A. ॾʑἧ͖͍ͬͯͯ·͢ • OGPHelmetΛ͏ • ֤ϖʔδͰΦʔόʔϥΠυͰ͖Δ • Google Analytics
`gatsby-plugin-google-analytics` Λ͏ • Google Tag Manager `gatsby-plugin-google- tagmanager`
Ͱ͖͕͋ͬͨͷ
Ͱ͖͕͋ͬͨͷ ✨ https://giftee.biz
Ͱ͖͕͋ͬͨͷ ✨ • ͱʹ͔͘ੈͷதʹग़ͯ͠ɺվળ • ϝΠϯͷαʔϏεͷ։ൃΛ͠ͳ͕Β3ϲ݄͘Β͍ • ը૾ͷ࠷దԽ·ͩҰ෦ͷϖʔδ͔͠Ͱ͖͍ͯͳ͍ • ΞΫηεͷଟ͍ϖʔδ͔Βվળ͍ͯ͘͠
• ʑɺগͣͭ͠վળ͍͍ͯͬͯ͠Δ࠷த • ಋೖࣄྫͳͲͷίϯςϯπ૿͍͍ͯͬͯ͠Δ
ಋೖࣄྫΛͲ͏࣮ͬͯݱ͔ͨ͠ • ཁ݅ • λάΛ͚͍ͨ • λάͰݕࡧͯ͠ಋೖࣄྫΛݟ͍͖͍ͯͨ • ֤ϖʔδͷ༰ଞͷϖʔδͱಉ༷ʹίϯϙʔωϯτͷ Έ߹ΘͤͰࣗ༝ʹϨΠΞτΛ͍ͨ͠
ಋೖࣄྫΛͲ͏࣮ͬͯݱ͔ͨ͠ • ϒϩάΛ࡞Δ࣌ͷΈΛԠ༻ͨ͠ • 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
ಋೖࣄྫΛͲ͏࣮ͬͯݱ͔ͨ͠ • ϒϩάΛ࡞Δ࣌ͷΈΛԠ༻ͨ͠ • 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
ಋೖࣄྫΛͲ͏࣮ͬͯݱ͔ͨ͠ • ϒϩάΛ࡞Δ࣌ͷΈΛԠ༻ͨ͠ • 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 }) })
ಋೖࣄྫΛͲ͏࣮ͬͯݱ͔ͨ͠
ಋೖࣄྫΛͲ͏࣮ͬͯݱ͔ͨ͠ // 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
ಋೖࣄྫΛͲ͏࣮ͬͯݱ͔ͨ͠
ϦϦʔεͯ͠Ͳ͏͔ͩͬͨ
PV • 2/21ʹϦϦʔεΛͨ͠ • 10,000 PV / ݄͙Β͍৳ͼͨ • ճ༡͕૿͑ͨʢʁʣ
SEO • ৳ͼ͍ͯΔϫʔυ͋Εɺམ͍ͪͯΔϫʔυ͋ͬͨ • ίϯςϯπΛΨϥοͱม͑ͨͷͰ͜ͷลҰఆํ͕ͳ͍ • Gatsby.js Λ͔ͬͨΒSEO͕ҰؾʹԼ͕ͬͨɺͱ͍͏͜ͱ ͳ͍
ίϯόʔδϣϯ • ͍߹Θͤ • ঃʑʹ৳ͼ͍ͯΔ • ͱ͍͏͜ͱӨڹ͋Γͦ͏ͳͷͰɺظతʹ Υον͍ͯ͘͠
ॴײͳͲ
ॴײͳͲ • Gatsby + Netlify ͷΈ߹Θͤศར • ։ൃମݧͱͯ͠ྑ͔ͬͨ • Ұ௨ΓඞཁͳϓϥάΠϯ͕ἧ͖͍ͬͯͯΔ
• νϡʔτϦΞϧ͕ॆ࣮͍ͯͯ͠ɺΓ͍ͨ͜ͱେମެࣜʹ ॻ͍ͯ͋Δ • ϏδωεαΠυʹReactΛ৮ͬͯΒ͏͜ͱͰ͖ͨ
ࠓճͨ͠༰ • Gatsby.js ͕ྲྀߦ͖͍ͬͯͯͯɺݸਓϒϩάͳͲͰΘΕΔ͜ ͱ͕ଟ͘ͳ͖͕ͬͯͨɺͦΕΛۀͰͬͨࣄྫͷհ
ίϚʔγϟϧ • We are hiring!!! - Ұॹʹಇؒ͘Λืूதʂ ձһສਓಥഁʂ ࠃ/PͷΧδϡΞϧΪϑταʔϏε