React の色々なスタイリング方法

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用の書き方は覚えないといけない - レビューする人はちょっと大変

React の色々なスタイリング方法

React の色々なスタイリング方法

ユウト

More Decks by ユウト

Other Decks in Programming

Featured

Transcript