HTML5 Conference 2018の発表資料です。
Ϗϧυϓϩηε͔Βߟ͑ΔCSSΞϯνύλʔϯHTML5 Conference 2018גࣜձࣾΧϒΫ ࠓଜݠ࢜ @kimamula
View Slide
CSSͷΛ͠·͢
ϑϩϯτΤϯυΤϯδχΞͱCSSͱࢲCSSಘҙCSSۤख
CSSಘҙCSSۤखࢲϑϩϯτΤϯυΤϯδχΞͱCSSͱࢲ
ͦΜͳࢲͰ͕͢
৭ʑ͋ͬͯɺCSSͱਅʹ͖߹Θͳ͚ΕͳΒͳ͍ͱ͖͕͖ͨ…
ϲ݄ܦա
ؾ͕͍ͭͨ͜ͱ
Flexbox, Grid LayoutΛ͑CSSͦΜͳʹͭΒ͘ͳ͍
Flexbox, Grid LayoutΛ͑CSSͦΜͳʹͭΒ͘ͳ͍͜ͷ͠·ͤΜ
Ϗϧυϓϩηε͔Βߟ͑ΔͱɺCSSͷઃܭ͕ߟ͍͑͢
Ϗϧυϓϩηε͔Βߟ͑ΔͱɺCSSͷઃܭ͕ߟ͍͑͢͜ͷΛ͠·͢
Ϗϧυϓϩηε͔Βߟ͑ΔCSSΞϯνύλʔϯ
Ξϯνύλʔϯ1
ίϯϙʔωϯτϕʔεͳͷʹCSSάϩʔόϧ
ͦͦCSSͱ͖߹͏͜ͱΛܾҙͨ͠ݩڟݪҼͷҰͭ
• ϑϩϯτΤϯυ։ൃίϯϙʔωϯτϕʔε͕ओྲྀ• ࠶ར༻• είʔϓׂίϯϙʔωϯτϕʔε։ൃ
ͦΜͳதɺCSS͚ͩάϩʔόϧάϩʔόϧίϯϙʔωϯτͱ͔ಠࣗͷCSSͱ͔
άϩʔόϧίϯϙʔωϯτͱ͔ಠࣗͷCSSͱ͔ͦΜͳதɺCSS͚ͩάϩʔόϧ͜ͷґଘόϯυϥʔ͔Βݟ͑ͳ͍
όϯυϥʔʹΑΔޮతͳcode splitting͕Ͱ͖ͳ͍• ଟ͔Εগͳ͔ΕΘΕ͍ͯͳ͍CSS͕όϯυϧʹࠞೖ͢Δ• ಛʹϖʔδॳظදࣔͰɺ࠷ݶඞཁͳCSS͚ͩΛHTMLʹΠϯϥΠϯͰຒΊࠐΉΑ͏ͳߴԽࢪࡦͷಋೖ͕͘͠ͳΔ• ϖʔδͷද͕ࣔ͘ͳΔ
άϩʔόϧωʔϜεϖʔε• CSSΛ࣮࣭తʹϩʔΧϧείʔϓԽ͢Δٕज़Λ͑ͳ͍• ϑϨʔϜϫʔΫඪ४• CSS Modules• ͦͷଞCSS in JS• ౷తͳCSSͷͭΒΈͱBEMͳͲͷख๏ͰઓΘͳ͚ΕͳΒͳ͍
ϙʔλϏϦςΟ͕Լ͕Δ• ίϯϙʔωϯτΛϓϩδΣΫτ֎Ͱ࠶ར༻͢Δқ্͕͕Δ• ͦͷίϯϙʔωϯτ͕ґଘ͢ΔελΠϧΛ࠶ར༻ઌͰ༻ҙͯ͋͛͠ͳ͚ΕͳΒͳ͍
ղܾࡦ
CSSΛίϯϙʔωϯτʹؚΊΔάϩʔόϧίϯϙʔωϯτX
ϝϦοτ• ίϯϙʔωϯτͱCSSͷґଘ͕ؔ໌֬ʹͳΓɺcode splitting͕ՄೳʹͳΔ• ίϯϙʔωϯτʹดͨ͡ϩʔΧϧͳωʔϜεϖʔε͕͑Δ• ϙʔλϏϦςΟ্͕͢Δ
Ξϯνύλʔϯ2
ίʔυDRYɺग़ྗඇDRY
CSS in JSΛ֮͑ͨͯͷࠒͷࢲώϟοϋʔʂJSͰclassΛ֦ுͰ͖Δʔ̇const basicButton = {textAlign: 'center',cursor: 'pointer',fontWeight: 700,// ...};const redButton = {...basicButton,backgroundColor: 'red'};
Ϗϧυޙͷίʔυͷ͜ͱΛߟ͍͑ͯͳ͔ͬͨ
ग़ྗ͞ΕΔCSS.basic-button {text-align: center;cursor: pointer;font-weight: 700;// ...}.red-button {text-align: center;cursor: pointer;font-weight: 700;background-color: red;// …}
ग़ྗ͞ΕΔCSS.basic-button {text-align: center;cursor: pointer;font-weight: 700;// ...}.red-button {text-align: center;cursor: pointer;font-weight: 700;background-color: red;// …}DRY͡Όͳ͍
ͪͳΈʹstyled componentshttps://www.styled-components.com/docs/basics#extending-styles
ͪͳΈʹstyled componentshttps://www.styled-components.com/docs/basics#extending-stylesʊਓਓਓਓਓਓਓਓਓਓਓʊʼɹDRY͡Όͳ͍ʂʂɹʻʉY^Y^Y^Y^Y^Y^Y^Y^Yʉ
ͻΐͬͱͯ͠ճආࡦ͕͋Δʁstyled componentsৄ͍͠ํڭ͍͑ͯͩ͘͞
ίʔυ͕DRYͰग़ྗ͕DRYͰͳ͍ͱݶΒͳ͍※SASSͷ@extendsɺCSS Modulesͷcomposesग़ྗDRYͰ͢
൚༻తͳελΠϧΛෳͷίϯϙʔωϯτͰ͍ճ͍ͨ࣌͠• ͦͷελΠϧͦͷͷΛίϯϙʔωϯτʹׅΓͩ͠ɺίϯϙʔωϯτ୯ҐͰ͍ճ͢• ίϯϙʔωϯτ୯ҐͰͷ͍ճ͠ͳΒɺಉ͡Α͏ͳclass͕ॏෳͯ͠ग़ྗ͞ΕΔ͜ͱͳ͍-> ΄ͱΜͲελΠϧ͚ͩͷখ͍͞ίϯϙʔωϯτ͕ͨ͘͞ΜͰ͖Δ
෦తʹελΠϧΛม͍͑ͨ࣌• ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δimport { button, red } from './style.css';function Button(props) {return (button,{ [red]: props.isRed })}>{props.children});}
෦తʹελΠϧΛม͍͑ͨ࣌• ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δimport { button, red } from './style.css';function Button(props) {return (button,{ [red]: props.isRed })}>{props.children});}͜͜ʹw ར༻ଆ͔ΒʮதʯΛͤΔΑ͏ʹ͢Δw 8FC$PNQPOFOUT 7VFKTͳΒTMPUw "OHVMBSͳΒOHDPOUFOU
• ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δimport { button, red } from './style.css';function Button(props) {return (button,{ [red]: props.isRed })}>{props.text});}͜ΕΑ͘ͳ͍෦తʹελΠϧΛม͍͑ͨ࣌
ར༻ଆ͔Βݟͨ߹// ྑ͍ྫ: ॊೈClick Me!Click Me!Click Me!// ѱ͍ྫ: ॊೈͰͳ͍// ଟ༷ͳཁ݅ʹରԠ͠Α͏ͱ͢Δͱɺ// ίϯϙʔωϯτͷ࣮͕ͲΜͲΜෳࡶʹ͜ΕΞϯνύλʔϯ˞$44ࣗମͷͷͰͳ͍͕
ͭ·Γ
ίϯϙʔωϯτϕʔεΛపఈ͢Δ-> ͍͍ίʔυ͕Ϗϧυ͞ΕΔ• CSSΛίϯϙʔωϯτʹؚΊΔ• ελΠϧͷ࠶ར༻ͷ୯ҐΛίϯϙʔωϯτʹ͢Δ• slotΛͬͯॊೈੑΛ֬อ͢Δ
ॳΊෆ҆ͩͬͨ• ओͳݒ೦• ίϯϙʔωϯτ୯ҐͰͷελΠϧͷ͍ճ͠Ͱཻ͕ߥ͗ͯ͢ɺ݁ہclass୯Ґͷ͍ճ͠ͷັྗʹ߅͑ͳ͍ͷͰʁ-> ࠓͷͱ͜Ζᐜ༕
Atomic Design?
͏·Έ͕Α͔͍ͬͯ͘ͳ͍• ͏·͍ͷ͔͠Εͳ͍• ͜ͷઌߦ͖٧·ͬͨΒऔΓೖΕΔ͔• Atoms, Molecules, Organismsͷ͚͕͍۠͠ͱ͍͏ΛΑ͘ฉ͘-> ࠓͷΓํɺϏϧυ݁Ռͱ͍͏࣮རϕʔεͷઃܭͰ࣮֬ʹ͏·͘ɺ͔ͭͦͷ؍Ͱઃܭʹ໎͏͜ͱ͕ࠓͷͱ͜Ζ͋·Γͳ͍
Thank you!
kimamula
colopl
egmc
defaultcf
linedevth
moriyuya
autifyhq
shimacos
andpad
riru
konifar
miyashino
pistatium
ufuk
caitiem20
danielanewman
rocio
erikaheidi
samanthasiow
chriscoyier
sstephenson
dotmariusz
jonrohan
moore
hannesfritz