Reactアプリでのレスポンシブデザイン：CSS-in-JS vs SASS

作成日 2025.05.13
React
React

Reactアプリケーションにおけるレスポンシブデザインの実装にはさまざまなアプローチが存在します。特にCSS-in-JSとSASSは人気の選択肢であり、それぞれ異なる利点と欠点があります。本記事では両者の特徴や使い方、シナリオに応じた最適な選択について掘り下げます。

1. CSS-in-JSとは何か？
2. SASSとは何か？
3. CSS-in-JSでのレスポンシブデザイン
4. SASSでのレスポンシブデザイン
5. テーマ管理（CSS-in-JS）
6. モジュール設計（SASS）
7. パフォーマンスの違い
8. 開発者体験：CSS-in-JS vs SASS
9. プロジェクトに応じた選択基準
10. チームのスキルセットに基づく選択
11. まとめ：どちらを選ぶべきか？

CSS-in-JSとは何か？

CSS-in-JSは、JavaScript内でCSSを記述する技術であり、コンポーネント単位でスタイルを管理できます。これにより、スコープの衝突を防ぎ、動的スタイルの適用が容易になります。

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
`;

function App() {
  return <Button>Click me</Button>;
}

SASSとは何か？

SASSはCSSの拡張言語であり、変数、ネスト、ミックスイン、関数などの高度な機能を提供します。大規模なプロジェクトでのスタイル管理に優れています。

// styles.scss
$primary-color: blue;

.button {
  background-color: $primary-color;
  color: white;
  padding: 10px;
}

// App.js
import './styles.scss';

function App() {
  return <button className="button">Click me</button>;
}

CSS-in-JSでのレスポンシブデザイン

CSS-in-JSではメディアクエリをスタイル内で直接記述できます。

const Container = styled.div`
  display: flex;
  flex-direction: column;
  @media (min-width: 768px) {
    flex-direction: row;
  }
`;

SASSでのレスポンシブデザイン

SASSでは、@mediaクエリをネストして記述できます。

.container {
  display: flex;
  flex-direction: column;

  @media (min-width: 768px) {
    flex-direction: row;
  }
}

テーマ管理（CSS-in-JS）

CSS-in-JSではテーマを定義し、コンポーネント間で共有できます。

import { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    primary: 'blue',
  },
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Click me</Button>
    </ThemeProvider>
  );
}

モジュール設計（SASS）

SASSではファイルをモジュール化し、効率的に管理できます。

// _variables.scss
$primary-color: blue;

// _button.scss
.button {
  background-color: $primary-color;
  color: white;
  padding: 10px;
}

// styles.scss
@import 'variables';
@import 'button';