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
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
Search
sota ohara
January 24, 2018
Programming
9
5k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
WeAreJavaScripters@15th
https://wajs.connpass.com/event/76238/
sota ohara
January 24, 2018
Tweet
Share
More Decks by sota ohara
See All by sota ohara
Re-Architecture of ReactNative
sottar
0
230
Implement prerendering w/ puppeteer
sottar
1
250
create own CMS from scratch
sottar
2
8.9k
Let’s try to hack AST of JavaScript
sottar
1
1.7k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
18k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.5k
new version of context in React 16.3
sottar
3
1.6k
2ヶ月半でサービスをリリースした話し
sottar
2
2.1k
Redux のディレクトリ構成を考える
sottar
2
14k
Other Decks in Programming
See All in Programming
Open source software: how to live long and go far
gaelvaroquaux
0
620
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
CI改善もDatadogとともに
taumu
0
110
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
『品質』という言葉が嫌いな理由
korimu
0
160
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Being A Developer After 40
akosma
89
590k
Documentation Writing (for coders)
carmenintech
67
4.6k
Statistics for Hackers
jakevdp
797
220k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Become a Pro
speakerdeck
PRO
26
5.1k
4 Signs Your Business is Dying
shpigford
182
22k
Building Applications with DynamoDB
mza
93
6.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Transcript
ϞμϯͳJavaScriptΞϓϦέʔγϣϯͰ ϞμϯʹελΠϦϯά͢Δํ๏ גࣜձࣾϝϧΧϦ ϑϩϯτΤϯυΤϯδχΞ େݪᆴଠ
վΊɻɻ
React ͰϞμϯʹελΠϦϯά͢Δํ๏ גࣜձࣾϝϧΧϦ ϑϩϯτΤϯυΤϯδχΞ େݪᆴଠ
େݪ ᆴଠ / sottar גࣜձࣾϝϧΧϦ ϑϩϯτΤϯυΤϯδχΞ mercari NOW, CSTool sottar_
About me sottar
React Ͱ CSSɺͲ͏ͬͯॻ͍ͯ·͔͢ʁ
ελΠϦϯά͢ΔࡍʹٻΊΔͷ
ελΠϦϯά͢ΔࡍʹٻΊΔͷ - component ͝ͱʹείʔϓΛΓ͍ͨ - ͦͷελΠϧ͕Ͳ͜ͰΘΕ͍ͯΔ͔Γ͍ͨ - CSS ͱ JS
ͰΛڞ༗͍ͨ͠ - ΤσΟλͷγϯλοΫεϋΠϥΠτิػೳ͕͍͍ͨ - ඪ४ͷCSSͱಉ͡γϯλοΫεͰॻ͖͍ͨ - stylelint ͍͍ͨ - ಛఆͷπʔϧΛΘͳͯ͘ JS ͷΤϥʔ͕ు͔Εͳ͍
ελΠϦϯάͷํ๏ - CSS Modules - CSS in JS - ී௨ʹCSSΛॻ͘
ʢBEMͳͲͰʣ
ελΠϦϯάͷํ๏ - CSS Modules - CSS in JS - ී௨ʹCSSΛॻ͘
ʢBEMͳͲͰʣ
CSS in JS (template literal)
CSS in JS ͱ https://github.com/styled-components/styled-components
https://github.com/MicheleBertoli/css-in-js
https://github.com/MicheleBertoli/css-in-js
styled-components
styled-components
ελΠϦϯάʹٻΊΔͷ - component ͝ͱʹείʔϓΛΓ͍ͨ - ͦͷελΠϧ͕Ͳ͜ͰΘΕ͍ͯΔ͔Γ͍ͨ - CSS ͱ JS
ͰΛڞ༗͍ͨ͠ - ΤσΟλͷγϯλοΫεϋΠϥΠτิػೳ͕͍͍ͨ - ඪ४ͷCSSͱಉ͡γϯλοΫεͰॻ͖͍ͨ - stylelint ͍͍ͨ - ಛఆͷπʔϧΛΘͳͯ͘ JS ͷΤϥʔ͕ు͔Εͳ͍
component ͝ͱʹείʔϓΛΓ͍ͨ
component ͝ͱʹείʔϓΛΓ͍ͨ
ͦͷελΠϧ͕Ͳ͜ͰΘΕ͍ͯΔ͔Θ͔Γ͍ͨ
ͦͷελΠϧ͕Ͳ͜ͰΘΕ͍ͯΔ͔Θ͔Γ͍ͨ ʢ = ؾܰʹελΠϧΛফ͍ͨ͠ʣ
ͦͷελΠϧ͕Ͳ͜ͰΘΕ͍ͯΔ͔Θ͔Γ͍ͨ
CSS ͱ JS ͰΛڞ༗͍ͨ͠
CSS ͱ JS ͰΛڞ༗͍ͨ͠
ΤσΟλͷγϯλοΫεϋΠϥΠτิػೳ͕͍͍ͨ
γϯλοΫεϋΠϥΠτิػೳ
ඪ४ͷCSSͱಉ͡γϯλοΫεͰॻ͖͍ͨ
ඪ४ͷCSSͱγϯλοΫε͕ဃͯ͠΄͘͠ͳ͍
stylelint ŧƂŧ
stylelint ŧƂŧ
ಛఆͷπʔϧΛΘͳͯ͘ JS ͷΤϥʔ͕Ͱͳ͍
ಛఆͷπʔϧΛΘͳͯ͘ JS ͷΤϥʔ͕Ͱͳ͍ - CSS Modules ͷωοΫ - Webpack ͳͲͰઃఆΛॻ͔ͳ͍ͱ
JS ͷΤϥʔ͕ు͔Ε ͯ͠·͏͕ɺwebpack ʹґଘͨ͘͠ͳ͍ɻ
ͳͥ styled-components ͔
ͳͥ styled-components ͔ - template literal Λ༻͍͍ͯΔͳ͔ͰҰ൪ star ͕ଟ͘ɺ ։ൃ׆ൃʹߦΘΕ͍ͯΔ
- React ͔Β͍͍͢Α͏ʹ࡞ΒΕ͍ͯΔ - ಠཱͨ͠ελΠϧ༻ͷίϯϙʔωϯτΛ࡞͍ͬͯ͘ͱ͍͏ํ๏ - React ͷίϯϙʔωϯτઃܭʹ߹ΘͤͯελΠϧܧঝͰ͖Δ - ReactNative ʹରԠ͍ͯ͠Δ
Ͱɻɻɻ
Ͱɻɻɻ ͬͱॏཁͳͷ ʮ͖Ε͍ͳίϯϙʔωϯτઃܭʯ͕Ͱ͖Δ͔ɻ → Ͳ͏͢Ε៉ྷͳίϯϙʔωϯτׂ͕Ͱ͖Δͷ͔ɺ ʑΜͰ͓Γ·͢
https://www.mercari.com/jp/jobs/