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
   

   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