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
730
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
76
How to hack VS Code: evil ways (Japanese)
fand
5
3.5k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
500
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.7k
Real World GLSL
fand
0
260
APIs for VJ-ing
fand
1
6.8k
Other Decks in Technology
See All in Technology
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
Building Products in the LLM Era
ymatsuwitter
10
4.4k
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
アジャイル開発とスクラム
araihara
0
160
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
A Philosophy of Restraint
colly
203
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Adopting Sorbet at Scale
ufuk
74
9.2k
RailsConf 2023
tenderlove
29
1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Cult of Friendly URLs
andyhume
78
6.2k
Docker and Python
trallard
44
3.3k
Code Reviewing Like a Champion
maltzj
521
39k
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 ΨϯΨϯ͍ͬͯ͜͏ͥʂʂ