Reactでスタイリングする際に人気のライブラリーはstyled-componentsなのではないでしょうか。
事実、githubでは31.8kものStarをもらっています。しかし、まだまだ使ったことないという人が多いのが現実です。

styled-componentsについて知らない方も多いので、使うメリットや基本的な使い方について見ていきましょう。

styled-componentsとは？

CSS in JSのライブラリの一つです。CSS in JSとはその名の通りJSの中にスタイルを記述する方法。

このCSS in JSを使うことでReact思想のコンポーネント単位での管理がスタイルにも可能になります。従来はJSとCSSで分けられていたものが、CSS in JSで統合できたためです。

styled-componentsを使うメリット

styled-componentsを使うメリットは主に3つあります。

レスポンスの改善につながる
ミスに気づきやすい
高い保守性

それぞれ見ていきましょう。

1.レスポンスの改善につながる

レンダリングされたコンポーネントだけのスタイルを取りこむことで使用していないスタイルをインポートする必要がなくなります。従来のCSSファイルだと全てのスタイルを取り込む必要があったため、styled-componentsを利用すればレスポンスの改善につながる。

2.ミスに気づきやすい

単一のクラス名をstyled-componentsが作成するため、重複やスペルミスなどを気にする必要がなくなります。

たとえば、以下の画面を作る際、従来だとクラス名を作らないとダメで、スペルミスをしてもエラーを出力しないため、どこが間違っているのかに気づきにくかった。

HTML

<section class="wrapper">
  <h1 class="title">
    Hello World!
  </h1>
</section>

CSS

/*wrapperが正しい*/
.wrap {
    padding: 4em;
    background: papayawhip;
}

.title {
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
}

しかし、styled-componentsではクラス名を作る必要が無くなる代わりにコンポーネントを作る必要があるが、コンポーネント名が間違っているとエラーとなる。そのため、スグに誤字脱字をしている部分が分かります。

エラー画面

JS

import styled from "styled-components"

export default function Home() {
  const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
  `;

  //Wrapperが正しい
  const Wrap= styled.section`
    padding: 4em;
    background: papayawhip;
  `;

  return (
    <Wrapper>
      <Title>
        Hello World!
      </Title>
    </Wrapper>
  );
}

3.高い保守性

従来のCSSファイルの構造だと適応されているスタイルを見つけるのに色んなファイルをたどる必要があった。

しかし、styled-componentsはスタイリングがコンポーネントに関連付けられため、簡単に変更すべき部分が見つかります。

先ほどの「ミスに気づきやすい」で例に出したソースだとHTMLファイルから読み込まれるCSSを辿らないといけなかった。しかし、styled-componentsはJSに含まれているため見つけるのに時間がかかりません。

styled-componentsを使ってみよう

それでは実際にstyled-componentsを使っていきましょう。

styled-componentsインストール方法

まずは、styled-componentsを使うのに必要なライブラリを取り込みます。Next.jsで使う場合にはサーバーレンダリングの考慮がいるため前回の記事で詳しく解説しています。

npm install --save styled-components
yarn add styled-components

1.styled-componentsの基本的な使い方

styled-componentsはタグ付きのテンプレートリテラルを使ってスタイリングします。これにより、従来のコンポーネントとスタイルの紐づけを無くすことができます。

JS

import styled from "styled-components"

export default function Home() {
  //タイトル
  const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
  `;

  //ラッパー
  const Wrapper= styled.section`
    padding: 4em;
    background: papayawhip;
  `;

  return (
    <Wrapper>
      <Title>
        Hello World!
      </Title>
    </Wrapper>
  );
}

2.引数を使う

styled-componentsでは引数を使うことも可能です。次のソースでは引数によって文字の色を変更しています。propsに引数が渡されるのでテンプレートリテラルでその属性を使うだけ。

import styled from "styled-components"

export default function Home() {
  //タイトル
  const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    
    //引数に色が渡されれば設定
    color: ${props => props.color ? props.color : "palevioletred"};
  `;

  //ラッパー
  const Wrapper= styled.section`
    padding: 4em;
    background: papayawhip;
  `;

  return (
    <Wrapper>
      <Title color="red">Hello!</Title>     {/*赤*/}
      <Title color="#4169e1">World</Title>  {/*青*/}
      <Title>styled-components</Title>      {/*ピンク*/}
    </Wrapper>
  );
}

3.スタイルの拡張

styled-componentsではベースとなるコンポーネントを指定してスタイルを拡張できます。styledメソッドの引数にコンポーネントを渡してテンプレートリテラルに上書きするスタイルを追記するだけです。

import styled from "styled-components"

export default function Home() {
  //ベースとなるタイトル
  const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
  `;

  //ラッパー
  const Wrapper= styled.section`
    padding: 4em;
    background: papayawhip;
  `;

  //青色タイトル
  const BlueTitle = styled(Title)`
    color: blue;
    font-weight: bold;                 //太字
  `;
  
  //赤色タイトル
  const RedTitle = styled(Title)`
    color: red;
    text-decoration: underline;         //下線
  `;

  return (
    <Wrapper>
      <Title>Hello!</Title>                       {/*ピンク*/}
      <BlueTitle>World</BlueTitle>                {/*青*/}
      <RedTitle>styled-components</RedTitle>      {/*赤*/}
    </Wrapper>
  );
}

まとめ

styled-componentsを使うことでレスポンスの改善に繋がり、保守性も高まる
タグ付きのテンプレートリテラルにスタイルを追記するだけでstyled-componentsを実装デキル
既存のコンポーネントを継承するにはベースとなるコンポーネントを引数に渡し、テンプレートリテラルに上書きするスタイルを追加する

Discussion