【React】10分内に「ざっくり」わかる！異なるCSSスタイリングアプローチ6選

2024年1月24日 18:33

はじめに

こんにちは！
ReactとCSSはウェブ開発で重要な部分を占めており、効果的なスタイリングはUXとコードの保守性に大きな影響を与えます。本記事ではReactアプリケーションで様々なスタイリングアプローチを見て、各方法の特徴と長所と短所を詳しく説明します。

1. Inline Style

メリット
簡単にスタイルを適用できるため、素早く作業が可能。

ディメリット
コードの読みやすさが悪く、メンテナンスが難しい。
クラスベースのスタイルの再利用が難しい。
スタイルと構造が混在しており、開発者ツールでスタイル確認が難しい。

Reactでは、スタイルをJSX内で直接指定することができます。以下はその例です。

import React from 'react';

const InlineStyleExample = () => {
  const inlineStyle = {
    color: 'blue',
    fontSize: '16px',
    padding: '10px',
  };

  return (
    <div style={inlineStyle}>
      インラインスタイルの例
    </div>
  );
};

export default InlineStyleExample;

この方法は単純で柔軟ですが、大規模なプロジェクトではメンテナンスが難しくなる可能性があります。

2. CSS Modules

メリット
各コンポーネントに地域スコープを提供し、スタイルの衝突を防止。
クラス名の衝突問題を解決し、メンテナンスが容易。

ディメリット
小さなプロジェクトでは少し過剰な場合がある。
動的なクラス名生成が難しい。

CSS Modulesを使用すると、コンポーネントごとにローカルなスコープでスタイルを定義できます。以下は例です。

styles.module.css

.myComponent {
  color: red;
  font-size: 18px;
}

MyComponent.jsx

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

const MyComponent = () => {
  return (
    <div className={styles.myComponent}>
      CSS Modulesの例
    </div>
  );
};

export default MyComponent;

このアプローチはスコープを維持しながらスタイリングでき、コードが整理されます。

3. Styled JSX

メリット
コンポーネントスコープ内でスタイルを維持して隔離された環境で作業可能。
Reactと統合されて使いやすい。

ディメリット
一部の開発者はJSX内のスタイルを好まない場合がある。
グローバルスタイルをサポートしない。

Styled JSXはReactの公式ライブラリで、コンポーネント内でスタイルを定義できます。

const StyledJSXExample = () => {
  return (
    <div>
      <p>Styled JSXの例</p>
      <style jsx>{`
        p {
          color: green;
          font-size: 16px;
        }
      `}</style>
    </div>
  );
};

この方法はReactに統合されており、コンポーネント内で完結しているため便利です。

4. Styled Components

メリット
JavaScriptテンプレートリテラルでスタイルを定義して表現力が豊か。
コンポーネント単位でスタイルを管理するため、メンテナンス性に優れている。

ディメリット
初期学習曲線がやや高い場合がある。
バンドルサイズが大きくなる可能性がある。

styled-components ライブラリを使用すると、JavaScriptのテンプレート文字列を使用してスタイルを定義できます。

import styled from 'styled-components';

const StyledComponent = styled.div`
  color: purple;
  font-size: 20px;
`;

const StyledComponentsExample = () => {
  return (
    <StyledComponent>
      Styled Componentsの例
    </StyledComponent>
  );
};

これにより、コンポーネントがスタイルとロジックを一元管理できます。

5. Emotion

メリット
JavaScriptでスタイルを定義して動的なスタイリングが容易。
メディアクエリなどを便利に使うことができる。

ディメリット
初期学習が必要で、他のCSS-in-JSライブラリと比較して選択が必要。
バンドルサイズが大きくなる可能性がある。

EmotionはCSS-in-JSライブラリであり、JavaScript内でCSSを直接記述できます。

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const emotionStyle = css`
  color: orange;
  font-size: 24px;
`;

const EmotionExample = () => {
  return (
    <div css={emotionStyle}>
      Emotionの例
    </div>
  );
};

Emotionは動的なスタイルの作成に強力であり、メディアクエリなども簡単に組み込むことができます。

styled componetns vs emotionの共通点と違い?
Styled ComponentsとEmotionはどちらもJavaScriptを活用してコンポーネントのスタイルを定義するCSS-in-JSライブラリで、テンプレートリテラルを使って動的でモジュール化されたスタイルを適用することができます。共通してコンポーネントスコープをサポートし、スタイルの衝突を防ぎ、動的なスタイリングが容易で読みやすいコードを作成することができます。

しかし、両者の違いは文法とAPIの少し違う構造にあります。Styled Componentsはstyled.divのようなコンポーネントファクトリー関数を使うし、Emotionはcss関数でスタイルを定義してコンパイル時に生成されたクラス名を活用してスタイルを適用します。

動的なスタイリング?
動的スタイルとは、実行時に動的に変更されるスタイルを指します。これは主にユーザーインタラクション、条件によるレンダリングに応じてスタイルを動的に操作する状況で発生します。

ユーザー入力によるスタイル変更

const dynamicStyle = {
  color: userInput === 'dark' ? 'black' : 'white',
  backgroundColor: userInput === 'dark' ? 'white' : 'black',
};

条件に応じたダイナミックなスタイリング

const dynamicStyle = {
  fontSize: condition ? '20px' : '16px',
  fontWeight: condition ? 'bold' : 'normal',
};

6. Tailwind CSS

メリット
クラス名による簡潔で一貫したスタイルの適用が可能。
事前定義されたユーティリティクラスを使用して素早く作業可能。

ディメリット
HTMLにクラス名が多く表示されるため、読みやすさが低下。
カスタムデザインを適用することが難しい場合がある。

Tailwind CSSはクラス名を使用してスタイルを適用する方法で、柔軟で効率的です。

const TailwindExample = () => {
  return (
    <div className="text-red-500 text-lg p-4">
      Tailwind CSSの例
    </div>
  );
};

各アプローチにはそれぞれの特徴があり、プロジェクトの要件に応じて選択することが重要です。それぞれの利点と欠点を理解し、柔軟に対応できるよう心がけましょう。

最後に

これらのさまざまなスタイリングアプローチの中から選択するのは、プロジェクトの要件と開発者の好みに依存します。各方法の特徴を理解し、プロジェクトに最適な方法を選択することが重要です。

向上心のエンジニア
ソンさん