1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 22

エアークローゼット Advent Calendar 2025

@loki_tn(NGUYEN THINH)
in

Reactにおけるスタイリング完全ガイド

1
Last updated at Posted at 2025-12-22

みなさまこんにちは！株式会社エアークローゼットLokiです。

この記事は株式会社エアークローゼット Advent Calendar 2025 22日目の記事です。

はじめに

現代のWeb開発において、Reactコンポーネントのスタイリングは、単に見た目を整えるためだけの作業ではありません。洗練されたユーザー体験（UX）を提供し、プロダクトやブランドの個性を明確に表現するための重要な要素です。適切なスタイリングは、操作性の向上、視覚的な魅力の強化、そしてアプリケーション全体の一貫性を保つことに大きく貢献します。

Reactでは、従来のCSSからCSS Modules、Styled-componentsといった新しいアプローチまで、さまざまなスタイリング手法が用意されています。開発者はプロジェクトの規模や目的に応じて、柔軟かつ強力な選択肢を活用することができます。

本記事では、Reactにおける代表的なスタイリング手法を紹介し、それぞれの特徴やメリット・デメリットを整理しながら、実際のプロジェクトでどのように活用できるのかを解説していきます。

1. Inline Styles

Inline Stylesは、Reactコンポーネントに対して style 属性を使い、JavaScriptのオブジェクトとして直接スタイルを指定する方法です。CSSのプロパティ名は通常の kebab-case ではなく、camelCase で記述します。シンプルなスタイルを素早く適用したい場合に便利な手法です。

メリット

  • スタイルがコンポーネントに直接紐づくため、他のコンポーネントとのスタイル競合を防ぎやすい
  • CSSファイルを新たに作成する必要がなく、手軽に変更・適用できる
  • JavaScriptを使って動的な値を設定でき、propsやstateに応じたスタイリングが可能

デメリット

  • :hover などの疑似クラスや media queries といったCSSの高度な機能が使用できない
  • コンポーネントが増えるとスタイル管理が煩雑になりやすい
  • 再レンダリングのたびに新しいJavaScriptオブジェクトが生成されるため、過度な使用はパフォーマンスに影響を与える可能性がある
function StyledComponent() {
  const buttonStyles = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
  };

  return <button style={buttonStyles}>Click Me</button>;
}

export default StyledComponent;

2. CSS Stylesheets（従来のCSS）

CSS Stylesheetsは、最も伝統的で一般的なスタイリング手法です。Reactでは、CSSファイルをコンポーネントファイルにインポートし、className を通してスタイルを適用します。JavaScriptとCSSを明確に分離できるため、プロジェクト構造を整理しやすいという特徴があります。

メリット

  • スタイルの再利用性が高く、保守性に優れている
  • 疑似クラス、media queries、アニメーションなど、CSSの全機能を利用可能
  • JavaScriptとCSSを分離することで、役割が明確になり管理しやすい

デメリット

  • 大規模プロジェクトではクラス名の衝突が発生しやすい
  • スタイルがグローバルに適用されるため、意図しない影響が出る可能性がある
  • JavaScriptのロジックとスタイルを直接結びつけることができない
/* styles.css */
.button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: darkgreen;
}

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

function StyledComponent() {
  return <button className="button">Click Me</button>;
}

export default StyledComponent;

3. CSS Modules

CSS Modulesは、クラス名やIDを自動的にスコープ化する仕組みで、スタイルの衝突を防ぎます。
CSSファイルをモジュールとしてインポートし、そのプロパティを通じてスタイルを適用します。
各コンポーネントに専用のスタイル空間を持てる点が特徴です。

メリット

  • クラス名の衝突を防ぎ、スタイルが特定のコンポーネントに限定される
  • 自動的にスコープ化されるため、コンポーネント間の依存関係を減らせる

デメリット

  • 自動生成されたクラス名は可読性が低く、デバッグ時に分かりづらい
  • 小規模なプロジェクトでは設定がやや煩雑に感じられることがある
