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

by 大塚真言

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Έͳ͞Μ HTML/CSSΛ៉ྷʹ ॻ͚͍ͯ·͔͢ʁ

Slide 7

Slide 7 text

ͦ͏ʂ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Google HTML/CSS Style Guide

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

HTML

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

CSS

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

HTMLʹൺ΂ͯ CSSͷํ͕ϧʔϧ͕ଟ͍

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text