presented at React.kyoto v0.2.0 https://react-kyoto.connpass.com/event/61986/
Style your Components with styled-components!©amagitakayosi
View Slide
@amagitakayosi
Έͳ͞ΜCSSͲ͏ͯ͠·͔͢ʁ
CSS in JSͬͯ·͔͢ʁ
CSS in JS• ίϯϙʔωϯτͷελΠϧΛCSSͰͳ͘ JSͷΦϒδΣΫτͱͯ͠هड़͢Δ• είʔϓΛͰ͖Δʂ• ܧঝͰ͖Δʂ (Object.assignͳͲ)
ओͳCSS in JSϥΠϒϥϦ
ओͳCSS in JSϥΠϒϥϦ• Radium• Aphrodite• CSS Modules
FormidableLabs/radium• Reactͷhocͱ࣮ͯ͠• JSΦϒδΣΫτΛstyleଐੑʹಥͬࠐΉ• renderϝιουΛΦʔόʔϥΠυͯ͠ ྑ͍ײ͡ʹͬͯ͘ΕΔ
FormidableLabs/radium
radiumͷࠔΓͲ͜Ζ• ٙࣅཁૉ͑ͳ͍ (:beforeͱ͔)• keyframeΞχϝʔγϣϯ͕ͪΐͬͱେม• :hover ʹελΠϧ͕͍ͭͯͨΒ onMouseOverͰٖࣅతʹ࣮ݱͯͯ͠େม
Khan/aphrodite• ΦϒδΣΫτΛ͢ͱɺͱରԠ͢Δ <br/>ҰҙͳΫϥε໊Λੜͯ͘͠ΕΔ<br/>• ٙࣅཁૉʹରԠ<br/>
AphroditeͷࠔΓͲ͜Ζ• σϑΥϧτͰ !important ͕͘• ελΠϧΛωετͰ͖ͳ͍ ( .foo .bar {} ͱ͔ )• globalͳελΠϧΛఆٛͰ͖ͳ͍
css-modules/css-modules• Webpackͷcss-loaderΛͬͯ CSSϑΝΠϧΛJSʹ import ͢Δ• ैདྷͲ͓Γͷํ๏Ͱ CSSSCSSͳͲΛهड़Ͱ͖Δ
+
CSS ModulesͷࠔΓͲ͜Ζ• શʹWebpackґଘ……
zeit/styled-jsx• babelͷϓϥάΠϯͱͯ͠ಈ࡞͢Δ• λάʹελΠϧΛهड़͢Δ<br/>
↓
styled-jsxͷࠔΓͲ͜Ζ• ʢݸਓతʹʣಡΈͮΒ͍……• ͲͷཁૉʹͲͷελΠϧ͕ͨΔͷɺͱ͔• media queryରԠ͕ඍົ
zeit/styled-jsx• ͦΜͳ
styled-components
styled-components• ελΠϧΛͯͨίϯϙʔωϯτΛ࡞Γɺ Έ߹ΘͤͯϨΠΞτ͢Δɺͱ͍͏ߟ͑ํ• Tagged Template Literalʹ CSSจࣈྻΛͦͷ··ॻ͚Δʂ
styled-componentsͷ͕͜͜خ͍͠• CSSจࣈྻΛͦͷ··ॻ͚Δʂ• ؆୯ʹελΠϧΛܧঝͰ͖Δʂ• propsͰελΠϧΛมߋͰ͖Δʂ• React NativeରԠʂ
CSSจࣈྻΛͦͷ··ॻ͚Δ• Tagged Template Literalʹ CSSจࣈྻΛͦͷ··ॻ͘• ‘:hover' : { fontSize: ‘1.6em’ } ͱ͔ ॻ͔ͣʹࡁΉ
؆୯ʹελΠϧΛܧঝͰ͖Δ
propsͰελΠϧΛมߋͰ͖Δ• ςʔϚมߋΈ͍ͨͳࣄͰ͖ͦ͏
React NativeରԠ• ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͰ React NativeͷίϯϙʔωϯτΛ͑Δ• React NativeͷstyleCSSͱͪΐͬͱҧ͏͚Ͳ ྑ͍ײ͡ʹॻ͖͑ͯ͘ΕΔ
γϯλοΫεϋΠϥΠτͲ͏͢Δʁ
γϯλοΫεϋΠϥΠτͲ͏͢Δʁ• Atom: language-babel• VSCode: vscode-styled-components• WebStorm: { /*language=CSS*/ }
Atomͷlanguage-babel• styled-componentsʹσϑΥϧτͰରԠ• ଞͷCSS in JSϥΠϒϥϦʹରԠͰ͖Δʁ ʢCSSϒϩοΫఆ͢Δਖ਼نදݱΛࣗͰఆٛͰ͖Δʣ
TypeScriptͩͱ……ʁ• atom-typescript ͱ language-babel ซ༻Ͱ͖ͳ͍ͬΆ͍• vscode-styled-components ී௨ʹ͑Δ• ૉʹVSCode͏͔……ʢ◞‸◟ʣ• ͦΕͱ TSΊͯ flow ͏͔
࣮ࡍʹͬͯΈͨײ
ίϯϙʔωϯτͷཻ͕ࣗવͱখ͘͞ͳΔ• ελΠϧΛͯͨࢠίϯϙʔωϯτΛ ͨ͘͞Μఆٛ͢Δ͜ͱʹͳΔ• ଟ͘ͳΔͱࣗવͱϑΝΠϧׂͨ͘͠ͳΔ• ίϯϙʔωϯτ୯ҐͰߟ͑Δ͜ͱʹͳΔ• มͳநԽΛ͠ʹ͍͘
ͪΖΜࡶʹॻ͘͜ͱग़དྷΔ
$44͕ۤखͳਓʹͦ͜Φεεϝʂ
styled-componentsϑΝϛϦʔ
ؔ࿈ϥΠϒϥϦ͕͍ͭ͋͘Δ• polished• css-to-react-native• elm-styled
polished✨• ศརؔηοτ• Sass࣌Ͱ͍͏compassΈ͍ͨͳΜ
css-to-react-native• CSSΛReactNativeͷstyleʹͤΔܗʹ มͯ͘͠ΕΔ• styled-componentsͷதͰΘΕͯΔ
elm-styled (ະϦϦʔε)• Elm༻ styled-components• ܕͷαϙʔτΛड͚ΒΕΔʂ
͓·͚: ܕ͖CSSγϦʔζ• Typestyle• TypeScriptʹΑΔνΣοΫΛ೦಄ʹஔ͍͍ͯΔ• ScalaCSS• ScalaͰελΠϧΛॻ͍ͯCSSΛग़ྗ͢Δ• Scala.js scalajs-reactͱซ༻͢Δͱ Scala͚ͩͰϑϩϯτΤϯυॻ͚Δ
ࢀߟ4DBMBKT4DBMB$44Ͱ༡ΜͩهࣄIUUQBNBHJUBLBZPTJIBUFOBCMPHDPNFOUSZ
·ͱΊ: ͜ΜͳਓʹΦεεϝ• CSS͕ۤखͳਓ• React NativeϢʔβʔ• աڈʹ CSS in JS ࢼ͚ͨ͠Ͳ ੑʹ߹Θͳ͔ͬͨਓ
ReactReactNativeΨϯΨϯ͍ͬͯ͜͏ͥʂʂ