sacss110_pdf.pdf

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

# ·ͱΊ ## ϝϦοτ αʔό஌ࣝɾαʔόαΠυݴޠෆཁͰϑΥʔϜ͕࡞ΕΔ (JUͷϦϙδτϦͰσϓϩΠ͢ΔͨΊίʔσΟϯάͷԆ௕্Ͱ࣮૷Մೳ ػೳతͳ੍ݶ͸͋Δ͕ɺσβΠϯͷ੍ݶͳ͠Ͱ࡞ΕΔ
8FCαΠτͷ͓໰͍߹Θͤʹ͸༗ޮతʢΠϕϯτͷΞϯέʔτ౳ʣ ## σϝϦοτ ࣗಈฦ৴ϝʔϧͳͲ͸ͳ͍ͨΊผͷπʔϧ࿈ܞ͕ඞཁ ϕʔγοΫೝূͳͲΫϩʔζυʹ࢖͏৔߹͸՝͕ۚඞཁʢ1SP݄ԁʣ ແྉൣғ͕݄݅·Ͱ ଟগͷίϚϯυ஌͕ࣝඞཁ

sacss110_pdf.pdf

sacss110_pdf.pdf

redamoon

More Decks by redamoon

Featured

Transcript

Nuxt.js + Netlify FromsͰ࢝ΊΔ αʔόϨεͳϑΥʔϜΛࢼͨ͠ SaCSS vol.110 2020.01.25 (౔)

# about me ϓϩϑΟʔϧ ؔޱ༐थɿ)".803,4 ϑϩϯτΤϯυΤϯδχΞ݉ԂδχΞʁ ޷͖ͳ$.4ɿ.PWBCMF5ZQFɾNJDSP$.4 4/4#MPH

ḪΔ͜ͱɾɾɾ೥ ੈ͸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,ʣ ༷ʑͳαʔϏεΛఏڙ͍ͯ͠·͢ɻ

# Nuxt.jsʹ͍ͭͯ Nuxt.jsͱ͸ʁ 7VFKTʹ΋ͱͮͨΞϓϦέʔγϣϯΛߏங͢ ΔͨΊͷϓϩάϨογϒϑϨʔϜϫʔΫʹͳ Γ·͢ɻ 7VFKTͷެࣜΨΠυϥΠϯʹԊͬͨΞʔΩς ΫνϟΛఏڙ͢ΔΑ͏ʹઃܭ͞Ε͓ͯΓɺ෦ ෼తͳར༻͔Β੩తͳ-1ϖʔδ͔Βෳࡶͳ 8FCΞϓϦέʔγϣϯͷ࡞੒Ͱ͖·͢ɻ

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

αϯϓϧαΠτ http://bit.ly/30S3ppx https://github.com/redamoon/sacss-netlify-forms-nuxt

%FNP

# ·ͱΊ ## ϝϦοτ αʔό஌ࣝɾαʔόαΠυݴޠෆཁͰϑΥʔϜ͕࡞ΕΔ (JUͷϦϙδτϦͰσϓϩΠ͢ΔͨΊίʔσΟϯάͷԆ௕্Ͱ࣮૷Մೳ ػೳతͳ੍ݶ͸͋Δ͕ɺσβΠϯͷ੍ݶͳ͠Ͱ࡞ΕΔ