React入門第１１回 ~CSS-in-JSでスタイリングしよう~

Contents

CSS-in-JSとは？
styled-componentsの基本
CSS-in-JSを使うメリット
メリットの活用例
CSS-in-JSの注意点とデメリット
スタイルの「継承」も可能！
CSS-in-JSのまとめ

CSS-in-JSとは？

プロ太先生！CSS-in-JSって、名前は聞いたことあるけど、普通のCSSとどう違うの？なんかJavaScriptの中にCSSを書くって聞いたけど…

CSS-in-JSはJavaScriptの中に直接CSSを書く方法です。これを使うと、各コンポーネントのスタイルをその場で書けるから、コードがまとまりやすくなりますね。

へえ、じゃあ外部のCSSファイルがいらないってこと？

そういうことです！今回は「styled-components」というライブラリを使って、CSS-in-JSの基礎を学んでみよう。では、まずサンプルコードを見ながら進めていきましょう！

styled-componentsの基本

まず、CSS-in-JSの例として「styled-components」を使ってボタンを作ってみます。次のコードを見てください。

import { useState } from "react";
import styled from "styled-components";

const StyledButton = styled.button`
  border-radius: 12px;
  border: none;
  display: block;
  width: 120px;
  height: 50px;
  margin: 20px auto;
  font-weight: bold;
  cursor: pointer;
  background-color: ${({ isActive }) => (isActive ? "green" : "red")};
  color: white;
  transition: background-color 0.3s;

  &:hover {
    opacity: 0.8;
  }
`;

const StyledExample = () => {
  const [isActive, setIsActive] = useState(false);
  const handleClick = () => {
    setIsActive(!isActive);
  };
  return (
    <StyledButton isActive={isActive} onClick={handleClick}>
      クリックして色を変更
    </StyledButton>
  );
};

export default StyledExample;

上記のコードを書けば、クリックすれば色が変わるボタンが作成できます。

この「StyledButton」って何ですか？普通の<button>タグと何が違うんですか？

このStyledButtonは、styled-componentsが提供するstyled.buttonを使ってCSSを当てたボタン要素です。テンプレートリテラル内にCSSを書けるから、HTMLとCSSがまとまって見やすくなります。

CSS-in-JSを使うメリット

じゃあ、CSS-in-JSを使うと何が便利なんですか？

いくつかメリットがあるから、順に見てみましょう。

スタイルがコンポーネントに密接する
通常のCSSだと、コンポーネントとスタイルが別の場所にあるから探しにくいことがあるよね？でもCSS-in-JSなら、そのコンポーネントに関連するスタイルがすぐ近くにあるから、見通しがよくなるんだ。
ユニークなクラス名が自動生成される
例えばStyledButtonのようなコンポーネントを作ると、styled-componentsはそのボタンのためだけのユニークなクラス名を自動で生成してくれる。だから、他のコンポーネントとスタイルがかぶる心配がないんだよ。
スタイルの動的変更が簡単
スタイルにpropsを渡すことで、見た目を動的に変えられるのも魅力だね。さっきの例でいうと、isActiveがtrueになると背景色が緑になり、falseの時は赤色になるように設定してある。

なるほど！スタイルをその場で変更できるんだね！
ゲームのキャラクターの衣装をボタン一つで変えるみたいに感じるな！

メリットの活用例

「テーマ」を切り替えるような場合でも便利ですよ。次のコードでテーマの色を変える例を見てみよう。

import { useState } from "react";
import styled from "styled-components";

const ThemeButton = styled.button`
  background-color: ${(props) => (props.theme === "dark" ? "black" : "white")};
  color: ${(props) => (props.theme === "dark" ? "white" : "black")};
`;

const Example = () => {
  const [theme, setTheme] = useState("dark");
  const toggleTheme = () => {
    setTheme(theme === "dark" ? "light" : "dark");
  };
  return (
    <ThemeButton theme={theme} onClick={() => toggleTheme()}>
      ボタン
    </ThemeButton>
  );
};
export default Example;

おお！！ボタンを押すと色が変わるんですね！
こういうスタイルの切り替えが簡単にできるん便利ですね！！

そう、JavaScriptのif文や三項演算子を使って、条件によってスタイルを変えられるのもCSS-in-JSの強みですね！

CSS-in-JSの注意点とデメリット

いいことばかりだけど、デメリットとか注意することはないんですか？

もちろん、ほんの少しデメリットもありますよ。ただ、それほど大きなものではありません。

パフォーマンス
自動で生成されるスタイルはその分JavaScriptの処理が増えるから、大量のコンポーネントに対しては負荷がかかることもある。でも、一般的なプロジェクトではそれほど気にしなくても大丈夫です。
可読性の低下
クラス名が自動生成されるから、ブラウザのデバッグツールでスタイルを確認する時に、クラス名が「sc-bdnylx」といったランダムな文字列になっていて分かりにくいことがあります。

確かに、クラス名がランダムだとスタイルを確認しづらいかもね。

スタイルの「継承」も可能！

さらに実際のプロジェクトで使う場合、スタイルの「継承」も重要です。styled()を使って元のコンポーネントのスタイルを引き継ぐことができるんです。

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

const SecondaryButton = styled(PrimaryButton)`
  background-color: gray;
`;