Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

大塚真言

January 31, 2020
Tweet

More Decks by 大塚真言

Other Decks in Programming

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