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

Transcript

1. Style GuideͱstylelintΛ࢖ͬͯ
   HTML/CSSΛ៉ྷʹॻ͜͏ʂʂ
   2020/01/31 WebφΠτٶ࡚ vol.8
   େ௩ਅݴ
   

   View Slide

2. LTͷର৅ऀ
   • ΤϯδχΞͷҰา໨ͱͯ͠HTML/CSSษڧத
   • όοΫΤϯυΤϯδχΞͰยखؒͰϚʔΫΞο
   ϓॻ͍͍ͯΔ
   • ٯʹΰϦΰϦͷϑϩϯτΤϯυΤϯδχΞʹ
   ͸෺଍Γͳ͍͔΋Ͱ͢ɻɻɻ
   

   View Slide

3. ࣗݾ঺հ
   -BSBWFM
   7VFKT
   'JSFCBTF
   α΢φେ޷͖ͳ8FCΤϯδχΞ"
   

   View Slide

4. ձࣾ঺հʢ֓ཁʣ
   ߹ಉձࣾϊϚυϦ
   ૑ۀظ໨
   ϝϯόʔ໊
   8FCܥडୗ։ൃ
   ϑϧϦϞʔτ
   

   View Slide

5. ձࣾ঺հʢ࢓ࣄʣ
   • Vue.jsͷಋೖࢧԉɾઃܭ࣮૷ϨϏϡʔ
   • ҩྍܥWebαʔϏεͷUI/UXվળʢLaravelʣ
   • ҩྍܥΞϓϦͷ৽نडୗ։ൃʢCordova+Vue.js+Firebaseʣ
   • JAMstackϕʔεͷ੩తαΠτߏங
   ʢNuxt.js+Netlify+contentfulʣ
   

   View Slide

6. Έͳ͞Μ
   HTML/CSSΛ៉ྷʹ
   ॻ͚͍ͯ·͔͢ʁ
   

   View Slide

7. ͦ͏ʂ
   

   View Slide

8. HTML/CSS͸
   ࠷ॳʹগ͠ษڧͯ͠Ҏ߱
   ͕ͬͭΓษڧ͢Δ͜ͱ
   ͕গͳ͍
   

   View Slide

9. ࠓ೔ͷൃදͰ
   ͳΜͱͳ͘ͰHTML/CSSΛ
   ॻ͍͍ͯΔͻͱ͕
   ࣗ৴Λ࣋ͬͯॻ͚Δ
   

   View Slide

10. View Slide

11. View Slide

12. ͋ͳͨ
    Ͳ͏ϨϏϡʔ͢Δʁ
    

    View Slide

13. Google HTML/CSS
    Style Guide
    

    View Slide

14. Google HTML/CSS Style Guide
    • Google͕ఏڙ͢ΔίʔσΟϯάΨΠυ
    • https://google.github.io/styleguide/
    • Java, Shell, JavaScript, HTML/CSSͳͲଟ਺
    • Πϯσϯτ΍Ҿ༻ූɺCSSϓϩύςΟͷฒͼ
    ॱͳͲͷϧʔϧ͕·ͱ·͍ͬͯΔ
    

    View Slide

15. HTML
    

    View Slide

16. Πϯσϯτ͸ۭനݸͱ͢Δ
    λϒͰͷΠϯσϯτ͸ېࢭͱ͢Δ
    Ϧετཁૉ͸վߦ͢Δ͜ͱ
    ϧʔϧ
    

    View Slide

17. View Slide

18. CSS
    

    View Slide

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

    View Slide

20. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. View Slide