Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう！

Transcript

1. Style GuideͱstylelintΛ࢖ͬͯ HTML/CSSΛ៉ྷʹॻ͜͏ʂʂ 2020/01/31 WebφΠτٶ࡚ vol.8 େ௩ਅݴ
2. LTͷର৅ऀ • ΤϯδχΞͷҰา໨ͱͯ͠HTML/CSSษڧத • όοΫΤϯυΤϯδχΞͰยखؒͰϚʔΫΞο ϓॻ͍͍ͯΔ • ٯʹΰϦΰϦͷϑϩϯτΤϯυΤϯδχΞʹ ͸෺଍Γͳ͍͔΋Ͱ͢ɻɻɻ
3. ࣗݾ঺հ -BSBWFM
   7VFKT
   'JSFCBTF α΢φେ޷͖ͳ8FCΤϯδχΞ"
4. ձࣾ঺հʢ֓ཁʣ ߹ಉձࣾϊϚυϦ
   ૑ۀ
   ظ໨
   ϝϯόʔ
   ໊
   8FCܥडୗ։ൃ
   ϑϧϦϞʔτ
5. ձࣾ঺հʢ࢓ࣄʣ • Vue.jsͷಋೖࢧԉɾઃܭ࣮૷ϨϏϡʔ • ҩྍܥWebαʔϏεͷUI/UXվળʢLaravelʣ • ҩྍܥΞϓϦͷ৽نडୗ։ൃʢCordova+Vue.js+Firebaseʣ • JAMstackϕʔεͷ੩తαΠτߏங ʢNuxt.js+Netlify+contentfulʣ
6. Έͳ͞Μ HTML/CSSΛ៉ྷʹ ॻ͚͍ͯ·͔͢ʁ
7. ͦ͏ʂ
8. HTML/CSS͸ ࠷ॳʹগ͠ษڧͯ͠Ҏ߱ ͕ͬͭΓษڧ͢Δ͜ͱ ͕গͳ͍
9. ࠓ೔ͷൃදͰ ͳΜͱͳ͘ͰHTML/CSSΛ ॻ͍͍ͯΔͻͱ͕ ࣗ৴Λ࣋ͬͯॻ͚Δ
12. ͋ͳͨ Ͳ͏ϨϏϡʔ͢Δʁ
13. Google HTML/CSS Style Guide
14. Google HTML/CSS Style Guide • Google͕ఏڙ͢ΔίʔσΟϯάΨΠυ • https://google.github.io/styleguide/ • Java, Shell, JavaScript, HTML/CSSͳͲଟ਺ • Πϯσϯτ΍Ҿ༻ූɺCSSϓϩύςΟͷฒͼ ॱͳͲͷϧʔϧ͕·ͱ·͍ͬͯΔ
15. HTML
16. Πϯσϯτ͸ۭനݸͱ͢Δ
    λϒͰͷΠϯσϯτ͸ېࢭͱ͢Δ
    Ϧετཁૉ͸վߦ͢Δ͜ͱ
    ϧʔϧ
18. CSS
19. )5.-$44ͷશͯͷίʔυ͸جຊతʹখจࣈΛ࢖͏͜ͱ
    ՄೳͳݶΓলུܗͷϓϩύςΟΛ࢖͏͜ͱ
    ஋͕ͷ৔߹͸୯ҐΛলུ͢Δ
    Χϥʔίʔυ͸ՄೳͳݶΓจࣈͷਐදهΛ࢖༻͢Δ
    ϧʔϧ
21. HTMLʹൺ΂ͯ CSSͷํ͕ϧʔϧ͕ଟ͍
22. ϧʔϧ͕ଟ͍ͱ νΣοΫ͢Δͷ͕େม
23. ͦ͜Ͱ CSSͷ੩తղੳπʔϧ StylelintΛ࢖͓͏
24. Stylelint • CSSʹಛԽͨ͠ίʔυνΣοΫπʔϧ • 170΄Ͳͷϧʔϧ͕͋Γɺϧʔϧҧ൓ͷίʔυΛ νΣοΫͯ͘͠ΕΔ • ͞ΒʹɺGoogle HTML/CSS Style Guide ʹ४ڌ ͨ͠ϧʔϧηοτ stylelint-config-standard ͕͋ Δ
25. ·ͱΊ • ίʔσΟϯάΨΠυΛऔΓೖΕͯɺHTML/ CSSΛهड़͢ΔϧʔϧΛ࡞Ζ͏ • ͞ΒʹɺStylelint Λಋೖͯ͠ίʔυ඼࣭Λ޲ ্ͤ͞Α͏
26. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