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
fand/amagitakayosi
August 01, 2017
Technology
1
580
Style your Components with styled-component!
presented at React.kyoto v0.2.0
https://react-kyoto.connpass.com/event/61986/
fand/amagitakayosi
August 01, 2017
Tweet
Share
More Decks by fand/amagitakayosi
See All by fand/amagitakayosi
How to hack VS Code: evil ways (Japanese)
fand
5
3.3k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
450
GLSL PostEffect in TouchDesigner
fand
2
1.9k
VEDA GLSL Livecoding workshop
fand
2
5k
PWA 方法 無料 今すぐ
fand
3
1.4k
Have you ever heard GPUs cry?
fand
2
3.6k
Real World GLSL
fand
0
220
APIs for VJ-ing
fand
1
6.5k
Live coding on Atom
fand
2
2.2k
Other Decks in Technology
See All in Technology
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
120
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
170
ServiceNow Knowledge Learning Rise up
manarobot
0
210
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
JSON攻略法.pdf
miyakemito
8
5.1k
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
540
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
390
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
私が trocco を推す理由
__allllllllez__
1
250
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
320
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
1
370
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
422
63k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Designing Experiences People Love
moore
136
23k
Faster Mobile Websites
deanohume
299
30k
What's new in Ruby 2.0
geeforr
337
31k
Building an army of robots
kneath
300
41k
Being A Developer After 40
akosma
57
580k
Docker and Python
trallard
34
2.7k
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 ΨϯΨϯ͍ͬͯ͜͏ͥʂʂ