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.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
2
670
今日から始める 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
Skrub: machine-learning with dataframes
gaelvaroquaux
0
120
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.7k
Obsidian応用活用術
onikun94
1
450
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
170
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.4k
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
210
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
170
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
260
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
3
540
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
440
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.3k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Docker and Python
trallard
45
3.6k
Fireside Chat
paigeccino
39
3.6k
Building an army of robots
kneath
306
46k
Designing for humans not robots
tammielis
253
25k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Automating Front-end Workflow
addyosmani
1370
200k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
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ͷΧδϡΞϧΪϑταʔϏε