Reactのスタイリングの話 / about react styling

Transcript

1. React のスタイリングの話 Tomoya Yamashita
2. React のスタイリング どうしてる？ 様々な手法があって、トレンドが移り変わ るフロントエンド。中でもスタイリングの 実現方法は様々……
3. グローバルCSS Proe u web開発の一般的な手法 Cone u ファイルを行き来する必要があって可読性b u 名前衝突・変更による影響範囲…i u BEM記法？ Reactと相性悪い
4. インラインスタイル (style props) Pro“ ’ その場に書けるので開発速度が高e ’ ファイルを行き来しなくて良いので可読性が良 いと言えS ’ 動的スタイルが簡単……？ Con“ ’ 再描画のたびに再計算されるのでパフォーマン スが悪e ’ 擬似要素やメディアクエリに対応していない
5. CSS Modules Pro‚ “ （グローバルCSSと比較して）名前衝突やカス ケーディングを気にしなくて良C “ 必要なCSSのみ読み込まれminifyされるのでパ フォーマンスが最– “ 従来の手法で学習コストが低い Con‚ “ ファイルが増えることによる運用の難し' “ 開発体験や可読性は従来通り
6. CSS-in-JS Proh W 直感的な実s W 差分のみレンダリングするのでパフォーマンス が良い Conh W ライブラリによって書き方が違うのでロックイ ンの懸c W 初期描画のJS処理がパフォーマンスに影" W スタイルごとに命名が必要
7. UIライブラリ （Chakra UI） Proh g コンポーネントが最初から用意されていC g ライブラリによっては直感的な実4 g レスポンシブや i18n 対応 Conh g コンポーネントのライブラリへの依存度が高く ロックインの懸6 g ライブラリによっては癖が強く学習コストが高 い
8. CSSライブラリ （Tailwind） Prov  インラインスタイルのいいとこどP  バンドルサイズを抑える仕組みでパフォーマン ス良Q  カラーやサイズは定数化されているのでスタイ ルの一貫性が保たれる Conv  最初の学習コストが高い（クラス名覚える€  複雑なスタイルは可読性が落ちg  柔軟性が高いのでカオスになりがち
9. まとめ Tailwind の開発体験はとても良い パフォーマンスや開発フェーズに合わせて 最適なスタイリングを選択しよう