Tips2019.05.15

styled-componentsでのファイル管理方法を改善する

styled-componentsはスタイル付きの要素を手軽に作れる一方で要素の数が多くなると行数がかさみ読みづらくなってしまいます。

そこでスタイリングした要素だけを別のファイルに切り出して、フォルダにコンポーネントのファイルとまとめるとスッキリさせることができました。

目次

スタイリングした要素のみファイルを分割
1. スタイリング用のファイル
2. メインのコンポーネントファイル
styled-componentsに限らずスタイルは分けたほうが見やすくなる

スタイリングした要素のみファイルを分割

コンポーネント名となるフォルダを作りその中に下記の2ファイルを作ります。

メインのコンポーネント用ファイル
スタイリングした要素用ファイル

ディレクトリ構造にすると下記のようになります。

1
2
3
4
components
  |-- UserDetail
        |-- UserDetail.jsx
        |-- Elements.jsx

スタイリング用のファイル

ファイル名はなんでも良いですが、わかりやすく統一するためにElements.jsxとしています。

1
2
3
4
5
6
7
import styled from 'styled-components'

export const Root = styled.div``

export const Name = styled.div``

export const Description = styled.div``

このファイルに定義するのはstyled-componentsが返す要素のみでその他のものは書かないルールにしました。

メインのコンポーネントファイル

メインのコンポーネントはフォルダ名と重複しますがコンポーネント名.jsxにしています。
フォルダに入れているのでindex.jsxでもいいかもしれません。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import {
  Root,
  Name,
  Description
} from './Elements'

const UserDetail = (props) => {
  const { user } = props
  
  return (
    <Root>
      <Name>{user.name}</Name>
      <Description>{user.description}</Description>
    </Root>
  )
}

Elements.jsxで定義した要素を先頭でまとめて読み込むようにします。

この管理方法にして気づいたメリットですが、Elements.jsxとしてわけてimportすることでどんな要素があるかひと目でわかりやすくなりました。

styled-componentsに限らずスタイルは分けたほうが見やすくなる

今回はstyled-componentsの要素は分けたほうがわかりやすいという内容ですが、やっていることはスタイルシートをわける考え方と結局のところ同じです。

1
2
3
4
components
  |-- UserDetail
        |-- UserDetail.jsx
        |-- style.css

Elements.jsxがstyle.cssになっているパターンはやったことがある人もいると思います。

別ファイルでCSSを書くかstyled-componentsで書くかだけの差ですね。
スタイルを定義することは行数がかさみがちなので1ファイルで管理しようとするとどうしても見通しが悪くなってしまいます。

Vueのようにtemplate、script、style、とブロックが別れているようなら1ファイルはシンプルになっていいかなと思っています。