CSS-in-JSとは

こんにちは！株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「CSS-in-JS」についてお伝えしていきます。

CSS-in-JSの基本的な概念

CSS-in-JSは、スタイリングをJavaScriptコード内で管理することです。

CSSファイルを使う代わりに、JavaScriptのオブジェクトや関数を使用してスタイル定義し、コンポーネントに適用します。

これにより、コンポーネントごとに独立したスタイリングが可能になります。

CSS-in-JSを使用する理由

スコープ付きスタイリング

CSS-in-JSでは、スタイルが各コンポーネント内で完全にスコープ化されます。

コンポーネント内で定義したスタイルは他のコンポーネントに影響を与えません。

スタイルの変更やバグを回避するのに役立ちます。

import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
`;

const Header = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Button>Click Me</Button>
    </div>
  );
};

このスタイルはButtonコンポーネント内にスコープ化され、他のコンポーネントに影響を与えません。

動的なスタイリング

CSS-in-JSでは、JavaScriptの変数や条件文を活用してスタイルを動的に変更できます。

ユーザーの操作に応じてスタイルを調整できます。

以下は、ボタンの背景色をユーザーがホバーしたときに変更する場合です。

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${(props) => (props.isHovered ? '#ff5722' : '#007bff')};
  color: #fff;
  padding: 10px 20px;
  border: none;
`;

const MyComponent = () => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div>
      <Button
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        isHovered={isHovered}
      >
        Hover Me
      </Button>
    </div>
  );
};

isHoveredの状態に応じてボタンの背景色が動的に変更されます。

コンポーネント指向のスタイリング

各コンポーネントに関連するスタイルをコンポーネント自体に持たせることができます。

ボタンコンポーネントを作成し、そのコンポーネント内でスタイルを定義することで、他のプロジェクトやページで同じスタイルを再利用できます。

import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
`;

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Button>Click Me</Button>
    </div>
  );
};

コンポーネントごとにスタイルを定義し、それを他のコンポーネントで再利用できます。

メディアクエリの管理

メディアクエリを含むスタイルを定義できます。

import styled from 'styled-components';

const Container = styled.div`
  width: 100%;
  
  @media (min-width: 768px) {
    width: 50%;
  }
`;

CSS-in-JSライブラリの紹介

CSS-in-JSを実装するために、様々なライブラリが提供されています。

各ライブラリには異なる特徴と機能があります。

styled-components

Styled Componentsは、利用率も高く、人気のCSS in JSの1つです。

ReactアプリケーションでのCSS-in-JSを実現するための人気のあるライブラリです。

コンポーネントごとにスタイルを定義し、JavaScriptのテンプレートリテラルを使用してスタイルを記述します。

import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
`;

const Header = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Button>Click Me</Button>
    </div>
  );
};

Emotion

Emotionは、高性能で強力なCSS-in-JSライブラリで、ReactやVue.jsと統合されています。

Emotionは、コンポーネント指向のスタイリングをサポートし、動的なスタイリングにも適しています。

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

const buttonStyle = css`
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
`;

const Header = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <button css={buttonStyle}>Click Me</button>
    </div>
  );
};