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
52
React の色々な スタイリング方法
ユウト
June 03, 2022
Tweet
Share
More Decks by ユウト
See All by ユウト
Rust製JavaScript EngineのTypeScriptサポート
yossydev
1
260
Rust製JavaScriptエンジンのTypedArray built-inメ ソッドの最適化
yossydev
0
120
Introduction to React Compiler
yossydev
0
110
Fast JSX: Don't clone props object #28768
yossydev
1
590
Core Web Vitalsについて
yossydev
0
130
Other Decks in Programming
See All in Programming
Testing Trophyは叫ばない
toms74209200
0
890
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
チームのテスト力を鍛える
goyoki
3
930
1から理解するWeb Push
dora1998
7
1.9k
はじめてのMaterial3 Expressive
ym223
2
900
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
概念モデル→論理モデルで気をつけていること
sunnyone
3
300
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
190
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
300
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
For a Future-Friendly Web
brad_frost
180
9.9k
Documentation Writing (for coders)
carmenintech
74
5k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Code Review Best Practice
trishagee
71
19k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Pragmatic Product Professional
lauravandoore
36
6.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Producing Creativity
orderedlist
PRO
347
40k
A Modern Web Designer's Workflow
chriscoyier
696
190k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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用の書き方は覚えないといけない - レビューする人はちょっと大変