sacss110_pdf.pdf

Transcript

1. Nuxt.js + Netlify FromsͰ࢝ΊΔ αʔόϨεͳϑΥʔϜΛࢼͨ͠ SaCSS vol.110 2020.01.25 (౔)
2. # about me 
   ϓϩϑΟʔϧ
   
   ؔޱ
   ༐थɿ)".803,4
    ϑϩϯτΤϯυΤϯδχΞ
   ݉
   ԂδχΞʁ
    ޷͖ͳ$.4ɿ.PWBCMF
   5ZQFɾNJDSP$.4
   
   4/4
   
   #MPH
   
   5XJUUFSɿ!SFEBNPPO
   
   #MPHɿIUUQTSFEBNPPOOFU
   
   झຯ
    %:*ɾఉγΰτ͢Δ͜ͱʢݱࡏٳۀதͷԂδχΞʣ
    .Z
   .VTJD
   4*".
   4)"%&
    ϋογϡλάɿԂδχΞ
   ԂܳΤϯδχΞ
3. # js-workshop-sapporoʢએ఻ʣ ڈ೥ͷ݄͔Β݄ʙϲ݄ϖʔεͰ+4ͷษڧձΛ࢝Ί·ͨ͠ʂʂ
   +BWB4DSJQUͷجૅ͔ΒԠ༻·ͰΛ՝୊Λ௨ͯ͠ॻ͍͍ͯ͘ษڧձͰ͢ʂ
   ओ࠵ऀೋਓ΋+4ͦΜͳΘ͔ΒΜͱ͍͏͜ͱ͕͖͔͚ͬʂ
   IUUQTHJUIVCDPNKTXPSLTIPQTBQQPSPEPDVNFOU
   IUUQTKTXPSLTIPQTBQQPSPDPOOQBTTDPN JSWSP js workshop sapporo ͱΓ͋͑ͣओ࠵ऀ͸ವΈձ͕͍ͨ͠ʢຊԻʣ
4. ḪΔ͜ͱɾɾɾ೥
   ੈ͸9)5.-ͷ࣌୅
5. लؙΤσΟλͰ9)5.-ͷ%0$5:1&҉هͯ͠
   ॻ͚ΔΑ͏ʹͳͬͨ͠8FCܥͰब৬Ͱ͖Δͳʂ͑ʁ
   ʢ౰࣌ͷ৺ڥʣ
6. ͳΜͱ͔ब৬ɾɾɾ೥
7. ब৬ͨ͠΋ͷͷɾɾɾ
   ʮࠓͲ͖%SFBNXFBWFS࢖͑ͳ͍ͱ͔͋Γ͑ͳ͍͔Βɻʯ
   ʮ5BCMFίʔσΟϯάͰϨΠΞ΢τͰ͖ͯҰਓલɻʯ
   ʢઌഐ8FCσβΠφʔஊʣ
8. ౰࣌ͷࣗ෼ ઌഐσβΠφʔ
9. ʮ)5.-͚ͩ͡ΌϑΥʔϜͷ࣮૷Ͱ͖ͳ͍͔Βʯ
   ʢઌഐ8FCσβΠφʔஊʣ
10. $(*
    JT
    Կ
    
    αʔόαΠυ
    JT
    Կʁ
    1)1
    JT
    Կʁ
    ɻɻɻɻ
11. ຊಡΜͩΓɺ࣮ફͰάάͬͨΓͯ͠
    Կͱͳ͘͸ཧղग़དྷ͕ͨɻɻɻ
    ݁ہɺϕʔεͰ࡞Δ͜ͱ͸Ͱ͖ͳ͔ͬͨʢٽʣ
12. ͦͯ͠ɺ೥
13. ༷ʑͳπʔϧͱ࿈ܞ͍͋͠αʔόϨεͳ࣌୅ɻ
    ୯७ͳ͓໰͍߹Θͤ΍)FBEMFTT
    $.4Ͱ)5.-ɾ$44ɾ+BWB4DSJQUͰ׬݁Ͱ͖Δʂ
