フロントエンド - CSS・スタイリング

styled-components すたいるどこんぽーねんつ

CSS-in-JSコンポーネントReactテンプレートリテラルスコープスタイリング

styled-componentsについて教えて

簡単に言うとこんな感じ！

CSSをJavaScriptの中に直接書いちゃうライブラリだよ！「このボタンにこのデザイン」って部品ごとにスタイルをセットにして管理できるから、スタイルがどこかで意図せず上書きされる事故がなくなるんだ。Reactと一緒に使われることが多いよ！

styled-componentsとは

styled-componentsは、JavaScriptの中にCSSを書く「CSS-in-JS」というアプローチを実現するライブラリです。通常のウェブ開発ではCSSファイルを別途用意しますが、styled-componentsを使うとReactなどのUIコンポーネント（部品）にスタイルを直接紐づけて管理できます。

最大の特徴はスタイルのスコープ（適用範囲）が自動的にコンポーネント単位に閉じ込められる点です。通常のCSSはページ全体に影響するため、「どこかで書いたスタイルが別のところに意図せず干渉する」という問題が起きがちです。styled-componentsはそれを防ぎ、部品ごとに独立したスタイル管理を実現します。

また、JavaScriptの変数や条件式をそのままスタイルに組み込めるため、「ボタンが押された状態のときだけ色を変える」「ユーザーが設定したテーマカラーに合わせてスタイルを変える」といった動的なスタイリングが非常に書きやすくなります。2016年の登場以来、Reactエコシステムで広く普及しています。

styled-componentsの仕組み

styled-componentsはタグ付きテンプレートリテラルというJavaScriptの機能を使ってCSSを記述します。

import styled from 'styled-components';

// styled.button`` でCSSを書くとボタンコンポーネントが生成される
const PrimaryButton = styled.button`
  background-color: #1e3a8a;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: #2563eb;
  }
`;

// あとはReactコンポーネントとして普通に使うだけ
function App() {
  return <PrimaryButton>送信する</PrimaryButton>;
}

動的スタイリング（Propsを使った分岐）

JavaScriptの変数（Props）を受け取ってスタイルを切り替えられるのが大きな強みです。

const Button = styled.button`
  background-color: ${(props) => (props.primary ? '#1e3a8a' : '#e5e7eb')};
  color: ${(props) => (props.primary ? 'white' : '#374151')};
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
`;

// 使い方
<Button primary>メインボタン</Button>  // 紺色
<Button>サブボタン</Button>            // グレー

主な機能一覧

機能	説明	実務での使いどころ
スコープ付きCSS	クラス名を自動生成し他と衝突しない	大規模プロジェクトでのスタイル管理
動的スタイリング	PropsやStateに応じてスタイルを変更	ボタンの状態・テーマ切替
継承（extend）	既存コンポーネントのスタイルを引き継ぎ	共通デザインの派生コンポーネント作成
テーマ機能	ThemeProviderでサイト全体の色・サイズを一元管理	ダークモード・ブランドカラー統一
グローバルスタイル	`createGlobalStyle` でリセットCSSなどを定義	フォントや余白のベース設定
SSR対応	サーバーサイドレンダリング時も正しくCSSを出力	Next.jsなどでの利用

歴史と背景

2013年 — CSSはグローバルスコープで管理が難しいという問題が顕在化。FacebookエンジニアがCSS設計の課題を提言し始める
2015年 — CSSモジュール（CSS Modules）が登場。ファイル単位でスコープを分離するアプローチが注目される
2016年 — Max Stoiber・Glen Maddern・Phil Plückbahnらがstyled-components v1を公開。「CSSをコンポーネントと完全に一体化する」思想が大きな反響を呼ぶ
2017〜2018年 — Reactの普及とともにstyled-componentsも急速に採用が拡大。GitHubスター数がCSS-in-JSカテゴリでトップに
2019年 — Emotionなど競合ライブラリが台頭し、CSS-in-JSエコシステムが多様化
2020年以降 — v5リリースでパフォーマンス改善。Next.jsやGatsbyでの標準的なスタイリング手法として定着
2023年以降 — React Server Components時代にCSS-in-JSの制約（クライアント専用）が話題に。CSS ModulesやTailwind CSSとの比較・選定が活発化

他のスタイリング手法との比較

styled-componentsはいくつかあるCSSスタイリング手法のひとつです。プロジェクトの規模・チームの方針に応じて選択します。

ThemeProviderによるテーマ管理

styled-componentsの強力な機能のひとつがThemeProviderです。サイト全体のカラーパレットやフォントサイズを一元定義し、すべてのコンポーネントで参照できます。

import { ThemeProvider } from 'styled-components';

// テーマ定義（ブランドカラーや余白の基準値をまとめる）
const theme = {
  colors: {
    primary: '#1e3a8a',
    secondary: '#065f46',
    background: '#f8fafc',
  },
  fontSize: {
    small: '12px',
    medium: '16px',
    large: '24px',
  },
};

// ThemeProviderで全体を囲む
function App() {
  return (
    <ThemeProvider theme={theme}>
      <MyPage />
    </ThemeProvider>
  );
}

// 各コンポーネントでthemeを参照
const Heading = styled.h1`
  color: ${(props) => props.theme.colors.primary};
  font-size: ${(props) => props.theme.fontSize.large};
`;