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 04, 2019
Technology
1
1.8k
Gatsby.jsで導入事例をバシバシ読めるSPAなLPを作った話 / gatsby-js-for-biz-lp
- Gatsby.js を採用した背景
- Gatsby.js とは
- どうやって作ったか
- できあがったもの
- リリースしてどうだったか
- 所感など
kikunantoka
April 04, 2019
Tweet
Share
More Decks by kikunantoka
See All by kikunantoka
個人開発しているサービスのインフラをAWSからGCPに載せ替えた話 💪 / kojin_kaihatsu_night_3
kikunantoka
0
1.1k
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
590
Gatsby.jsで導入事例をバシバシ読めるSPAなLPを作った話 / gatsby-js-for-biz-lp
kikunantoka
2
660
今日から始める Flood.io / fuka-taisaku-night-01
kikunantoka
0
320
20万RPMを捌くRailsアプリケーションの作り方
kikunantoka
0
810
MVPに絞ったら個人開発でもちゃんとリリースできた話
kikunantoka
1
520
Other Decks in Technology
See All in Technology
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
7.9k
Datasets for Critical Operations by Dataform
kimujun
0
130
robocopy の怖い話/scary-story-about-robocopy
emiki
0
420
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ〜僕たちが起こすコラボレーション・ムーブメント〜
amixedcolor
1
110
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
mutsumix
0
120
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
370
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
230
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
2
870
ファインディにおける Dataform ブランチ戦略
hiracky16
0
230
【CEDEC2025】LLMを活用したゲーム開発支援と、生成AIの利活用を進める組織的な取り組み
cygames
PRO
1
2k
alecthomas/kong はいいぞ
fujiwara3
6
1.2k
KCD Lima: eBee in Peru!
lizrice
0
110
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
1.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Unsuck your backbone
ammeep
671
58k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Typedesign – Prime Four
hannesfritz
42
2.7k
Producing Creativity
orderedlist
PRO
346
40k
BBQ
matthewcrist
89
9.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Why Our Code Smells
bkeepers
PRO
337
57k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Transcript
Gatsby.js ͰಋೖࣄྫΛ όγόγಡΊΔSPAͳLPΛ࡞ͬͨ @kikunantoka Meguro.es #20 @Drecom on 2018/04/04
ࣗݾհ @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 Λ࠾༻ͨ͠എܠ
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ܥͷ·· ͩͬͨ • Α͘མ͍ͪͯͨ
ϦχϡʔΞϧ • ๏ਓ͚ϓϩμΫτΛ୲͍ͯͨ͠ͷͰɺͲ͏ʹ͔͔ͨͬ͠ ͨ • Πϯόϯυͷ͍߹ΘͤͰޮΑ͘ϓϩμΫτΛεέʔϧ ͍͖͔ͤͯͨͬͨ͞ • ϦχϡʔΞϧ͢Δ͜ͱʹ •
ϏδωεαΠυʹ࣮ݱ͍ͨ͜͠ͱɺίϯςϯπͷ༰Λ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
Ͱ͖͕͋ͬͨͷ ✨ • ͱʹ͔͘ੈͷதʹग़͢ • ը૾ͷ࠷దԽ·ͩτοϓϖʔδ͔͠Ͱ͖͍ͯͳ͍ • ʑɺগͣͭ͠վળ͍͍ͯͬͯ͠Δ࠷த • ಋೖࣄྫͳͲͷίϯςϯπ૿͍͍ͯͬͯ͠Δ
• ৳ͼ͠ΖͰ͢Ͷʂ
ϦϦʔεͯ͠Ͳ͏͔ͩͬͨ
PV • 2/21ʹϦϦʔεΛͨ͠ • 10,000 PV / ݄͙Β͍৳ͼͨ • ճ༡͕૿͑ͨʢʁʣ
SEO • ৳ͼ͍ͯΔϫʔυ͋Εɺམ͍ͪͯΔϫʔυ͋ͬͨ • ίϯςϯπΛΨϥοͱม͑ͨͷͰ͜ͷลҰఆํ͕ͳ͍ • Gatsby.js Λ͔ͬͨΒSEO͕ҰؾʹԼ͕ͬͨɺͱ͍͏͜ͱ ͳ͍
ίϯόʔδϣϯ • ͍߹Θͤ • ঃʑʹ৳ͼ͍ͯΔ • ͱ͍͏͜ͱӨڹ͋Γͦ͏ͳͷͰɺظతʹ Υον͍ͯ͘͠
ॴײͳͲ
ॴײͳͲ • Gatsby + Netlify ͷΈ߹Θͤศར • ։ൃମݧͱͯ͠ྑ͔ͬͨ • Ұ௨ΓඞཁͳϓϥάΠϯ͕ἧ͖͍ͬͯͯΔ
• νϡʔτϦΞϧ͕ॆ࣮͍ͯͯ͠ɺΓ͍ͨ͜ͱେମެࣜʹ ॻ͍ͯ͋Δ • ϏδωεαΠυʹReactΛ৮ͬͯΒ͏͜ͱͰ͖ͨ
ίϚʔγϟϧ • We are hiring!!! - Ұॹʹಇؒ͘Λืूதʂ ձһສਓಥഁʂ ࠃ/PͷΧδϡΞϧΪϑταʔϏε