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