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Λ ॻ͍͍ͯΔͻͱ͕ ࣗ৴Λ࣋ͬͯॻ͚Δ

10. None
11. None

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. Πϯσϯτ͸ۭനݸͱ͢Δ
    λϒͰͷΠϯσϯτ͸ېࢭͱ͢Δ
    Ϧετཁૉ͸վߦ͢Δ͜ͱ
    ϧʔϧ

17. None

18. CSS

19. )5.-$44ͷશͯͷίʔυ͸جຊతʹখจࣈΛ࢖͏͜ͱ
    ՄೳͳݶΓলུܗͷϓϩύςΟΛ࢖͏͜ͱ
    ஋͕ͷ৔߹͸୯ҐΛলུ͢Δ
    Χϥʔίʔυ͸ՄೳͳݶΓจࣈͷਐදهΛ࢖༻͢Δ
    ϧʔϧ

20. None

21. HTMLʹൺ΂ͯ CSSͷํ͕ϧʔϧ͕ଟ͍

22. ϧʔϧ͕ଟ͍ͱ νΣοΫ͢Δͷ͕େม

23. ͦ͜Ͱ CSSͷ੩తղੳπʔϧ StylelintΛ࢖͓͏

24. Stylelint • CSSʹಛԽͨ͠ίʔυνΣοΫπʔϧ • 170΄Ͳͷϧʔϧ͕͋Γɺϧʔϧҧ൓ͷίʔυΛ νΣοΫͯ͘͠ΕΔ • ͞ΒʹɺGoogle HTML/CSS Style

    Guide ʹ४ڌ ͨ͠ϧʔϧηοτ stylelint-config-standard ͕͋ Δ

25. ·ͱΊ • ίʔσΟϯάΨΠυΛऔΓೖΕͯɺHTML/ CSSΛهड़͢ΔϧʔϧΛ࡞Ζ͏ • ͞ΒʹɺStylelint Λಋೖͯ͠ίʔυ඼࣭Λ޲ ্ͤ͞Α͏

26. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

27. None