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

Transcript

1. React の色々な スタイリング方法 ユウト@20歳
2. 色々なスタイリング方法 - Inline Style - CSS modules - CSS in JS - UIコンポーネント - Tailwind CSS
3. Inline Styles - パッとスタイル当てたい時に使 う - 基本的に使うのはNG❌ - 擬似クラスやメディアクエリにも 対応していない - 公式がそもそもCSSクラスを 使うように推奨
4. CSS Modules - パフォーマンスは必要なCSSだけ 読み込むので最高 - ただ最近のプロジェクトで使われる ことはほぼない - ファイルの肥大化 - 後述する他のスタイリング方法の方が はるかに描きやすい
5. CSS in JS - JSファイルの中にそのまま書ける - ロジックとスタイリングを同じ ファイルに書ける - パフォーマンスは悪くなる - 命名を考える手間がある - 個人的にはCSS知っていれば学習 コストはほぼゼロなので、おすすめ
6. UIコンポーネント - 便利なコンポーネントがたくさんあるやつ - よく見るやつだけど、自分で作ろうとしたらめ んどくさいものが結構ある (Pagenation, Loading) - 最近ではUIコンポーネント + CSS in JS or Tailwind CSS がベター - UIコンポーネントはMUI,Chakra UI,Mantine がありますが、間違ってもMUIは使わないよ うにしましょう
7. Tailwind CSS - 神 - Inline Stylesのサクッとその場で書ける強さがある - CSS in JSの、ロジックとスタイルを同じファイルに かける強さも持ってる - 命名不要 - 慣れると爆速でかける - Tailwind CSS用の書き方は覚えないといけない - レビューする人はちょっと大変