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
React の色々な スタイリング方法
Search
ユウト
June 03, 2022
Programming
0
58
React の色々な スタイリング方法
ユウト
June 03, 2022
Tweet
Share
More Decks by ユウト
See All by ユウト
Rust製JavaScript EngineのTypeScriptサポート
yossydev
1
280
Rust製JavaScriptエンジンのTypedArray built-inメ ソッドの最適化
yossydev
0
120
Introduction to React Compiler
yossydev
0
120
Fast JSX: Don't clone props object #28768
yossydev
1
610
Core Web Vitalsについて
yossydev
0
130
Other Decks in Programming
See All in Programming
Google Opalで使える37のライブラリ
mickey_kubo
3
150
contribution to astral-sh/uv
shunsock
0
550
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
190
Blazing Fast UI Development with Compose Hot Reload (droidcon London 2025)
zsmb
0
150
NIKKEI Tech Talk#38
cipepser
0
270
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
Towards Transactional Buffering of CDC Events @ Flink Forward 2025 Barcelona Spain
hpgrahsl
0
120
チームの境界をブチ抜いていけ
tokai235
0
230
What's new in Spring Modulith?
olivergierke
1
170
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
330
Temporal Knowledge Graphで作る! 時間変化するナレッジを扱うAI Agentの世界
po3rin
1
100
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1371
200k
How to Ace a Technical Interview
jacobian
280
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
YesSQL, Process and Tooling at Scale
rocio
173
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Embracing the Ebb and Flow
colly
88
4.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
A designer walks into a library…
pauljervisheath
209
24k
Transcript
React の色々な スタイリング方法 ユウト@20歳
色々なスタイリング方法 - Inline Style - CSS modules - CSS in
JS - UIコンポーネント - Tailwind CSS
Inline Styles - パッとスタイル当てたい時に使 う - 基本的に使うのはNG❌ - 擬似クラスやメディアクエリにも 対応していない
- 公式がそもそもCSSクラスを 使うように推奨
CSS Modules - パフォーマンスは必要なCSSだけ 読み込むので最高 - ただ最近のプロジェクトで使われる ことはほぼない - ファイルの肥大化
- 後述する他のスタイリング方法の方が はるかに描きやすい
CSS in JS - JSファイルの中にそのまま書ける - ロジックとスタイリングを同じ ファイルに書ける - パフォーマンスは悪くなる
- 命名を考える手間がある - 個人的にはCSS知っていれば学習 コストはほぼゼロなので、おすすめ
UIコンポーネント - 便利なコンポーネントがたくさんあるやつ - よく見るやつだけど、自分で作ろうとしたらめ んどくさいものが結構ある (Pagenation, Loading) - 最近ではUIコンポーネント
+ CSS in JS or Tailwind CSS がベター - UIコンポーネントはMUI,Chakra UI,Mantine がありますが、間違ってもMUIは使わないよ うにしましょう
Tailwind CSS - 神 - Inline Stylesのサクッとその場で書ける強さがある - CSS in
JSの、ロジックとスタイルを同じファイルに かける強さも持ってる - 命名不要 - 慣れると爆速でかける - Tailwind CSS用の書き方は覚えないといけない - レビューする人はちょっと大変