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
810
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
120
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
6.9k
Other Decks in Technology
See All in Technology
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
140
VCC 2025 Write-up
bata_24
0
180
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
23
17k
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
170
extension 現場で使えるXcodeショートカット一覧
ktombow
0
210
いまさら聞けない ABテスト入門
skmr2348
1
200
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
130
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
900
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
140
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.4k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Writing Fast Ruby
sferik
629
62k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Rails Girls Zürich Keynote
gr2m
95
14k
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 ΨϯΨϯ͍ͬͯ͜͏ͥʂʂ