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
sacss110_pdf.pdf
Search
redamoon
January 25, 2020
1
90
sacss110_pdf.pdf
redamoon
January 25, 2020
Tweet
Share
More Decks by redamoon
See All by redamoon
MTDDCMeetupTokyo_2023_LT.pdf
redamoon
0
83
Supabase + Nuxt3 の実装素振りで チャットアプリを作ってみた
redamoon
1
210
Movable Type を Headless CMS として活用した Jamstack開発手法
redamoon
0
120
Data APIを活用したWEBサイト構築手法
redamoon
1
52
Vue meet up sapporo Vue + Storybook導入について
redamoon
0
52
Movable Type 7を触ってみた
redamoon
0
210
HTML・CMSから考えるコンポーネント化について
redamoon
1
310
おれの使うさいきょうえでぃた
redamoon
0
170
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
239
11k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Faster Mobile Websites
deanohume
303
30k
How to train your dragon (web standard)
notwaldorf
79
5.5k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
KATA
mclloyd
20
13k
Designing Experiences People Love
moore
136
23k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
YesSQL, Process and Tooling at Scale
rocio
166
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Transcript
Nuxt.js + Netlify FromsͰ࢝ΊΔ αʔόϨεͳϑΥʔϜΛࢼͨ͠ SaCSS vol.110 2020.01.25 ()
# about me ϓϩϑΟʔϧ ؔޱ༐थɿ)".803,4 ϑϩϯτΤϯυΤϯδχΞ݉ԂδχΞʁ ͖ͳ$.4ɿ.PWBCMF5ZQFɾNJDSP$.4 4/4#MPH
5XJUUFSɿ!SFEBNPPO #MPHɿIUUQTSFEBNPPOOFU झຯ %:*ɾఉγΰτ͢Δ͜ͱʢݱࡏٳۀதͷԂδχΞʣ .Z.VTJD4*".4)"%& ϋογϡλάɿԂδχΞԂܳΤϯδχΞ
# js-workshop-sapporoʢએʣ ڈͷ݄͔Β݄ʙϲ݄ϖʔεͰ+4ͷษڧձΛ࢝Ί·ͨ͠ʂʂ +BWB4DSJQUͷجૅ͔ΒԠ༻·ͰΛ՝Λ௨ͯ͠ॻ͍͍ͯ͘ษڧձͰ͢ʂ ओ࠵ऀೋਓ+4ͦΜͳΘ͔ΒΜͱ͍͏͜ͱ͕͖͔͚ͬʂ IUUQTHJUIVCDPNKTXPSLTIPQTBQQPSPEPDVNFOU IUUQTKTXPSLTIPQTBQQPSPDPOOQBTTDPN JSWSP js workshop
sapporo ͱΓ͋͑ͣओ࠵ऀವΈձ͕͍ͨ͠ʢຊԻʣ
ḪΔ͜ͱɾɾɾ ੈ9)5.-ͷ࣌
लؙΤσΟλͰ9)5.-ͷ%0$5:1&҉هͯ͠ ॻ͚ΔΑ͏ʹͳͬͨ͠8FCܥͰब৬Ͱ͖Δͳʂ͑ʁ ʢ࣌ͷ৺ڥʣ
ͳΜͱ͔ब৬ɾɾɾ
ब৬ͨ͠ͷͷɾɾɾ ʮࠓͲ͖%SFBNXFBWFS͑ͳ͍ͱ͔͋Γ͑ͳ͍͔Βɻʯ ʮ5BCMFίʔσΟϯάͰϨΠΞτͰ͖ͯҰਓલɻʯ ʢઌഐ8FCσβΠφʔஊʣ
࣌ͷࣗ ઌഐσβΠφʔ
ʮ)5.-͚ͩ͡ΌϑΥʔϜͷ࣮Ͱ͖ͳ͍͔Βʯ ʢઌഐ8FCσβΠφʔஊʣ
$(*JTԿ αʔόαΠυJTԿʁ 1)1JTԿʁ ɻɻɻɻ
ຊಡΜͩΓɺ࣮ફͰάάͬͨΓͯ͠ Կͱͳ͘ཧղग़དྷ͕ͨɻɻɻ ݁ہɺϕʔεͰ࡞Δ͜ͱͰ͖ͳ͔ͬͨʢٽʣ
ͦͯ͠ɺ
༷ʑͳπʔϧͱ࿈ܞ͍͋͠αʔόϨεͳ࣌ɻ ୯७ͳ͓͍߹Θͤ)FBEMFTT$.4Ͱ)5.-ɾ$44ɾ+BWB4DSJQUͰ݁Ͱ͖Δʂ
αʔόαΠυΘ͔ΒΜԂδχΞͰϫϯνϟϯ͋Δʁʢসʣ
ͱ͍͏͜ͱͰ /VYUKT /FUMJGZ'PSNTͰϑΥʔϜΛͨΊͯ͠Έͨ
# Netilfyʹ͍ͭͯ Netilfyͱʁ ੩తͳαΠτΛߴͰఏڙͰ͖ΔαʔϏεͰ ͢ɻ ϑϩϯτΤϯυͷϏϧυɾσϓϩΠɾϗεςΟ ϯάΛߦ͏͜ͱ͕Ͱ͖ΔͨΊࣗͷαʔόอ ࣋ͤͣʹ8FCαΠτΛެ։͢Δ͜ͱ͕Ͱ͖· ͢ɻʢ(JUIVCͷΞΧϯτ͕͋Ε0,ʣ ༷ʑͳαʔϏεΛఏڙ͍ͯ͠·͢ɻ
ɾ/FUMJGZ'PSNT ɾ/FUMJGZ$.4 ɾ/FUMJGZ"OBMZUJDT ˡࠓճ͜ͷհ IUUQTXXXOFUMJGZDPN
# Nuxt.jsʹ͍ͭͯ Nuxt.jsͱʁ 7VFKTʹͱͮͨΞϓϦέʔγϣϯΛߏங͢ ΔͨΊͷϓϩάϨογϒϑϨʔϜϫʔΫʹͳ Γ·͢ɻ 7VFKTͷެࣜΨΠυϥΠϯʹԊͬͨΞʔΩς ΫνϟΛఏڙ͢ΔΑ͏ʹઃܭ͞Ε͓ͯΓɺ෦ తͳར༻͔Β੩తͳ-1ϖʔδ͔Βෳࡶͳ 8FCΞϓϦέʔγϣϯͷ࡞Ͱ͖·͢ɻ
IUUQTKBOVYUKTPSH
OQYDSFBUFOVYUBQQTBDTTOFUMJGZGPSNTOVYU PS ZBSODSFBUFOVYUBQQTBDTTOFUMJGZGPSNTOVYU # Nuxt.js ͷڥߏங ## create-nuxt-appͰڥߏஙʢ։ൃڥߏஙࡁΈෆཁʣ
# Netlify Formsͷઃఆ ## formλάʹdata-netlifyͷdataଐੑΛture͔netlifyଐੑͰOK <form :name="name" method="POST" data-netlify="true"> <slot
/> </form> ؆୯ʂʂʂ
αϯϓϧαΠτ http://bit.ly/30S3ppx https://github.com/redamoon/sacss-netlify-forms-nuxt
%FNP
# ·ͱΊ ## ϝϦοτ αʔόࣝɾαʔόαΠυݴޠෆཁͰϑΥʔϜ͕࡞ΕΔ (JUͷϦϙδτϦͰσϓϩΠ͢ΔͨΊίʔσΟϯάͷԆ্Ͱ࣮Մೳ ػೳతͳ੍ݶ͋Δ͕ɺσβΠϯͷ੍ݶͳ͠Ͱ࡞ΕΔ
8FCαΠτͷ͓͍߹Θͤʹ༗ޮతʢΠϕϯτͷΞϯέʔτʣ ## σϝϦοτ ࣗಈฦ৴ϝʔϧͳͲͳ͍ͨΊผͷπʔϧ࿈ܞ͕ඞཁ ϕʔγοΫೝূͳͲΫϩʔζυʹ͏߹՝͕ۚඞཁʢ1SP݄ԁʣ ແྉൣғ͕݄݅·Ͱ ଟগͷίϚϯυ͕ࣝඞཁ