React のスタイリングの話 Tomoya Yamashita 

React のスタイリング どうしてる？ 様々な手法があって、トレンドが移り変わ るフロントエンド。中でもスタイリングの 実現方法は様々…… 

グローバルCSS Proe u web開発の一般的な手法 Cone u ファイルを行き来する必要があって可読性b u 名前衝突・変更による影響範囲…i u BEM記法？ Reactと相性悪い 

インラインスタイル (style props) Pro“ ’ その場に書けるので開発速度が高e ’ ファイルを行き来しなくて良いので可読性が良 いと言えS ’ 動的スタイルが簡単……？ Con“ ’ 再描画のたびに再計算されるのでパフォーマン スが悪e ’ 擬似要素やメディアクエリに対応していない 

CSS Modules Pro‚ “ （グローバルCSSと比較して）名前衝突やカス ケーディングを気にしなくて良C “ 必要なCSSのみ読み込まれminifyされるのでパ フォーマンスが最– “ 従来の手法で学習コストが低い Con‚ “ ファイルが増えることによる運用の難し' “ 開発体験や可読性は従来通り 

CSS-in-JS Proh W 直感的な実s W 差分のみレンダリングするのでパフォーマンス が良い Conh W ライブラリによって書き方が違うのでロックイ ンの懸c W 初期描画のJS処理がパフォーマンスに影" W スタイルごとに命名が必要 

UIライブラリ （Chakra UI） Proh g コンポーネントが最初から用意されていC g ライブラリによっては直感的な実4 g レスポンシブや i18n 対応 Conh g コンポーネントのライブラリへの依存度が高く ロックインの懸6 g ライブラリによっては癖が強く学習コストが高 い 

CSSライブラリ （Tailwind） Prov  インラインスタイルのいいとこどP  バンドルサイズを抑える仕組みでパフォーマン ス良Q  カラーやサイズは定数化されているのでスタイ ルの一貫性が保たれる Conv  最初の学習コストが高い（クラス名覚える€  複雑なスタイルは可読性が落ちg  柔軟性が高いのでカオスになりがち 

まとめ Tailwind の開発体験はとても良い パフォーマンスや開発フェーズに合わせて 最適なスタイリングを選択しよう