Web の世界の進歩とともに今までの Web の作り方とは異なるやり方で実装することが増えてきました。
今回から、React とともに使うことであとで調整する時に困りにくくなるやり方を連載で紹介します。

第１回. Storybook をつかう
第２回. Redux を Typescript から利用する
第３回. styled-components を使う

第３回目は悩ましい CSS の実装/設計から解放される styled-components についてです。

styled-components を使う

React で Web アプリを作成する時に悩むことになるのが CSS の設計、実装です。
せっかく React でコンポーネントを作るのに普通の CSS を書いてはなんだかダサい・・・
sass のようなスタイルシート言語を使うのも良いですが、新しく言語を覚えるのも色々大変ですし、 React で作ったコンポーネントの分割をもう一度やり直す手間が発生します。
css を js からインポートする方法もあるのですが、こちらも webpack の設定など導入の煩わしさが残ります。

今回はそんなめんどくささから解放される styled-components を紹介します。

導入

styled-components の導入には webpack の設定や新しい言語は一切必要ありません。
JavaScript のライブラリで提供されていますので、 npm で導入しましょう。型も同じリポジトリで提供されているので、 TypeScript からも特に設定不要で使用できます。

npm install styled-components

使用方法

あまり見慣れない書き方ですが、下記のような書き方をします

const CenterParagraph = styled.p`
  text-align: center;
  color: black;
`
const render = () => <CenterParagraph />

この書き方で、 CenterParagraph はtext-align: center;とcolor: black;でスタイリングされた P タグとなります。
このように、styled.xxx`style`でスタイリングをするのが基本となります。

擬似クラスも利用することできます。例えば 2 の倍数だけ色を変える li 要素なら以下のようになります

const ColoredListItem = styled.li`
  :nth-child(2n) {
    color: #f00;
  }
`
const render = () => <ColoredListItem />

これらはそのまま React のコンポーネントとして利用できます。
これらを利用したコンポーネントを作ってみます。

import * as React from 'react'
import styled from 'styled-components'
interface Props {
  items: Array<string>
}
export default function SampleComponent({ items }: Props) {
  return (
    <div>
      <CenterParagraph>GaprotList</CenterParagraph>
      <ul>{items.map(item => <ColoredListItem key={item}>{item}
      </ColoredListItem>)}</ul>
    </div>
  )
}
const CenterParagraph = styled.p`
  text-align: center;
  color: black;
`
const ColoredListItem = styled.li`
  :nth-child(2n) {
    color: #f00;
  }
`

今回はコンポーネントと一緒に書きましたが、ファイルを分けて import するのも良いでしょう。
上記のコンポーネントを Storybook で表示すると以下のようになります。

書き形について

JavaScript の中に CSS は書きづらいのではないかと思う方もいるかと思いますが、実際に書いて特に問題はありませんでした。
というのも、 VSCode でコーディングする限りきっちりサポートしてくれるからです。

vscode-styled-componentsを導入すればきっちりシンタックスハイライトが入ります。

また、コードの補完も入ります。

さらに prittier でのコードのフォーマッティングも対応しているようでした。

これだけきっちりサポートされていると、普通に CSS 書くときに比べた違和感は特に感じませんでした。

まとめ

sass の様な css に変換するスタイルシート言語を利用すると必ずついて回るのがビルドの問題です。
npm スクリプトを書いておくのか、ビルドタスクを書いておくのか。どうするにしてもそれ用の設定、ディレクトリの配置は免れないでしょう。
styled-components ではそんな悩みは起こりません。ビルドタスク不要で、 React のコンポーネントと一緒に管理できます。
JavaScript と css の一括管理は違和感を持つかもしれませんが、わたしは合理的に感じました。
css と html の対応がはっきりするので、死んだ css が生まれにくいのも非常に良いです。

React の css 管理で迷っている方は styled-components に触れてみてください。
css管理に困ったことがある方ほどこの強力さがわかると思います。

Tweet