Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@amagitakayosi

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

CSS in JS ΍ͬͯ·͔͢ʁ

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

CSS in JS • ίϯϙʔωϯτͷελΠϧΛCSSͰ͸ͳ͘
 JSͷΦϒδΣΫτͱͯ͠هड़͢Δ • είʔϓΛ෼཭Ͱ͖Δʂ • ܧঝͰ͖Δʂ (Object.assignͳͲ)

Slide 7

Slide 7 text

ओͳCSS in JSϥΠϒϥϦ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

FormidableLabs/radium • Reactͷhocͱ࣮ͯ͠૷ • JSΦϒδΣΫτΛstyleଐੑʹಥͬࠐΉ • renderϝιουΛΦʔόʔϥΠυͯ͠
 ྑ͍ײ͡ʹ΍ͬͯ͘ΕΔ

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

FormidableLabs/radium

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

AphroditeͷࠔΓͲ͜Ζ • σϑΥϧτͰ !important ͕෇͘ • ελΠϧΛωετͰ͖ͳ͍
 ( .foo .bar {} ͱ͔ ) • globalͳελΠϧΛఆٛͰ͖ͳ͍

Slide 17

Slide 17 text

css-modules/css-modules • Webpackͷcss-loaderΛ࢖ͬͯ
 CSSϑΝΠϧΛJSʹ௚઀ import ͢Δ • ैདྷͲ͓Γͷํ๏Ͱ
 CSS΍SCSSͳͲΛهड़Ͱ͖Δ

Slide 18

Slide 18 text

+

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

↓

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

zeit/styled-jsx • ͦΜͳ

Slide 24

Slide 24 text

styled-components

Slide 25

Slide 25 text

styled-components • ελΠϧΛ౰ͯͨίϯϙʔωϯτΛ࡞Γɺ
 ૊Έ߹ΘͤͯϨΠΞ΢τ͢Δɺͱ͍͏ߟ͑ํ • Tagged Template Literal಺ʹ
 CSSจࣈྻΛͦͷ··ॻ͚Δʂ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

CSSจࣈྻΛͦͷ··ॻ͚Δ • Tagged Template Literal಺ʹ
 CSSจࣈྻΛͦͷ··ॻ͘ • ‘:hover' : { fontSize: ‘1.6em’ } ͱ͔
 ॻ͔ͣʹࡁΉ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

React NativeରԠ • ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͰ
 React NativeͷίϯϙʔωϯτΛ࢖͑Δ • React Nativeͷstyle͸CSSͱͪΐͬͱҧ͏͚Ͳ
 ྑ͍ײ͡ʹॻ͖׵͑ͯ͘ΕΔ

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Atomͷlanguage-babel • styled-componentsʹσϑΥϧτͰରԠ • ଞͷCSS in JSϥΠϒϥϦʹ΋ରԠͰ͖Δʁ
 ʢCSSϒϩοΫ൑ఆ͢Δਖ਼نදݱΛࣗ෼ͰఆٛͰ͖Δʣ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

࣮ࡍʹ࢖ͬͯΈͨײ૝

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

styled-components ϑΝϛϦʔ

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

css-to-react-native • CSSΛReactNativeͷstyleʹ౉ͤΔܗʹ
 ม׵ͯ͘͠ΕΔ • styled-componentsͷதͰ࢖ΘΕͯΔ

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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