14. αʔόαΠυΘ͔ΒΜԂδχΞͰ΋ϫϯνϟϯ͋Δʁʢসʣ
15. ͱ͍͏͜ͱͰ
    /VYUKT
    
    /FUMJGZ
    'PSNTͰϑΥʔϜΛͨΊͯ͠Έͨ
16. # Netilfyʹ͍ͭͯ 
    Netilfy
    ͱ͸ʁ
    ੩తͳαΠτΛߴ଎ͰఏڙͰ͖ΔαʔϏεͰ ͢ɻ
    ϑϩϯτΤϯυͷϏϧυɾσϓϩΠɾϗεςΟ ϯάΛߦ͏͜ͱ͕Ͱ͖ΔͨΊࣗ਎ͷαʔόอ ࣋ͤͣʹ8FCαΠτΛެ։͢Δ͜ͱ͕Ͱ͖· ͢ɻʢ(JUIVCͷΞΧ΢ϯτ͕͋Ε͹0,ʣ
    ༷ʑͳαʔϏεΛఏڙ͍ͯ͠·͢ɻ
    ɾ/FUMJGZ
    'PSNT
    ɾ/FUMJGZ
    $.4
    ɾ/FUMJGZ
    "OBMZUJDT ˡࠓճ͸͜ͷ঺հ IUUQTXXXOFUMJGZDPN
17. # Nuxt.jsʹ͍ͭͯ 
    Nuxt.js
    ͱ͸ʁ
    7VFKT
    ʹ΋ͱͮͨΞϓϦέʔγϣϯΛߏங͢ ΔͨΊͷϓϩάϨογϒϑϨʔϜϫʔΫʹͳ Γ·͢ɻ
    7VFKT
    ͷެࣜΨΠυϥΠϯʹԊͬͨΞʔΩς ΫνϟΛఏڙ͢ΔΑ͏ʹઃܭ͞Ε͓ͯΓɺ෦ ෼తͳར༻͔Β੩తͳ-1ϖʔδ͔Βෳࡶͳ 8FCΞϓϦέʔγϣϯͷ࡞੒Ͱ͖·͢ɻ IUUQTKBOVYUKTPSH
18. OQY
    DSFBUFOVYUBQQ
    TBDTTOFUMJGZGPSNTOVYU
    PS
    ZBSO
    DSFBUF
    OVYUBQQ
    TBDTTOFUMJGZGPSNTOVYU # Nuxt.js ͷ؀ڥߏங ## create-nuxt-appͰ؀ڥߏஙʢ։ൃ؀ڥߏஙࡁΈ͸ෆཁʣ
19. # Netlify Formsͷઃఆ ## formλάʹdata-netlifyͷdataଐੑΛture͔netlifyଐੑͰOK <form :name="name" method="POST" data-netlify="true"> <slot /> </form> ௒؆୯ʂʂʂ
20. αϯϓϧαΠτ
    http://bit.ly/30S3ppx https://github.com/redamoon/sacss-netlify-forms-nuxt
21. %FNP
22. # ·ͱΊ ## ϝϦοτ  αʔό஌ࣝɾαʔόαΠυݴޠෆཁͰϑΥʔϜ͕࡞ΕΔ
     (JUͷϦϙδτϦͰσϓϩΠ͢ΔͨΊίʔσΟϯάͷԆ௕্Ͱ࣮૷Մೳ
     ػೳతͳ੍ݶ͸͋Δ͕ɺσβΠϯͷ੍ݶͳ͠Ͱ࡞ΕΔ
     8FCαΠτͷ͓໰͍߹Θͤʹ͸༗ޮతʢΠϕϯτͷΞϯέʔτ౳ʣ ## σϝϦοτ  ࣗಈฦ৴ϝʔϧͳͲ͸ͳ͍ͨΊผͷπʔϧ࿈ܞ͕ඞཁ
     ϕʔγοΫೝূͳͲΫϩʔζυʹ࢖͏৔߹͸՝͕ۚඞཁʢ1SP
    ݄ԁʣ
     ແྉൣғ͕݄݅·Ͱ
     ଟগͷίϚϯυ஌͕ࣝඞཁ