🔵

ReactでCSSを使いこなす：6つの方法とそのメリット👍・デメリット👎

2023/03/22に公開

CSS

この記事では、ReactでCSSを書く際に使える6つの方法を紹介し、それぞれのメリットとデメリットを解説します。

Reactでcssを書く方法

ReactでCSSを扱う方法は複数あります。それぞれの方法には、メリットとデメリットが存在します。この記事では、以下の6つの方法を紹介します。

Inline Styles
CSS Modules
CSS in JS
Styled JSX
Styled Components

Inline Stylesで書く方法

Inline Stylesは、スタイルを直接コンポーネントに適用する方法です。JavaScriptオブジェクトとしてスタイルを定義し、コンポーネントのstyle属性に適用します。

import React from "react";

const style = {
  color: "red",
  fontSize: "18px"
};

const MyComponent: React.FC = () => {
  return <div style={style}>Hello, world!</div>;
};

メリット:

外部CSSファイルが不要
コンポーネント内で完結するため、スコープが限定される

デメリット:

CSSの全機能が利用できない（例：疑似クラス、メディアクエリ）
再利用性が低い
スタイルがコンポーネント内に直接記述されるため、可読性が低くなることがある

CSS Modulesで書く方法

CSS Modulesは、ローカルスコープのCSSを提供する方法です。CSSファイルを作成し、コンポーネントでインポートして使用します。

/* styles.module.css */
.myComponent {
  color: red;
  font-size: 18px;
}

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

const MyComponent: React.FC = () => {
  return <div className={styles.myComponent}>Hello, world!</div>;
};

メリット:

スタイルがローカルスコープであるため、名前の衝突を避けられる
CSSファイルが分離されているため、可読性が高い

デメリット:

CSSファイルが増えることで、プロジェクトの構成が複雑になることがある

CSS in JSで書く方法

CSS in JSは、JavaScript内でスタイルを記述する方法です。スタイルオブジェクトを作成し、コンポーネントで使用します。

import React from "react";
import { css } from "emotion";

const myComponentStyle = css`
  color: red;
  font-size:18px;
`;

const MyComponent: React.FC = () => {
   return <div className={myComponentStyle}>Hello, world!</div>;
};

メリット:

スタイルがJavaScript内で記述されているため、動的なスタイルの適用が容易
コンポーネント内でスタイルが完結している

デメリット:

CSSのシンタックスが異なるため、慣れが必要
スタイルがコンポーネント内に直接記述されるため、可読性が低くなることがある

Styled JSXで書く方法

Styled JSXは、JSX内でスタイルを記述する方法です。コンポーネント内に<style jsx>タグを使用してスタイルを適用します。

import React from "react";

const MyComponent: React.FC = () => {
  return (
    <div>
      Hello, world!
      <style jsx>{`
        div {
          color: red;
          font-size: 18px;
        }
      `}</style>
    </div>
  );
};

メリット:

コンポーネント内でスタイルが完結している
CSSのシンタックスをそのまま使用できる

デメリット:

スタイルがコンポーネント内に直接記述されるため、可読性が低くなることがある

Styled Componentsで書く方法

Styled Componentsは、CSS-in-JSライブラリの一つで、スタイル付きコンポーネントを作成することができます。

import React from "react";
import styled from "styled-components";

const StyledDiv = styled.div`
  color: red;
  font-size: 18px;
`;

const MyComponent: React.FC = () => {
  return <StyledDiv>Hello, world!</StyledDiv>;
};

メリット:

スタイルがコンポーネント化されるため、再利用性が高い
CSSのシンタックスをそのまま使用できる

デメリット:

追加のライブラリが必要
パフォーマンスに影響する可能性がある

7. まとめ

ReactでCSSを書く方法は複数あり、それぞれの方法にはメリットとデメリットが存在します。プロジェクトの要件やチームの好みに応じて、適切な方法を選択してください。この記事が、ReactでCSSを書く際の方法選択の参考になれば幸いです。

人気なのは以下の3つの方法のようです。

CSS Modules
Styled Components
CSS-in-JS ライブラリ（Emotionなど)

これらの人気がある理由は、スタイルのスコープ管理が容易であり、コンポーネントベースのアプローチと相性が良いためだと思います。

CSS Modulesは、CSSファイルをコンポーネントに紐づけることでスタイルのスコープ管理が容易になります。また、CSSの標準的なシンタックスをそのまま利用できるため、CSSに慣れている人にとっては取り入れやすい方法です。
Styled Componentsは、CSS-in-JSの一つで、スタイル付きのコンポーネントを作成できます。コンポーネント化されたスタイルは再利用が容易で、動的なスタイル適用も簡単に行えます。ただし、追加のライブラリが必要になります。
CSS-in-JSライブラリ（例：Emotion）は、JavaScript内でスタイルを記述することができます。Styled Componentsと同様に、動的なスタイル適用が容易で、コンポーネント内でスタイルが完結しています。しかし、独自のシンタックスを覚える必要があります。

Reactでcssを書く方法

Inline Stylesで書く方法

CSS Modulesで書く方法

CSS in JSで書く方法

Styled JSXで書く方法

Styled Componentsで書く方法

7. まとめ

Discussion