Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
sacss110_pdf.pdf
Search
redamoon
January 25, 2020
160
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
sacss110_pdf.pdf
redamoon
January 25, 2020
Transcript
22 slides
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݄ԁʣ ແྉൣғ͕݄݅·Ͱ ଟগͷίϚϯυ͕ࣝඞཁ
More Decks by redamoon
See All by redamoon
「速くなった」では足りない ─ Cursor Meetup Sapporo で話した、弥生の Cursor 組織導入1年
redamoon
0
690
もくテク_AI駆動開発の標準化を進める_-_プロセス整備とルール選定基準の整理.pdf
redamoon
0
2.4k
MTDDCMeetupTokyo_2023_LT.pdf
redamoon
0
190
Supabase + Nuxt3 の実装素振りで チャットアプリを作ってみた
redamoon
1
440
Movable Type を Headless CMS として活用した Jamstack開発手法
redamoon
0
250
Data APIを活用したWEBサイト構築手法
redamoon
1
81
Vue meet up sapporo Vue + Storybook導入について
redamoon
0
74
Movable Type 7を触ってみた
redamoon
0
260
HTML・CMSから考えるコンポーネント化について
redamoon
1
470
Featured
See All Featured
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
750
The Curious Case for Waylosing
cassininazir
1
610
Documentation Writing (for coders)
carmenintech
77
5.6k
How to Think Like a Performance Engineer
csswizardry
28
2.9k
Rails Girls Zürich Keynote
gr2m
96
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.9k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
1
310
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
1
570
Building a Scalable Design System with Sketch
lauravandoore
464
34k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
350
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
56
3.5k
How STYLIGHT went responsive
nonsquared
100
6.4k