Style your Components with styled-component!

presented at React.kyoto v0.2.0
https://react-kyoto.connpass.com/event/61986/

Transcript

1. Style your Co mponents wit h styled-comp onents! ©amagitakayosi
2. @amagitakayosi
3. Έͳ͞Μ CSS Ͳ͏ͯ͠·͔͢ʁ
4. CSS in JS ΍ͬͯ·͔͢ʁ
6. CSS in JS • ίϯϙʔωϯτͷελΠϧΛCSSͰ͸ͳ͘
 JSͷΦϒδΣΫτͱͯ͠هड़͢Δ • είʔϓΛ෼཭Ͱ͖Δʂ • ܧঝͰ͖Δʂ (Object.assignͳͲ)
7. ओͳCSS in JSϥΠϒϥϦ
8. ओͳCSS in JSϥΠϒϥϦ • Radium • Aphrodite • CSS Modules
9. FormidableLabs/radium • Reactͷhocͱ࣮ͯ͠૷ • JSΦϒδΣΫτΛstyleଐੑʹಥͬࠐΉ • renderϝιουΛΦʔόʔϥΠυͯ͠
 ྑ͍ײ͡ʹ΍ͬͯ͘ΕΔ
11. FormidableLabs/radium
12. radiumͷࠔΓͲ͜Ζ • ٙࣅཁૉ࢖͑ͳ͍ (:beforeͱ͔) • keyframeΞχϝʔγϣϯ͕ͪΐͬͱେม • :hover ʹελΠϧ͕͍ͭͯͨΒ
 onMouseOverͰٖࣅతʹ࣮ݱͯͯ͠େม
13. Khan/aphrodite • ΦϒδΣΫτΛ౉͢ͱɺ<style>ͱରԠ͢Δ
 ҰҙͳΫϥε໊Λੜ੒ͯ͘͠ΕΔ • ٙࣅཁૉʹ΋ରԠ
16. AphroditeͷࠔΓͲ͜Ζ • σϑΥϧτͰ !important ͕෇͘ • ελΠϧΛωετͰ͖ͳ͍
 ( .foo .bar {} ͱ͔ ) • globalͳελΠϧΛఆٛͰ͖ͳ͍
17. css-modules/css-modules • Webpackͷcss-loaderΛ࢖ͬͯ
 CSSϑΝΠϧΛJSʹ௚઀ import ͢Δ • ैདྷͲ͓Γͷํ๏Ͱ
 CSS΍SCSSͳͲΛهड़Ͱ͖Δ
18. +
19. CSS ModulesͷࠔΓͲ͜Ζ • ׬શʹWebpackґଘ……
20. zeit/styled-jsx • babelͷϓϥάΠϯͱͯ͠ಈ࡞͢Δ • <style jsx> λά಺ʹελΠϧΛهड़͢Δ
21. ↓
22. styled-jsxͷࠔΓͲ͜Ζ • ʢݸਓతʹ͸ʣಡΈͮΒ͍…… • ͲͷཁૉʹͲͷελΠϧ͕౰ͨΔͷɺͱ͔ • media queryରԠ͕ඍົ
23. zeit/styled-jsx • ͦΜͳ
24. styled-components
25. styled-components • ελΠϧΛ౰ͯͨίϯϙʔωϯτΛ࡞Γɺ
 ૊Έ߹ΘͤͯϨΠΞ΢τ͢Δɺͱ͍͏ߟ͑ํ • Tagged Template Literal಺ʹ
 CSSจࣈྻΛͦͷ··ॻ͚Δʂ
26. styled-componentsͷ͕͜͜خ͍͠ • CSSจࣈྻΛͦͷ··ॻ͚Δʂ • ؆୯ʹελΠϧΛܧঝͰ͖Δʂ • propsͰελΠϧΛมߋͰ͖Δʂ • React NativeରԠʂ
27. CSSจࣈྻΛͦͷ··ॻ͚Δ • Tagged Template Literal಺ʹ
 CSSจࣈྻΛͦͷ··ॻ͘ • ‘:hover' : { fontSize: ‘1.6em’ } ͱ͔
 ॻ͔ͣʹࡁΉ
