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
25
React の色々な スタイリング方法
ユウト
June 03, 2022
Tweet
Share
More Decks by ユウト
See All by ユウト
Introduction to React Compiler
yossydev
0
60
Fast JSX: Don't clone props object #28768
yossydev
1
480
Core Web Vitalsについて
yossydev
0
100
Other Decks in Programming
See All in Programming
カンファレンス動画鑑賞会のススメ / Osaka.swift #1
hironytic
0
180
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
880
functionalなアプローチで動的要素を排除する
ryopeko
1
220
.NETでOBS Studio操作してみたけど…… / Operating OBS Studio by .NET
skasweb
0
120
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
AHC041解説
terryu16
0
400
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
1.4k
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
190
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
140
Swiftコンパイラ超入門+async関数の仕組み
shiz
0
180
BEエンジニアがFEの業務をできるようになるまでにやったこと
yoshida_ryushin
0
200
Оптимизируем производительность блока Казначейство
lamodatech
0
960
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Six Lessons from altMBA
skipperchong
27
3.6k
Automating Front-end Workflow
addyosmani
1366
200k
4 Signs Your Business is Dying
shpigford
182
22k
Bash Introduction
62gerente
610
210k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Thoughts on Productivity
jonyablonski
68
4.4k
Side Projects
sachag
452
42k
Git: the NoSQL Database
bkeepers
PRO
427
64k
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用の書き方は覚えないといけない - レビューする人はちょっと大変