Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Style your Components with styled-component!

Style your Components with styled-component!

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

fand/amagitakayosi

August 01, 2017
Tweet

More Decks by fand/amagitakayosi

Other Decks in Technology

Transcript

  1. Style your Co
    mponents wit
    h styled-comp
    onents!
    ©amagitakayosi

    View Slide

  2. @amagitakayosi

    View Slide

  3. Έͳ͞Μ
    CSS
    Ͳ͏ͯ͠·͔͢ʁ

    View Slide

  4. CSS in JS
    ΍ͬͯ·͔͢ʁ

    View Slide

  5. View Slide

  6. CSS in JS
    • ίϯϙʔωϯτͷελΠϧΛCSSͰ͸ͳ͘

    JSͷΦϒδΣΫτͱͯ͠هड़͢Δ
    • είʔϓΛ෼཭Ͱ͖Δʂ
    • ܧঝͰ͖Δʂ (Object.assignͳͲ)

    View Slide

  7. ओͳCSS in JSϥΠϒϥϦ

    View Slide

  8. ओͳCSS in JSϥΠϒϥϦ
    • Radium
    • Aphrodite
    • CSS Modules

    View Slide

  9. FormidableLabs/radium
    • Reactͷhocͱ࣮ͯ͠૷
    • JSΦϒδΣΫτΛstyleଐੑʹಥͬࠐΉ
    • renderϝιουΛΦʔόʔϥΠυͯ͠

    ྑ͍ײ͡ʹ΍ͬͯ͘ΕΔ

    View Slide

  10. View Slide

  11. FormidableLabs/radium

    View Slide

  12. radiumͷࠔΓͲ͜Ζ
    • ٙࣅཁૉ࢖͑ͳ͍ (:beforeͱ͔)
    • keyframeΞχϝʔγϣϯ͕ͪΐͬͱେม
    • :hover ʹελΠϧ͕͍ͭͯͨΒ

    onMouseOverͰٖࣅతʹ࣮ݱͯͯ͠େม

    View Slide

  13. Khan/aphrodite
    • ΦϒδΣΫτΛ౉͢ͱɺͱରԠ͢Δ