28. ؆୯ʹελΠϧΛܧঝͰ͖Δ
29. propsͰελΠϧΛมߋͰ͖Δ • ςʔϚมߋΈ͍ͨͳࣄ΋Ͱ͖ͦ͏
30. React NativeରԠ • ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͰ
 React NativeͷίϯϙʔωϯτΛ࢖͑Δ • React Nativeͷstyle͸CSSͱͪΐͬͱҧ͏͚Ͳ
 ྑ͍ײ͡ʹॻ͖׵͑ͯ͘ΕΔ
32. γϯλοΫεϋΠϥΠτ Ͳ͏͢Δʁ
33. γϯλοΫεϋΠϥΠτͲ͏͢Δʁ • Atom: language-babel • VSCode: vscode-styled-components • WebStorm: { /*language=CSS*/ }
34. Atomͷlanguage-babel • styled-componentsʹσϑΥϧτͰରԠ • ଞͷCSS in JSϥΠϒϥϦʹ΋ରԠͰ͖Δʁ
 ʢCSSϒϩοΫ൑ఆ͢Δਖ਼نදݱΛࣗ෼ͰఆٛͰ͖Δʣ
35. TypeScriptͩͱ……ʁ • atom-typescript ͱ language-babel ͸
 ซ༻Ͱ͖ͳ͍ͬΆ͍ • vscode-styled-components ͸ී௨ʹ࢖͑Δ • ૉ௚ʹVSCode࢖͏͔……ʢ◞‸◟ʣ • ͦΕͱ΋ TS΍Ίͯ flow ࢖͏͔
36. ࣮ࡍʹ࢖ͬͯΈͨײ૝
38. ίϯϙʔωϯτͷཻ౓͕ࣗવͱখ͘͞ͳΔ • ελΠϧΛ౰ͯͨࢠίϯϙʔωϯτΛ
 ͨ͘͞Μఆٛ͢Δ͜ͱʹͳΔ • ଟ͘ͳΔͱࣗવͱϑΝΠϧ෼ׂͨ͘͠ͳΔ • ίϯϙʔωϯτ୯ҐͰߟ͑Δ͜ͱʹͳΔ • มͳந৅ԽΛ͠ʹ͍͘
39. ΋ͪΖΜ
    ࡶʹॻ͘͜ͱ΋ग़དྷΔ
40. $44͕ۤखͳਓʹͦ͜
    Φεεϝʂ
41. styled-components ϑΝϛϦʔ
42. ؔ࿈ϥΠϒϥϦ͕͍ͭ͘΋͋Δ • polished • css-to-react-native • elm-styled
43. polished✨ • ศརؔ਺ηοτ • Sass࣌୅Ͱ͍͏compassΈ͍ͨͳ΋Μ
44. css-to-react-native • CSSΛReactNativeͷstyleʹ౉ͤΔܗʹ
 ม׵ͯ͘͠ΕΔ • styled-componentsͷதͰ࢖ΘΕͯΔ
45. elm-styled (ະϦϦʔε) • Elm༻ styled-components • ܕͷαϙʔτΛड͚ΒΕΔʂ
46. ͓·͚: ܕ෇͖CSSγϦʔζ • Typestyle • TypeScriptʹΑΔνΣοΫΛ೦಄ʹஔ͍͍ͯΔ • ScalaCSS • ScalaͰελΠϧΛॻ͍ͯCSSΛग़ྗ͢Δ • Scala.js ΍ scalajs-reactͱซ༻͢Δͱ
 Scala͚ͩͰϑϩϯτΤϯυॻ͚Δ
47. ࢀߟ
    4DBMBKT
    
    4DBMB$44Ͱ༡Μͩهࣄ IUUQBNBHJUBLBZPTJIBUFOBCMPHDPNFOUSZ
48. ·ͱΊ: ͜ΜͳਓʹΦεεϝ • CSS͕ۤखͳਓ • React NativeϢʔβʔ • աڈʹ CSS in JS ࢼ͚ͨ͠Ͳ
 ੑʹ߹Θͳ͔ͬͨਓ
49. React΋ReactNative΋ ΨϯΨϯ΍͍ͬͯ͜͏ͥʂʂ ׬