Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
How to Deal with Technical Debt of CSS CSSͷٕज़తෛ࠴ͱͷ͖߹͍ํ Takuya Matsumoto @upinetree Rails Developer Meetup 2019 Day 1 2019.03.22
Slide 2
Slide 2 text
Takuya Matsumoto @upinetree גࣜձࣾ ສ༿ ϓϩάϥϚ ੜ·Ε: ৽ׁݝԬࢢ ͖: ຊञ, Ϊλʔ, ήʔϜ
Slide 3
Slide 3 text
#ݱRails ͕ΜΓ·ͨ͠
Slide 4
Slide 4 text
ຊͷςʔϚ CSSͷٕज़తෛ࠴
Slide 5
Slide 5 text
CSSͷෛ࠴Λվળͨ͠ͱ͖ͷܦݧΛݩʹ ϓϩάϥϚͷࢹ͔Βߟͯ͠ΈΔ
Slide 6
Slide 6 text
CSSͷٕज़తෛ࠴Ͳ͏ͯ͠ੜ͡Δͷ͔
Slide 7
Slide 7 text
͜Μͳܦݧ͋Γ·ͤΜ͔ • CSSΛมߋͨ͠Βظͱҧ͏ͱ͜ΖʹӨڹͨ͠ • HTMLͷߏΛগ͠ม͑ͨΒελΠϧ่͕յͨ͠ • CSS͕Ͳ͜ʹͲ͏࡞༻͍ͯ͠Δ͔͕͔ΒͣखΛՃ͑ͨ͘ͳ͍ • ͳ͔ͥࢦఆͨ͠ελΠϧ͕͋ͨΒͳ͍ • ΘΕ͍ͯͳ͍CSS͕͋Δ͕ফ͢ͷ͕ාͯ͘์ஔ͞Ε͍ͯΔ
Slide 8
Slide 8 text
։ൃͷϘτϧωοΫʹͳͬͯ͠·ͬͨCSS • ཧతɺ৺ཧతʹͲΜͲΜखΛग़ͮ͠Β͘ͳͬͯ͠·͏ • ݁Ռͱͯͪ͠ΐͬͱͨ͠ελΠϧमਖ਼ʹଟେͳ͕͔͔࣌ؒΔ • Ұ෦ͷৄ͍͠ϝϯόʔʹෛՙ͕ूதͯ͠͠·͍SPOFͱͳΔ
Slide 9
Slide 9 text
ٕज़తෛ࠴ͷӨڹͱ͍͏؍Ͱ (Ruby) ϓϩάϥϛϯάͰ ݟ֮͑ͷ͋Δߏਤ
Slide 10
Slide 10 text
Ͱɺ CSSͷٕज़తෛ࠴ϓϩάϥϛϯά΄Ͳ νʔϜͰٞ͞Εͳ͍ҹ͕͋Δ
Slide 11
Slide 11 text
Ͳ͏ͯͩ͠Ζ͏
Slide 12
Slide 12 text
CSSͳΒͰͷഎܠΛߟ͑Δ
Slide 13
Slide 13 text
CSSͷ༷γϯϓϧ • ৄࡉͳͲͷ͍͔ͭ͘ͷϧʔϧ͕͋Δ͚ͩͰɺॻ͍ͨͱ͓Γʹε λΠϧ͕ద༻͞ΕΔ • ࠷ॳظ໌֬ͰΘ͔Γ͍͢ • ͲΜͳ࡞ΓΛ͍ͯͯ͠ද໘తʹͳΜͱ͔ͳͬͯ͠·͏ • ແҙࣝʹฦࡁͷݟࠐΈͷͳ͍ɺརࢠͷߴ͍आΓೖΕΛͯ͠͠·͍ ͕ͪ
Slide 14
Slide 14 text
࠷ॳγϯϓϧͳͷͲͷݴޠͰಉ͡ • • CSSͷߏԽϋʔυϧ͕ߴ͍ • ෛ࠴Λ࡞ͬͯ͠·͍ͬͯΔࣄ࣮ͷೝࣝͮ͠Β͞ • νʔϜͰҙࣝతʹCSSͷϝϯςφϯεͷؔ৺ΛߴΊ͍͔ͯͳ ͍ͱɺؾ͍ͮͨͱ͖ʹେ͖ͳෛ࠴Λ๊͍͑ͯΔ͜ͱʹͳΔ
Slide 15
Slide 15 text
νʔϜ։ൃͰؔ৺Λ͖࣋ͭࣄฑͨ͘͞Μ DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ※ԁͷେ͖͞ʹҙຯ͋Γ·ͤΜ
Slide 16
Slide 16 text
DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ͋ΔνʔϜͷϝϯόʔͷؔ৺
Slide 17
Slide 17 text
DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ϝϯόʔB ͋ΔνʔϜͷϝϯόʔͷؔ৺
Slide 18
Slide 18 text
DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ϝϯόʔB ϝϯόʔC ͋ΔνʔϜͷϝϯόʔͷؔ৺
Slide 19
Slide 19 text
DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ϝϯόʔB ϝϯόʔC ϝϯόʔD ͋ΔνʔϜͷϝϯόʔͷؔ৺
Slide 20
Slide 20 text
DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ϝϯόʔB ϝϯόʔC ϝϯόʔD ͋ΔνʔϜͷϝϯόʔͷؔ৺ ͜ͷνʔϜͷϓϩάϥϚ… ػೳΛ͍ͪૣ͘Ϣʔβʹಧ͚͍ͨ CSSۤखҙ͕ࣝ͋ΓखΛग़ͮ͠Β͍ σβΠφ͕ͳΜͱ͔ͯ͘͠ΕΔͱߟ͑ ͍ͯΔ
Slide 21
Slide 21 text
DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ϝϯόʔB ϝϯόʔC ϝϯόʔD ͋ΔνʔϜͷϝϯόʔͷؔ৺ ͜ͷνʔϜͷσβΠφʹͱͬͯ… CSSදݱखஈͷ1ͭͰ͔͠ͳ͍ ੵۃతʹઃܭ͠Α͏ͱ͍͏ ಈػ͚͕͍ͮ͠
Slide 22
Slide 22 text
CSS ؔ৺ͷٴͳ͍୩
Slide 23
Slide 23 text
ʮؔ৺ͷ୩ʯͱ໊͚ͯΈΔ • ؔ৺ͷ֎ͷ͜ͱʹؾ͖ͮͮΒ͍ͨΊɺ୩͕࡞ΒΕ͍͢ • ؾ͍ͮͨͱͯ͠ɺৄ͘͠ͳ͍͠ɺଞͷৄ͍͠ϝϯόʔ͕͏· ͬͯ͘͘ΕΔͱࢥͬͯ͠·͏ • ؍ऀޮՌͬΆ͍ूஂ৺ཧ͋Γͦ͏ https://flic.kr/p/f7yxnc
Slide 24
Slide 24 text
ʮؔ৺ͷ୩ʯΛͲ͏Γӽ͑Δ͔
Slide 25
Slide 25 text
୩ʹڮΛ͔͚ΒΕͨΒ • ৄ͍͕ࣝ͠ͳͯ͘ɺແҙࣝʹٕज़తෛ࠴Λ࡞Γࠐ·ͳ͍Α ͏ͳߏʢʹڮʣΛ࡞Δ • ͨͩ͠ɺΕΔ͜ͱݶఆతʢ͋͘·ͰڮͳͷͰʣ
Slide 26
Slide 26 text
ࠓճհ͢Δڮ • CSSઃܭํ๏ • ੍ • ͪΐ͍͠Ϋϥε
Slide 27
Slide 27 text
CSSઃܭํ๏ͷಋೖ
Slide 28
Slide 28 text
CSSઃܭํ๏ͱ • ઌਓ͕ͨͪߟ͑ͨϕετϓϥΫςΟεू • OOCSS, BEM, SUIT CSS, SMACSS, MCSS, RSCSS, ECSS, ITCSS, FLOCSS, FLOU, ... • υΩϡϝϯτֶΛΞτιʔεͰ͖Δ • ଟ͘ͷಋೖࣄྫ͕͋Γɺใ͕खʹೖΕ͍͢
Slide 29
Slide 29 text
CSSઃܭํ๏ͷσϝϦοτ • ϓϩμΫτʹϚον͠ͳ͍͜ͱ͕͋Δ • ϧʔϧ͕ෳࡶͩͱཧղ͕͍ͨ͠ɺผղऍ͕ੜ·ΕΔ͜ͱ͕͋Δ • ϧʔϧΛ͍֮͑ͯͳ͍ɺਁಁ͠ͳ͍ • ํ๏ʹै͏͜ͱࣗମ͕తʹͳͬͯ͠·͍͕ͪ
Slide 30
Slide 30 text
CSSઃܭํ๏Λಋೖ͖͔͢ • ํ๏ͷߟ͑ํղܾ͠Α͏ͱ͍ͯ͠ΔΛɺνʔϜͰೲಘ ্ͨ͠ͰಋೖͰ͖ΔͳΒ࠷ྑ • ΧελϚΠζ͢ΔɺΤοηϯε͚ͩಋೖ͢Δɺͱ͍͏બࢶ ͋Δ • →͜Ε͔Βհ͢Δʮ੍ʯͱʮͪΐ͍͠ʯࢲͷܦݧ্ ͷ͓͢͢ΊΤοηϯε
Slide 31
Slide 31 text
੍ͷಋೖ
Slide 32
Slide 32 text
CSSʹ੍Λಋೖ͢Δཧ༝ • CSSͷ༷γϯϓϧͳ͚ͩʹɺॻ͖ํʹΑͬͯͲ͜·Ͱ ෳࡶʹͳΓಘΔɻͦͷ੍ޚॻ͖खʹҕͶΒΕΔ • ੍Λಋೖ͢Δ͜ͱͰɺࣦഊͮ͠Β͍ߏΛ࡞Δ • ͜͜ͰޮՌతͳ3ͭͷ੍Λհ
Slide 33
Slide 33 text
੍1: Ϋϥεͷ໋໊نଇ • CSSηϨΫλͰࢦఆͨ͠ͱ͓Γʹద༻͞ΕΔͷͰɺΫϥεͷ໋໊͕ ඇৗʹॏཁ • ·ͨɺείʔϓͱ͍͏ߟ͑ํ͕ଘࡏ͠ͳ͍ͷͰɺڝ߹͕ൃੜ͍͢͠ • ҰҙͰɺ༰ͷཧղ͍͢͠ͷ͕·͍͠ • ͜ΕΒʹணͨ͠ํ๏ʹ BEM SUIT CSS, ECSS ͳͲ͕͋Δ
Slide 34
Slide 34 text
BEM https://en.bem.info/ • ίϯϙʔωϯτʢಠཱͨ͠෦୯ҐʣΛجຊͱͨ͠ઃܭࢦɻ ΫϥεΛ Block, Element, Modifier ͔ΒΈཱͯΑ͏ͱ͍͏ͷ • BEMࣗମ໋໊نଇΛڧ੍͠ͳ͍͕ɺMindBEMdingͳͲͷ໋໊ نଇ͕ྑ͘ར༻͞ΕΔ .search-form__button--disabled Block Element Modifier
Slide 35
Slide 35 text
BEMΛར༻ͨ͠Ϋϥεͷ໋໊ • BEMΛར༻͢ΕείʔϓΛΤϛϡϨʔτ͢Δ͜ͱ͕Ͱ͖Δ • ୭͕ઃܭͯ͠ҰҙͰΘ͔Γ͘͢ɺিಥͷগͳ͍Ϋϥε໊ʹ ͳΔʢͣʣ • Ϋϥε໊͕ʹͳΔɺ __ , -- ͳͲͷ׳Εͳ͍ه߸͕͋Δɺͱ ͍͏੍ͷτϨʔυΦϑͱͯ͠ड͚ೖΕΔඞཁ͕͋Δ
Slide 36
Slide 36 text
੍2: ৄࡉΛͳΔ͘ಉ͡ʹอͭ • ৄࡉʹແ༻ͳେখ͕͋Δͱɺҙਤͤ͵ڝ߹͕ൃੜ͍͢͠ • ͳ͔ͥࢦఆͨ͠ελΠϧ͕ө͞Εͳ͍ • → !important ͷొ • ৄࡉͷେখҙਤతʹઃܭ͖͢…͕ͩɺʮؔ৺ͷ୩ʯ͕͋ ΔதͰͦΕϋʔυϧ͕ߴ͍
Slide 37
Slide 37 text
ৄࡉͷ্ॻ͖߹ઓ .links { font-size: 1.2rem; .pickup { color: #933; } } ※Sassه๏Ͱ͢ɻҎ߱ͷίʔυͯ͢ಉ༷Ͱ͢
Slide 38
Slide 38 text
ৄࡉͷ্ॻ͖߹ઓ .links { font-size: 1.2rem; .pickup { color: #933; } }
ϝχϡʔͰ ͑Δͳ
Slide 39
Slide 39 text
ৄࡉͷ্ॻ͖߹ઓ .links { font-size: 1.2rem; .pickup { color: #933; } } #menu { .links { font-size: 1rem; color: #333; } }
ϝχϡʔ ͪΐͬͱݟͨม͑Α͏ ʢৄࡉߴʣ
Slide 40
Slide 40 text
ৄࡉͷ্ॻ͖߹ઓ .links { font-size: 1.2rem; .pickup { color: #933 !important; } } #menu { .links { font-size: 1rem; color: #333; } }
ͳΜ͔ ελΠϧ͋ͨΒͳ͍ ͠ !important ͠ͱ͜
Slide 41
Slide 41 text
ৄࡉͷҙਤͤ͵มಈΛ੍͙ • ࢠଙηϨΫλΛ༻͠ͳ͍ʢ্ঢΛ͙ʣ • IDηϨΫλΛ༻͠ͳ͍ʢ্ঢΛ͙ʣ • ཁૉηϨΫλΛ༻͠ͳ͍ʢԼΛ͙ʣ • ͪΖΜCSSͷදݱͦͷ੍ݶ͞ΕΔ
Slide 42
Slide 42 text
ࢠଙηϨΫλΛΘͳ͍ ڧ੍͍ݶͳͷͰɺྫ֎ͱͯ͠ڐ༰͢ΔέʔεΛఆٛ͢Δ͜ͱ͋Δ /* Bad */ #menu { .links { font-size: 1rem; color: #333; .sub-links { font-size: 0.8rem; } } } /* Good */ .menu-links { color: #333; } .menu-links-main { font-size: 1rem; } .menu-links-sub { font-size: 0.8rem; }
Slide 43
Slide 43 text
੍3: ϨΠΞτͱݟͨΛ͢Δ • ϨΠΞτͱݟ͕ͨಉ͡Ϋϥεʹఆٛ͞Ε͍ͯΔͱɺ࠶ར༻ ͷϋʔυϧ্্͕͕ͬͯॻ͖ॏෳఆٛ͞Ε͕ͪ • ϨΠΞτΛผͷΫϥεʹΓग़͓ͯ͘͠ͱɺ࠶ར༻͍͢͠ • ίϯϙʔωϯτͷॊೈͳϨΠΞτ͕ՄೳʹͳΔ
Slide 44
Slide 44 text
ϨΠΞτͱݟͨͷͷྫ ࢠηϨΫλৄࡉΛ্͛Δ͕ɺൣғΛݶఆత͢ΔͨΊʹ׆༻Ͱ ͖Δʢࢀߟྫ: RSCSSʣ /* ϨΠΞτ (prefix: -l) */ .l-comments { > .comment { margin-top: 8px; } > .comment + .comment { margin-left: 4px; } } /* ݟͨ */ .comment { display: block; border: 1px solid #aaa; }
Slide 45
Slide 45 text
ϨΠΞτͱݟͨΛ͢ΔσϝϦοτ • ίϯϙʔωϯτͷڽूͷ໘ͰτϨʔυΦϑ͕͋Δ • ࡉ͔͗͘͢͠Δͱཁૉ͔Βಉ࣌ʹґଘ͢ΔΫϥε͕૿͑Δ ͠ɺ͍ํ͘͠ͳΔ • ඞਢͱͤͣɺϨΠΞτΛઃ͚ͯΛਪ͢Δͷख • ࢀߟྫ: SMACSS, MCSS, ITCSS, FLOCSS, FLOU
Slide 46
Slide 46 text
ͪΐ͍͠Ϋϥεͷಋೖ
Slide 47
Slide 47 text
ͪΐ͍͠Ϋϥε • Ұൠతʹ Utility ͱݺΕΔͷͰɺ൚༻తͳϔϧύʔΫϥε • CSSϑϨʔϜϫʔΫͰఆ͍ٛͯ͠Δ͜ͱ͕͋Δ (Bootstrap 4, UIKit, Tailwind CSS, Foundation 6, ...)
Hello
World
Slide 48
Slide 48 text
ͪΐ͍͠ͷྑ͞ • จ຺ϨΠΞτ͔ΒݟͨΛ͘͢͠ͳΔ • ཁૉͷίΞͳελΠϧʹूதͯ͠ߟ͑Δ͜ͱ͕Ͱ͖Δ • CSSͷࣝʹΑΒͣฏʹελΠϧΛͯΔ͜ͱ͕Ͱ͖Δ • ͪΐͬͱͨ͜͠ͱͰσβΠϯج४ʹԊ͍ͬͯΔ͔σβΠφʹ֬ ೝͯ͠Β͏ඞཁ͕ͳ͘ͳΔ
Slide 49
Slide 49 text
ԿΛͪΐ͍͖͔͢ σβΠϯج४ʹଈͨ͠Ϋϥε • Spacing (margin, padding) • Typography (font-size, line- height) • Color variations ݟͨͷΛิॿ͢ΔΫϥε • Flexbox • Float • Display
Slide 50
Slide 50 text
ͪΐ͍͗͢͠͠ʹؾΛ͚ͭΔ • HTML͔ΒCSSͷґଘ͕૿େɺີ݁߹ʹͳΓCSSͷมߋʹΑΔӨڹ ͕େ͖͘ͳΔ • ͪΐ͍Ͱͳ͍ͳΒͪΌΜͱΫϥεԽ͢Δ • ࠷େͪΐ͍͠ͷ҆ΛܾΊΔͳͲ͕༗ޮ • ۃͳྫʢδϣʔΫʣ: https://github.com/marmelab/universal.css
Slide 51
Slide 51 text
ͪΐ͍͠Ϋϥεγϯϓϧʹอͭ • ൣғͰΘΕΔΫϥεͳͷͰɺมԽͮ͠Β͍༰ʹ͢Δ • มԽͯͦ͠ͷӨڹ͕ҙਤతͰ͋Δ͜ͱΛอͭ • ࢠଙηϨΫλͳͲͱΈ߹Θ্ͤͨॻ͖ආ͚Δɻ࡞༻͕༧ଌ ͮ͠Β͘ͳΔ
Slide 52
Slide 52 text
ڮͷݶք
Slide 53
Slide 53 text
ڮ͕ڊେʹͳͬͯ͘Δ • ϧʔϧෳࡶʹ • ͪΐ͍͠Ϋϥεଟ༷Խ • ڮ͕దʹΘΕ͍ͯΔ͔ͷνΣοΫͷෛ୲ • ҙਤͱҧ͏ΘΕํΛͨ͠ͱ͖ͷࠞཚ • ڮࣗମͷϝϯςφϯείετ͕େ͖͘ͳͬͯ͘Δ
Slide 54
Slide 54 text
ؔ৺ͷ୩૬มΘΒͣଘࡏ͢Δ • ࠜຊతʹղܾ͍ͯ͠ͳ͍ • ڮ͔ͨ͠ʹޮՌతɻͨͩɺͱͱ͋ͬͨෛ࠴Λɺརࢠͷ ͍ෛ࠴ʹ͚ସ͚͑ͨͩͱ͍͑Δ • ڮΛඞཁेͳେ͖͞ʹอͭͨΊʹɺ୩ࣗମʹରॲ͍ͨ͠
Slide 55
Slide 55 text
୩ΛຒΊΔ • ϝϯόʔͷؔ৺Λ͛ɺνʔϜશһͰCSSΛอक͢ΔจԽΛࠜ ͔ͤΔ • ֶशίετΛड͚ೖΕɺଐਓԽͤͣʹઃܭϨϏϡʔ͕Ͱ͖Δ Α͏ʹͳΔ • Ұਓ͡Όͳͯ͘νʔϜͱͯ͠ͷ׆ಈ
Slide 56
Slide 56 text
ͦΕͧΕͷಛ ղܾՄೳͳ ࣮ߦɾܧଓͷ༰қ͞ ڮΛ͔͚Δ ݶఆత ؆୯ Ͱ͖Δ͜ͱ͔Β͡ΊΒΕΔ ୩ΛຒΊΔ ࠜຊత ͍͠ ͙͢ʹ݁Ռग़ͳ͍
Slide 57
Slide 57 text
ͦΕͧΕͷಛ • ୩ΛຒΊΔํ๏ཧత͕ͩɺ୩͕େ͖͍νʔϜ΄Ͳ࣮ߦ͕ ͍͠ • ·ͣڮΛ͔͚ɺฒߦͯ͠ঃʑʹ୩ΛຒΊΔྲྀΕ͕ݱ࣮త ղܾՄೳͳ ࣮ߦɾܧଓͷ༰қ͞ ڮΛ͔͚Δ ݶఆత ؆୯ Ͱ͖Δ͜ͱ͔Β ୩ΛຒΊΔ ࠜຊత ͍͠ ͙͢ʹ݁Ռग़ͳ͍
Slide 58
Slide 58 text
Ͳͷॱ൪ͰऔΓΉ͔
Slide 59
Slide 59 text
ͱ͋Δ։ൃνʔϜ • CSSͷٕज़తෛ࠴ʹΑͬͯ։ൃεϐʔυ͕Լ • CSSʹৄ͍͠ϝϯόʔ͕͍Δ͕ɺଐਓԽ͍ͯ͠Δঢ়ଶ
Slide 60
Slide 60 text
ϨϏϡʔ͓ئ͍͠·͢ʂ ͱ͋Δ։ൃνʔϜ • ଐਓԽʹΑΓෛՙ͕ूத͠ɺϘτϧωοΫʹ ͜͜ௐ͍ͯͩ͘͠͞ʂ ίʔσΟϯάཔΈ·͢ʂ
Slide 61
Slide 61 text
ظݶ͕͋Δ͔Β Ұ୴ೖΕͯ͠·͓͏ ͱ͋Δ։ൃνʔϜ • ͦͷϝϯόʔ͕Γ͖ΕͣʹऔΓ͜΅͢Α͏ʹͳΔͱɺ͞Βʹ ෛ࠴͕ੵ·Ε͍ͯ͘ෛͷϧʔϓ ࣗͰͬͯΈΔ͔ ͪΐͬͱ·ͬͯ…
Slide 62
Slide 62 text
Ͳ͏औΓΊΑ͍ͩΖ͏͔ • ϑϩϯτΤϯυΤϯδχΞΛޏ͏ʁ • Ұ࣌తʹෛ୲ܰݮ͞Εͦ͏ • ظతʹͦͷϝϯόʔʹෛ୲͕ूதͯ͠ϘτϧωοΫ͕Ҡಈ ͢Δ͚ͩʹͳΓͦ͏
Slide 63
Slide 63 text
Ͳ͏औΓΊΑ͍ͩΖ͏͔ • ·ͣෛͷϧʔϓΛࢭΊͯɺແࡦʹෛ࠴Λ૿͞ͳ͍Α͏ʹ͠ ͍ͨ • ͦͯ͠ෛ࠴Λฦ͍͚ͯ͠ΔΑ͏ʹ͍ͨ͠
Slide 64
Slide 64 text
·ͣɺখ͘͞ڮΛ͔͚Δ • ͪΐ͍͠ΫϥεΛಋೖɻʮUtilityʯͱྨ • ͍࢝Ί͘͢ɺతͳޮՌ͕ग़͍͢ • ෛ࠴ͷ૿ՃΛ͘Ͱ͖Δ • ͪΐͬͱͨ͠ґཔ͕ݮΓɺৄ͍͠ϝϯόʔͷෛ୲͕ܰ͘ͳΔ • طଘͷίʔυͷΓ͠ʹ͑Δ
Slide 65
Slide 65 text
ڮΛͬͯΒ͏ • ڮΛ͔͚ͯΒΕͳ͚Εҙຯ͕ͳ͍ • ελΠϧΨΠυΛ࡞ͯ͠प • ελΠϧΨΠυδΣωϨʔλΛར༻ • Astrum, Hologram, Fractal, SC5 ͳͲ
Slide 66
Slide 66 text
Astrum http://astrum.nodividestudio.com/
Slide 67
Slide 67 text
ελΠϧΨΠυʹॻ͘͜ͱ • ఆٛ͞Ε͍ͯΔ Utility ͱɺ༻ྫɺҙ • ελΠϧΨΠυͷߋ৽ͷํ
Slide 68
Slide 68 text
ϧʔϧͷ࡞ • ৽͍͠ΫϥεΛ࡞Δͱ͖ͷํ • ͲΜͳํ๏ɺ੍Λ࠾༻͢Δ͔ͷ߹ҙΛ࡞Δ • ͜ΕελΠϧΨΠυWikiͳͲʹهࡌͯ͠ʹ͖͍͢Α ͏ʹ͓ͯ͘͠
Slide 69
Slide 69 text
৽͍͠ը໘Ͱ ʮ໎Θͣ͑Δ Utilityʯͱ ʮࣦഊΛ͙ϧʔϧʯ Ͱ҆શʹ࣮͍͚ͯ͠Δ
Slide 70
Slide 70 text
ෛ࠴ͷෛͷϧʔϓ͔Βൈ͚ग़ͤͨͣ • ͱ͍͑ɺطଘͷͱ͜Ζ͕յΕ͍͢ͷͦͷ··… • ৽͍͠ϧʔϧͷਁಁ્͢Δ • طଘίʔυΛϦϑΝΫλϦϯάͯ͠ɺྑ͍ߏʹ͍࣋ͬͯ͘
Slide 71
Slide 71 text
ϦϑΝΫλϦϯάΛ࢝ΊΔલʹ • ෛ࠴Λ࣋ͭΫϥεൣғʹɺ࣌ʹ্ॻ͖͞ΕͭͭΘΕͯ ͍Δ • ஔ͖͑ͨ݁Ռɺҙਤͤ͵Өڹ͕ͳ͍͔Λ͔֬ΊΔͷҰۤ࿑
Slide 72
Slide 72 text
ϏδϡΞϧϦάϨογϣϯςετ • ݟͨͷࣗಈςετ • εΫϦʔϯγϣοτͷࠩΛग़ྗɺҙਤͤ͵มߋ͕ͳ͍͜ͱΛ ֬ೝ͢Δ • ςετπʔϧ͕ར༻Մೳ • BackstopJS, REG-SUIT
Slide 73
Slide 73 text
BackstopJS Rails + BackstopJS ͷखલຯḩͷղઆهࣄ http://upinetree.hatenablog.com/entry/2018/05/13/231951
Slide 74
Slide 74 text
ಓͳϦϑΝΫλϦϯάͷ͡·Γ • ޮՌ͕ग़͍͢ͱ͜Ζɺ͕େ͖͍ͱ͜ΖΛ༏ઌͯ͠ߦ͏ • ಉ͡༰ɾతͳͷʹҧ͏Ϋϥεʹͳ͍ͬͯΔͷΛڞ௨Խ • ҧ͏తͷΫϥεͳͷʹ্ॻ͖ɾڞ௨Խ͍ͯ͠ΔͷΛ • ࡉ͔͍ௐΛ͗͢͠Δͱؾ͕ԕ͘ͳΔɻҰ୴ஔ͍͓ͯ͘
Slide 75
Slide 75 text
ϦϑΝΫλϦϯά࡞ۀͷதͰͷൃݟ • ΑΓ൚༻తͳߏ͕ݟ͔ͭΔͣ • ͨͱ͑άϦουγεςϜͷΑ͏ͳϨΠΞτΫϥε͕ද֨ • ͦΕΒΛΫϥεԽͯ͠࠶ར༻Մೳʹ͢Δ
Slide 76
Slide 76 text
ͨͩ͠ɺաͳDRYࢦ͞ͳ͍ • ΘΕํ͕ҧ͏ͳΒɺॏෳఆٛͨ͠΄͏͕ʹͳΓͮΒ͍ • mixin ಉ༷ͰɺநԽͷࡍेݕ౼͢Δ
Slide 77
Slide 77 text
ٳܜେࣄ ☕ • CSSͷϦϑΝΫλϦϯάຯ͕ͩɺ୯७࡞ۀͰͳ͍ • શମͷߏΛѲ͠ͳ͕Βߦ͏ɺͱͯؾΛ͏࡞ۀ • ͜ͷஈ֊Ͱෛͷϧʔϓ͔Βൈ͚ग़͍ͤͯΔͷͰɺண࣮ʹߦ͏
Slide 78
Slide 78 text
ಓͰటष͍͚Ͳɺଓ͚Δ • ͲΜͲΜ͖Ε͍ʹɺಈ͖͘͢ͳͬͯ͘Δ • ը໘Λ৮ΔաఔͰγεςϜશମͷཧղ͕ਂ·Δ • νʔϜΈΜͳͰΔ͜ͱ͕Ͱ͖ΔͱΑΓྑ͍ • ؔ৺Λ͛ɺ୩ΛຒΊ͍ͯ͘ػձ͕࡞ΕΔ
Slide 79
Slide 79 text
·ͱΊ
Slide 80
Slide 80 text
·ͱΊ • CSSͷٕज़తෛ࠴ͷࠜݯʮؔ৺ͷ୩ʯ • ؔ৺ͷ୩ʹʮઃܭํ๏ʯʮ੍ʯʮͪΐ͍͠Ϋϥεʯͷڮ Λ͔͚Δ • ڮʹݶք͕͋Δɻ୩ΛຒΊΔ׆ಈେࣄ • ಓͷΓ͍͚Ͳɺখ͘͞͡ΊΔ͜ͱ͙͢ʹͰ͖Δ
Slide 81
Slide 81 text
͓·͚
Slide 82
Slide 82 text
ڐ༰͢ΔࢠଙηϨΫλͷྫ: Blockʹดͨ͡ఆٛ /* Good */ .carousel { font-size: 1rem; .home & { font-size: 2rem; } } .carousel ͷৄࡉͷڧऑ͕ Block ͷ {} ʹด͍ͯ͡ΔͷͰɺӨ ڹൣғΛ༧ଌ͍͢͠ /* Bad */ .carousel { font-size: 1rem; } .home { .carousel { font-size: 2rem; } }