<br/>ҰҙͳΫϥε໊Λੜ੒ͯ͘͠ΕΔ<br/>• ٙࣅཁૉʹ΋ରԠ<br/>

    View Slide

  14. View Slide

  15. View Slide

  16. AphroditeͷࠔΓͲ͜Ζ
    • σϑΥϧτͰ !important ͕෇͘
    • ελΠϧΛωετͰ͖ͳ͍

    ( .foo .bar {} ͱ͔ )
    • globalͳελΠϧΛఆٛͰ͖ͳ͍

    View Slide

  17. css-modules/css-modules
    • Webpackͷcss-loaderΛ࢖ͬͯ

    CSSϑΝΠϧΛJSʹ௚઀ import ͢Δ
    • ैདྷͲ͓Γͷํ๏Ͱ

    CSS΍SCSSͳͲΛهड़Ͱ͖Δ

    View Slide

  18. +

    View Slide

  19. CSS ModulesͷࠔΓͲ͜Ζ
    • ׬શʹWebpackґଘ……

    View Slide

  20. zeit/styled-jsx
    • babelͷϓϥάΠϯͱͯ͠ಈ࡞͢Δ
    • λά಺ʹελΠϧΛهड़͢Δ<br/>

    View Slide


  21. View Slide

  22. styled-jsxͷࠔΓͲ͜Ζ
    • ʢݸਓతʹ͸ʣಡΈͮΒ͍……
    • ͲͷཁૉʹͲͷελΠϧ͕౰ͨΔͷɺͱ͔
    • media queryରԠ͕ඍົ

    View Slide

  23. zeit/styled-jsx
    • ͦΜͳ

    View Slide

  24. styled-components

    View Slide

  25. styled-components
    • ελΠϧΛ౰ͯͨίϯϙʔωϯτΛ࡞Γɺ

    ૊Έ߹ΘͤͯϨΠΞ΢τ͢Δɺͱ͍͏ߟ͑ํ
    • Tagged Template Literal಺ʹ

    CSSจࣈྻΛͦͷ··ॻ͚Δʂ

    View Slide

  26. styled-componentsͷ͕͜͜خ͍͠
    • CSSจࣈྻΛͦͷ··ॻ͚Δʂ
    • ؆୯ʹελΠϧΛܧঝͰ͖Δʂ
    • propsͰελΠϧΛมߋͰ͖Δʂ
    • React NativeରԠʂ

    View Slide

  27. CSSจࣈྻΛͦͷ··ॻ͚Δ
    • Tagged Template Literal಺ʹ

    CSSจࣈྻΛͦͷ··ॻ͘
    • ‘:hover' : { fontSize: ‘1.6em’ } ͱ͔

    ॻ͔ͣʹࡁΉ

    View Slide

  28. ؆୯ʹελΠϧΛܧঝͰ͖Δ

    View Slide

  29. propsͰελΠϧΛมߋͰ͖Δ
    • ςʔϚมߋΈ͍ͨͳࣄ΋Ͱ͖ͦ͏

    View Slide

  30. React NativeରԠ
    • ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͰ

    React NativeͷίϯϙʔωϯτΛ࢖͑Δ
    • React Nativeͷstyle͸CSSͱͪΐͬͱҧ͏͚Ͳ

    ྑ͍ײ͡ʹॻ͖׵͑ͯ͘ΕΔ

    View Slide

  31. View Slide

  32. γϯλοΫεϋΠϥΠτ
    Ͳ͏͢Δʁ

    View Slide

  33. γϯλοΫεϋΠϥΠτͲ͏͢Δʁ
    • Atom: language-babel
    • VSCode: vscode-styled-components
    • WebStorm: { /*language=CSS*/ }

    View Slide

  34. Atomͷlanguage-babel
    • styled-componentsʹσϑΥϧτͰରԠ
    • ଞͷCSS in JSϥΠϒϥϦʹ΋ରԠͰ͖Δʁ

    ʢCSSϒϩοΫ൑ఆ͢Δਖ਼نදݱΛࣗ෼ͰఆٛͰ͖Δʣ

    View Slide

  35. TypeScriptͩͱ……ʁ
    • atom-typescript ͱ language-babel ͸

    ซ༻Ͱ͖ͳ͍ͬΆ͍
    • vscode-styled-components ͸ී௨ʹ࢖͑Δ
    • ૉ௚ʹVSCode࢖͏͔……ʢ◞‸◟ʣ
    • ͦΕͱ΋ TS΍Ίͯ flow ࢖͏͔

    View Slide

  36. ࣮ࡍʹ࢖ͬͯΈͨײ૝

    View Slide

  37. View Slide

  38. ίϯϙʔωϯτͷཻ౓͕ࣗવͱখ͘͞ͳΔ
    • ελΠϧΛ౰ͯͨࢠίϯϙʔωϯτΛ

    ͨ͘͞Μఆٛ͢Δ͜ͱʹͳΔ
    • ଟ͘ͳΔͱࣗવͱϑΝΠϧ෼ׂͨ͘͠ͳΔ
    • ίϯϙʔωϯτ୯ҐͰߟ͑Δ͜ͱʹͳΔ
    • มͳந৅ԽΛ͠ʹ͍͘

    View Slide

  39. ΋ͪΖΜ
    ࡶʹॻ͘͜ͱ΋ग़དྷΔ

    View Slide

  40. $44͕ۤखͳਓʹͦ͜
    Φεεϝʂ

    View Slide

  41. styled-components
    ϑΝϛϦʔ

    View Slide

  42. ؔ࿈ϥΠϒϥϦ͕͍ͭ͘΋͋Δ
    • polished
    • css-to-react-native
    • elm-styled

    View Slide

  43. polished✨
    • ศརؔ਺ηοτ
    • Sass࣌୅Ͱ͍͏compassΈ͍ͨͳ΋Μ

    View Slide

  44. css-to-react-native
    • CSSΛReactNativeͷstyleʹ౉ͤΔܗʹ

    ม׵ͯ͘͠ΕΔ
    • styled-componentsͷதͰ࢖ΘΕͯΔ

    View Slide

  45. elm-styled (ະϦϦʔε)
    • Elm༻ styled-components
    • ܕͷαϙʔτΛड͚ΒΕΔʂ

    View Slide

  46. ͓·͚: ܕ෇͖CSSγϦʔζ
    • Typestyle
    • TypeScriptʹΑΔνΣοΫΛ೦಄ʹஔ͍͍ͯΔ
    • ScalaCSS
    • ScalaͰελΠϧΛॻ͍ͯCSSΛग़ྗ͢Δ
    • Scala.js ΍ scalajs-reactͱซ༻͢Δͱ

    Scala͚ͩͰϑϩϯτΤϯυॻ͚Δ

    View Slide

  47. ࢀߟ4DBMBKT4DBMB$44Ͱ༡Μͩهࣄ
    IUUQBNBHJUBLBZPTJIBUFOBCMPHDPNFOUSZ

    View Slide

  48. ·ͱΊ: ͜ΜͳਓʹΦεεϝ
    • CSS͕ۤखͳਓ
    • React NativeϢʔβʔ
    • աڈʹ CSS in JS ࢼ͚ͨ͠Ͳ

    ੑʹ߹Θͳ͔ͬͨਓ

    View Slide

  49. React΋ReactNative΋
    ΨϯΨϯ΍͍ͬͯ͜͏ͥʂʂ
    ׬

    View Slide