【React】CSSスタイリング３種

Reactでのcssスタイリング、シンプルなもの三種類のメモ

それぞれのスタイリング方法には特有のメリットとデメリットがあるため、使用目的によって使い分けることが大事です。

• CSS Modules
• インラインスタイル
• 外部スタイルシート

自分がよく使うのはこの三種類です。基本的なものばかりですが、なるべく学習コスト低く使いたかったので。

CSS Modules

CSS Modulesは、CSSのクラス名をコンポーネント単位でスコープすることができる方法です。これにより、クラス名の衝突を防ぎ、スタイルがそのコンポーネント内でのみ適用されるようになります。Reactでは、通常のCSSファイルをimportする代わりに、.module.cssという拡張子を持つCSSファイルをインポートし、クラス名にローカルスコープを適用します。

●ローカルスコープで書けるので名前のかぶりを気にする必要なし。（個別のクラス名が付与される）。

●moduleのついたcssファイルを作成し読み込んでオブジェクトを読み込む形で使う

/* styles.module.css */

.myStyle {
  color: red
}

import styles from "./styles.module.css";

export default function Title(){
  return <div className={styles.myStyle}> Title </div>
}

メリット

• クラス名の衝突を防ぐ: 各コンポーネントごとにクラス名がスコープされるため、他のコンポーネントとのスタイルの衝突を防げる。
• 保守性が高い: コンポーネントごとにスタイルが完結しているため、大規模なアプリケーションでも管理が容易。
• モジュール化されたスタイル: スタイルが特定のコンポーネントにだけ適用されるので、スタイルの見通しが良くなる。

デメリット

• 設定が少し手間: 他のCSS手法と比べて設定や使用方法が少し面倒な場合がある。
• クラス名が複雑になりがち: インポートしたスタイルを使う際に、styles.btnのようにオブジェクトのプロパティを経由するため、クラス名が長くなりがち。

インラインスタイル

インラインスタイルは、Reactコンポーネント内で直接スタイルを指定する方法です。style属性を使って、JavaScriptオブジェクトとしてスタイルを指定します。この方法では、スタイルがそのコンポーネント内で動的に変わることが可能です。

●直接jsファイルにcssをオブジェクトとして書いていくやり方。

export default function Title(){
  return <div style={{ padding: "20px", border: "2px solid red" }}> Title </div>
}

メリット

• 動的スタイル: 状態に応じてスタイルを動的に変更することができ、JSのロジックと組み合わせやすい。
• 簡単に実装可能: 外部ファイルや複雑な設定なしで、コンポーネント内で直接スタイルを記述できる。
• スコープが明確: スタイルがそのコンポーネント内で完結しているため、他のコンポーネントとの干渉を防げる。

デメリット

• 疑似クラスやメディアクエリに対応しづらい: インラインスタイルは、hoverや@mediaなどのCSSの複雑な機能に対応しづらい。
• パフォーマンスに影響: スタイルがJavaScriptオブジェクトとして毎回評価されるため、パフォーマンスに影響が出ることがある。

外部スタイルシート

外部スタイルシートは、伝統的なCSSの手法で、外部の.cssファイルにスタイルを定義し、Reactコンポーネントでそれをインポートして使用します。これにより、スタイルがアプリケーション全体で一元管理されるため、再利用性の高いスタイルを作成できます。

●外部に通常のcssファイルを作って読み込む方法。クラスを付けるときにclassNameとなる。

/* styles.css */

.myStyle {
  color: red
}

import "./styles.css";

export default function Title(){
  return <div className="myStyle"> Title </div>
}

メリット

• 再利用性が高い: 一度定義したスタイルを複数のコンポーネントで共有できるため、スタイルの再利用が簡単。
• シンプルで分かりやすい: 標準的なCSS記述方法なので、学習コストが低く、すぐに使える。
• 大規模なアプリケーションに適している: グローバルに管理されたスタイルを使うことで、大規模なアプリケーションでもスタイルを一元化できる。

デメリット

• クラス名の衝突: 他のコンポーネントで同じクラス名が使われている場合、予期しないスタイルの上書きが発生する可能性がある。
• 特定のスタイルにアクセスしづらい: グローバルなスタイルでは、特定のコンポーネントのスタイルを変更する際にどこで変更が必要か分かりづらくなることがある。

まとめ

各方法のメリット・デメリット比較表

Reactでのスタイリング方法には、CSS Modules、インラインスタイル、外部スタイルシート以外にもいろんな手法があります。プロジェクトや用途に応じて、これらを使い分けることが重要です。例えば、小規模なプロジェクトや動的なスタイル変更が求められる場合はインラインスタイルを、コンポーネント単位でスタイルを管理したい場合はCSS Modulesを、そして全体的に一貫したデザインを適用したい場合は外部スタイルシートを使う…など。それぞれの特徴を理解し、効率的なスタイリングを実現しましょう。

練習なんかで楽にかいてるとずっとインライン書いちゃって、そればっかりやってしまうんですよね…。