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
820
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
130
How to hack VS Code: evil ways (Japanese)
fand
5
3.6k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
540
GLSL PostEffect in TouchDesigner
fand
2
2k
VEDA GLSL Livecoding workshop
fand
2
5.3k
PWA 方法 無料 今すぐ
fand
3
1.5k
Have you ever heard GPUs cry?
fand
2
3.8k
Real World GLSL
fand
0
280
APIs for VJ-ing
fand
1
7k
Other Decks in Technology
See All in Technology
様々なファイルシステム
sat
PRO
0
260
オブザーバビリティが育むシステム理解と好奇心
maruloop
2
1.3k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
14
82k
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
480
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
180
事業開発におけるDify活用事例
kentarofujii
5
1.5k
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
0
370
SOTA競争から人間を超える画像認識へ
shinya7y
0
570
serverless team topology
_kensh
3
240
入院医療費算定業務をAIで支援する:包括医療費支払い制度とDPCコーディング (公開版)
hagino3000
0
110
AI機能プロジェクト炎上の 3つのしくじりと学び
nakawai
0
120
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
A better future with KSS
kneath
239
18k
RailsConf 2023
tenderlove
30
1.3k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Designing for humans not robots
tammielis
254
26k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
For a Future-Friendly Web
brad_frost
180
10k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
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 ΨϯΨϯ͍ͬͯ͜͏ͥʂʂ