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-for-biz-lp
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
860
Gatsby.jsとCloud Functionsで毎週自動でコンテンツが更新され続けるフレームワーク比較サイトを作った話 / gotanda_js_13
kikunantoka
1
2.3k
Gatsby.jsとCloud Functionsで毎週自動でコンテンツが更新され続けるフレームワーク比較サイトを作った話 / frontend_night_1
kikunantoka
3
1.4k
サービスがゼロからN億円規模になるまに実践した7つのやっていき / 7_yatteiki_battle_conference_u30_2019
kikunantoka
1
1.2k
Gatsby.jsとNetlifyとの付き合い方 / gatsby-js-and-netlify
kikunantoka
3
510
Gatsby.jsで導入事例をバシバシ読めるSPAなLPを作った話 / gatsby-js-for-biz-lp
kikunantoka
2
520
今日から始める Flood.io / fuka-taisaku-night-01
kikunantoka
0
260
20万RPMを捌くRailsアプリケーションの作り方
kikunantoka
0
710
MVPに絞ったら個人開発でもちゃんとリリースできた話
kikunantoka
1
480
Other Decks in Technology
See All in Technology
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
How to Think Like a Performance Engineer
csswizardry
4
590
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
エンジニア向け会社紹介資料
caddi_eng
14
220k
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Web Components: a chance to create the future
zenorocha
307
41k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Design by the Numbers
sachag
277
18k
Automating Front-end Workflow
addyosmani
1362
200k
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ͷΧδϡΞϧΪϑταʔϏε