/* Button.module.css */
.button {
  background-color: orange;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: darkorange;
}

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

function Button() {
  return <button className={styles.button}>Click Me</button>;
}

export default Button;

4. Tailwind CSS（Utility First）

Tailwind CSSは、utility-first思想に基づいたCSSフレームワークです。従来のようにCSSクラスを定義するのではなく、あらかじめ用意された小さなユーティリティクラスを組み合わせてUIを構築します。HTML上で即座にスタイルを調整できるため、開発スピードが非常に速いのが特徴です。

メリット

  • CSSファイルとHTMLを行き来する必要がなく、開発スピードが向上
  • プロトタイプやUIの微調整を素早く行える
  • デザインシステムが統一され、UIの一貫性を保ちやすい
  • 設定ファイルで色やサイズなどを柔軟にカスタマイズ可能

デメリット

  • クラスが増えると、HTMLの可読性が低下することがある
  • 初学者には覚えるべきクラス名が多く、学習コストがかかる
  • 適切な設計をしないと、スタイルの再利用が難しくなる
function Button() {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Click Me
    </button>
  );
}

export default Button;

5. CSS-in-JS

CSS-in-JSは、JavaScriptファイル内に直接スタイルを記述するアプローチです。styled-componentsやEmotionなどのライブラリを使い、コンポーネント単位でスタイルを定義します。スタイルとロジックを密接に結びつけたい場合に有効です。

メリット

  • スタイルがコンポーネントに完全に紐づき、衝突が起きない
  • propsやstateに応じた動的なスタイリングが容易
  • JavaScriptのロジックとスタイルを自然に統合できる
  • テーマ機能やSSR対応など、高度な機能が利用可能

デメリット

  • 実行時にスタイルを生成するため、パフォーマンスへの影響が懸念される場合がある
  • ライブラリ導入によりバンドルサイズが増加する
  • 初学者には導入・理解のハードルがやや高い
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
`;

function Button() {
  return <StyledButton>Click Me</StyledButton>;
}

export default Button;
手法 管理性・保守性 再利用性 開発スピード 表現力・柔軟性 チーム開発との相性 主な用途・特徴
Inline Styles △
コンポーネントが増えると管理が難しい		 △ ◎ △
疑似クラス・media query不可		 △ 小規模・一時的なスタイル、動的な値を素早く適用したい場合
CSS Stylesheets △
グローバル管理が必要		 ◎ ○ ◎ △
命名ルールが重要		 従来型の開発、CSSを広く共有したいプロジェクト
CSS Modules ◎ ○ ○ ◎ ◎ 中〜大規模開発、スタイルの衝突を避けたい場合
Tailwind CSS ○ △
設計次第		 ◎ ○ ◎ 高速なUI開発、デザインの一貫性を重視するチーム
CSS-in-JS ◎ ○ ○ ◎ ○ 動的UI、テーマ対応、コンポーネント指向の設計

補足説明
◎：非常に優れている
○：問題なく利用できる
△：用途・設計次第で注意が必要

まとめ

Reactにおけるスタイリングには、従来型から最新の手法まで多くの選択肢があります。Inline Styles、CSS Stylesheets、CSS Modules、Tailwind CSS、CSS-in-JSはいずれも一長一短があり、プロジェクトの規模や複雑さ、チームの開発スタイルによって最適な手法は異なります。
重要なのは、それぞれの特徴を理解した上で適切に選択することです。本記事が、Reactプロジェクトにおけるスタイリング手法を選ぶ際の参考になれば幸いです。

最後までご覧いただきありがとうございました！

株式会社エアークローゼット Advent Calendar 2025 はまだまだ続きますので、ぜひ他のエンジニア、デザイナー、PMの記事もご覧いただければ幸いです。

また、エアークローゼットはエンジニア採用活動も行っておりますので、興味のある方はぜひご覧ください！

1
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?