styled-componentsをreactと一緒に使ってみる

概要

そもそもcss in jsって何？

簡単に言うと、styleをcssとしてではなくjsとして渡すやり方です。

Reactだと例えば

const App = () => {

// styleをjsとして渡す
const CssAsJs = {
  color: "red",
  border: "1px solid blue"
}

return (
<p style={CssAsJs}>
 テキスト 
</p>
)
}
Copy

上記のようにjavascriptのobjectとしてスタイルを渡すことができます。cssファイルを別に用意する必要がなくなるので、ファイル数が少なくて済みます。

特にreactだとコンポーネント分けするとそれぞれのjsファイルにつきそれぞれのcssファイルを用意することが多いので、恩恵が大きいです。

また、全てlocalのcssとなるので、BEMを使ってcssのクラス名のコンフリクトを防ぐ必要がなくなります。

styled-componentsって何？

上記で説明した方法は踏襲しつつ、スタイルとしてではなく擬似コンポーネントのような形でスタイルを付けます。divを含めたhtmlタグにスタイルを入れ、その中に格納されている要素に全てスタイルが付与される仕組みです。

具体的な書き方は後で例を挙げますが、イメージとしては以下のようになります。

・Titleと名前をつけたstyled-components(スタイリングされたコンポーネント)を作成
・その中に入れた要素は全てTitleコンポーネントのスタイルがあたる

<Title>  // styled component
  タイトル // Titleコンポーネントに囲われているので、内部は全てにstyleがつく
</Title>
Copy

実はこのやり方を踏襲しないemotionなどのcss in jsのやり方もあるのですが、今回の記事では割愛します。

通常のcssと比較したstyled-componentsの最大のメリットは、propsが渡せるところです。後で例にも挙げますが、例えばpropsがbaseだったら色を黒に、primaryだったら色を青に変えたりすることができます。

styled-componentなどを使わずに通常のstyleに入れる形でもできなくはないのですが、ややごちゃごちゃするので動的にcssを変えたいケースが多い場合はstyled-componentなどのcss in jsを使用する方がシンプルで良いと思います。

また、scssのif文などでも制御できると思いますが、こちらの方がスッキリすると思います。

反面、スタイルを当てるコンポーネントが多くなってくるとどれがスタイル用のコンポーネントがわかりづらくなったり、１つのファイルのコード量が多くなって読みにくくなったり、Jsを読み込む分動作が少し遅くなったりします。

styled-componentsの導入に限った話ではないですが、プロジェクトの必須条件と、チームのルール設定が重要となると考えられます。

それでは、具体例を見てみましょう。

具体例

設定

1.プロジェクトを作成して移動します。

npx create-react-app explore-styled-components (名前は自由です)
cd explore-styled-components（プロジェクトに移動する）.
Copy

2.ライブラリをインストールする

npm install styled-components
Copy

3.Package.jsonにResolutionを追加します。実はこれはマストではないですが、バージョンの違いによってバグが起こることもあるようなので入れておいた方が良いと思います

"package.json"{
  "resolutions": {
    "styled-components": "^5" // バージョンを見てここに追記
  }
}
Copy

設定は以上になるので、ここからは最小構成の例とpropsを渡す例を見ていきましょう

例1 (基本的な使い方)

//App.js
//ライブラリをインポート
import styled from "styled-components";


// h1タグの要素を持ったstyled-componentsを作成
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: blue;
`;

function App() {
  return (
    <>
      // コンポーネントとして
      <Title>Hello World!</Title>
    </>
  );
}


export default App
Copy

使い方はシンプルで、styleのobjectを特定のエレメントとして作っているイメージです。例えば上記の場合は"h1"としてスタイルを作成しているので、h1タグとしてレンダリングされます。

もちろんh2などの同タイプのタグとしてレンダリングさせることも可能ですし、divやspanなどの別の種類のタグとしてレンダリングさせることも可能です。

ちなみに"import styled"となっていますが、この名前は変更可能です。ただ、慣習としてstyledが使われるケースが多いと思います。例えば "import s"とした場合は "s.h1"としてstyled-componentsを作成できます。

以下がレンダリング後の画面ですが、ちゃんとスタイルが当たっているのがわかります。

例2(propsを渡してみる)

//App.js


//ライブラリをインポート
import styled from "styled-components";


//buttonコンポーネントとしてスタイルを作成
const Button = styled.button`
  // propsによってボタンの背景を青と白に出し分ける
  background: ${(props) => (props.base ? "blue" : "white")};
  // propsによってボタンの文字色を白と青に出し分ける
  color: ${(props) => (props.base ? "white" : "blue")};
  font-size: 1rem;
  margin: 1rem;
  padding: 0.25rem 1rem;
  border: 2px solid blue;
  border-radius: 3px;
`;


function App() {
  return (
    <>
      // propsがない場合のボタンコンポーネント
      <Button>Normal</Button>
      // propsがbaseある場合のボタンコンポーネント
      <Button base>Base</Button>
    </>
  );
}


export default App
Copy

上記はpropsとしてbaseを付けた時とそうでない時で、色が変わるようにしています。通常のstyleに直接色をつける場合だとstyle自体を3項演算子で変える必要があり、可読性が低下します。propsだけで管理できるので、他の人が書いたコードでも条件分岐が追いやすいです。

以下が実際の画面ですが、ちゃんと2つのボタンに別のスタイルが当たっているのがわかると思います。

まとめ

css in jsはreactにおけるstylingで最も人気のあるやり方の１つで、特に動的にcssを変えたい時にやりやすく、かつ可読性が高いです。styled-componentsはその中でも最も古くからあるものの１つなので、情報も得やすいでしょう。css in jsにも色々な選択肢があると思いますが、基本のやり方を学びたい場合はまずはstyled componentsを触ってみることをオススメします。

参考

Styled-components official guide:https://styled-components.com/

How to use styled-components In React: https://www.smashingmagazine.com/2020/07/styled-components-react/

Styled-components vs. Emotion for handling CSS: https://blog.logrocket.com/styled-components-vs-emotion-for-handling-css/

styled-componentsのベーシックな使い方: https://www.fundely.co.jp/blog/tech/2020/09/16/180026/

ここまで読んでいただき、ありがとうございました！

エンジニア

きょう

# フロントコーディング

一覧に戻る