Style your Components with styled-component!

Transcript

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

2. @amagitakayosi

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

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

5. None

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ϝιουΛΦʔόʔϥΠυͯ͠
 ྑ͍ײ͡ʹ΍ͬͯ͘ΕΔ

10. None

11. FormidableLabs/radium

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

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

14. None
15. None

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ͱͪΐͬͱҧ͏͚Ͳ
 ྑ͍ײ͡ʹॻ͖׵͑ͯ͘ΕΔ

31. None

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. ࣮ࡍʹ࢖ͬͯΈͨײ૝

37. None

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΋ ΨϯΨϯ΍͍ͬͯ͜͏ͥʂʂ ׬