Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Style your Components with styled-component!
Search
Amagi
August 01, 2017
Technology
1
760
Style your Components with styled-component!
presented at React.kyoto v0.2.0
https://react-kyoto.connpass.com/event/61986/
Amagi
August 01, 2017
Tweet
Share
More Decks by Amagi
See All by Amagi
Enchant your website with VFX-JS
fand
0
86
How to hack VS Code: evil ways (Japanese)
fand
5
3.5k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
510
GLSL PostEffect in TouchDesigner
fand
2
2k
VEDA GLSL Livecoding workshop
fand
2
5.2k
PWA 方法 無料 今すぐ
fand
3
1.5k
Have you ever heard GPUs cry?
fand
2
3.8k
Real World GLSL
fand
0
260
APIs for VJ-ing
fand
1
6.8k
Other Decks in Technology
See All in Technology
近年の PyCon 情勢から見た PyCon APAC のまとめ
terapyon
0
280
「ラベルにとらわれない」エンジニアでいること/Be an engineer beyond labels
kaonavi
0
240
AI Agentを「期待通り」に動かすために:設計アプローチの模索と現在地
kworkdev
PRO
2
320
Classmethod AI Talks(CATs) #21 司会進行スライド(2025.04.17) / classmethod-ai-talks-aka-cats_moderator-slides_vol21_2025-04-17
shinyaa31
0
230
いつも初心者向けの記事に助けられているので得意分野では初心者向けの記事を書きます
toru_kubota
2
250
”知のインストール”戦略:テキスト資産をAIの文脈理解に活かす
kworkdev
PRO
9
4.1k
Automatically generating types by running tests
sinsoku
1
250
データベースで見る『家族アルバム みてね』の変遷 / The Evolution of Family Album Through the Lens of Databases
kohbis
4
1.1k
はてなの開発20年史と DevOpsの歩み / DevOpsDays Tokyo 2025 Keynote
daiksy
5
1.3k
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming
tomzoh
0
190
MCP Documentation Server @AI Coding Meetup #1
yyoshiki41
2
2.5k
はじめてのSDET / My first challenge as a SDET
bun913
1
180
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
How STYLIGHT went responsive
nonsquared
99
5.5k
Optimising Largest Contentful Paint
csswizardry
36
3.2k
Embracing the Ebb and Flow
colly
85
4.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Thoughts on Productivity
jonyablonski
69
4.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
Rails Girls Zürich Keynote
gr2m
94
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Transcript
Style your Co mponents wit h styled-comp onents! ©amagitakayosi
@amagitakayosi
Έͳ͞Μ CSS Ͳ͏ͯ͠·͔͢ʁ
CSS in JS ͬͯ·͔͢ʁ
None
CSS in JS • ίϯϙʔωϯτͷελΠϧΛCSSͰͳ͘ JSͷΦϒδΣΫτͱͯ͠هड़͢Δ • είʔϓΛͰ͖Δʂ • ܧঝͰ͖Δʂ
(Object.assignͳͲ)
ओͳCSS in JSϥΠϒϥϦ
ओͳCSS in JSϥΠϒϥϦ • Radium • Aphrodite • CSS Modules
FormidableLabs/radium • Reactͷhocͱ࣮ͯ͠ • JSΦϒδΣΫτΛstyleଐੑʹಥͬࠐΉ • renderϝιουΛΦʔόʔϥΠυͯ͠ ྑ͍ײ͡ʹͬͯ͘ΕΔ
None
FormidableLabs/radium
radiumͷࠔΓͲ͜Ζ • ٙࣅཁૉ͑ͳ͍ (:beforeͱ͔) • keyframeΞχϝʔγϣϯ͕ͪΐͬͱେม • :hover ʹελΠϧ͕͍ͭͯͨΒ onMouseOverͰٖࣅతʹ࣮ݱͯͯ͠େม
Khan/aphrodite • ΦϒδΣΫτΛ͢ͱɺ<style>ͱରԠ͢Δ ҰҙͳΫϥε໊Λੜͯ͘͠ΕΔ • ٙࣅཁૉʹରԠ
None
None
AphroditeͷࠔΓͲ͜Ζ • σϑΥϧτͰ !important ͕͘ • ελΠϧΛωετͰ͖ͳ͍ ( .foo .bar
{} ͱ͔ ) • globalͳελΠϧΛఆٛͰ͖ͳ͍
css-modules/css-modules • Webpackͷcss-loaderΛͬͯ CSSϑΝΠϧΛJSʹ import ͢Δ • ैདྷͲ͓Γͷํ๏Ͱ CSSSCSSͳͲΛهड़Ͱ͖Δ
+
CSS ModulesͷࠔΓͲ͜Ζ • શʹWebpackґଘ……
zeit/styled-jsx • babelͷϓϥάΠϯͱͯ͠ಈ࡞͢Δ • <style jsx> λάʹελΠϧΛهड़͢Δ
↓
styled-jsxͷࠔΓͲ͜Ζ • ʢݸਓతʹʣಡΈͮΒ͍…… • ͲͷཁૉʹͲͷελΠϧ͕ͨΔͷɺͱ͔ • media queryରԠ͕ඍົ
zeit/styled-jsx • ͦΜͳ
styled-components
styled-components • ελΠϧΛͯͨίϯϙʔωϯτΛ࡞Γɺ Έ߹ΘͤͯϨΠΞτ͢Δɺͱ͍͏ߟ͑ํ • Tagged Template Literalʹ CSSจࣈྻΛͦͷ··ॻ͚Δʂ
styled-componentsͷ͕͜͜خ͍͠ • CSSจࣈྻΛͦͷ··ॻ͚Δʂ • ؆୯ʹελΠϧΛܧঝͰ͖Δʂ • propsͰελΠϧΛมߋͰ͖Δʂ • React NativeରԠʂ
CSSจࣈྻΛͦͷ··ॻ͚Δ • Tagged Template Literalʹ CSSจࣈྻΛͦͷ··ॻ͘ • ‘:hover' : {
fontSize: ‘1.6em’ } ͱ͔ ॻ͔ͣʹࡁΉ
؆୯ʹελΠϧΛܧঝͰ͖Δ
propsͰελΠϧΛมߋͰ͖Δ • ςʔϚมߋΈ͍ͨͳࣄͰ͖ͦ͏
React NativeରԠ • ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͰ React NativeͷίϯϙʔωϯτΛ͑Δ • React NativeͷstyleCSSͱͪΐͬͱҧ͏͚Ͳ ྑ͍ײ͡ʹॻ͖͑ͯ͘ΕΔ
None
γϯλοΫεϋΠϥΠτ Ͳ͏͢Δʁ
γϯλοΫεϋΠϥΠτͲ͏͢Δʁ • Atom: language-babel • VSCode: vscode-styled-components • WebStorm: {
/*language=CSS*/ }
Atomͷlanguage-babel • styled-componentsʹσϑΥϧτͰରԠ • ଞͷCSS in JSϥΠϒϥϦʹରԠͰ͖Δʁ ʢCSSϒϩοΫఆ͢Δਖ਼نදݱΛࣗͰఆٛͰ͖Δʣ
TypeScriptͩͱ……ʁ • atom-typescript ͱ language-babel ซ༻Ͱ͖ͳ͍ͬΆ͍ • vscode-styled-components ී௨ʹ͑Δ
• ૉʹVSCode͏͔……ʢ◞‸◟ʣ • ͦΕͱ TSΊͯ flow ͏͔
࣮ࡍʹͬͯΈͨײ
None
ίϯϙʔωϯτͷཻ͕ࣗવͱখ͘͞ͳΔ • ελΠϧΛͯͨࢠίϯϙʔωϯτΛ ͨ͘͞Μఆٛ͢Δ͜ͱʹͳΔ • ଟ͘ͳΔͱࣗવͱϑΝΠϧׂͨ͘͠ͳΔ • ίϯϙʔωϯτ୯ҐͰߟ͑Δ͜ͱʹͳΔ • มͳநԽΛ͠ʹ͍͘
ͪΖΜ ࡶʹॻ͘͜ͱग़དྷΔ
$44͕ۤखͳਓʹͦ͜ Φεεϝʂ
styled-components ϑΝϛϦʔ
ؔ࿈ϥΠϒϥϦ͕͍ͭ͋͘Δ • polished • css-to-react-native • elm-styled
polished✨ • ศརؔηοτ • Sass࣌Ͱ͍͏compassΈ͍ͨͳΜ
css-to-react-native • CSSΛReactNativeͷstyleʹͤΔܗʹ มͯ͘͠ΕΔ • styled-componentsͷதͰΘΕͯΔ
elm-styled (ະϦϦʔε) • Elm༻ styled-components • ܕͷαϙʔτΛड͚ΒΕΔʂ
͓·͚: ܕ͖CSSγϦʔζ • Typestyle • TypeScriptʹΑΔνΣοΫΛ೦಄ʹஔ͍͍ͯΔ • ScalaCSS • ScalaͰελΠϧΛॻ͍ͯCSSΛग़ྗ͢Δ
• Scala.js scalajs-reactͱซ༻͢Δͱ Scala͚ͩͰϑϩϯτΤϯυॻ͚Δ
ࢀߟ4DBMBKT 4DBMB$44Ͱ༡Μͩهࣄ IUUQBNBHJUBLBZPTJIBUFOBCMPHDPNFOUSZ
·ͱΊ: ͜ΜͳਓʹΦεεϝ • CSS͕ۤखͳਓ • React NativeϢʔβʔ • աڈʹ CSS
in JS ࢼ͚ͨ͠Ͳ ੑʹ߹Θͳ͔ͬͨਓ
ReactReactNative ΨϯΨϯ͍ͬͯ͜͏ͥʂʂ