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

react

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

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

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

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

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

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

components
|-- UserDetail
|-- UserDetail.jsx
|-- Elements.jsx

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

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

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でもいいかもしれません。

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の要素は分けたほうがわかりやすいという内容ですが、やっていることはスタイルシートをわける考え方と結局のところ同じです。

components
|-- UserDetail
|-- UserDetail.jsx
|-- style.css

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

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

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

WEB開発の依頼について

フリーのフロントエンドエンジニアとして企業様のWEB開発をさせていただいています。

Vue.jsやReact.jsを使ったアプリケーションの作成などのご要望がありましたら、お気軽にお問い合わせください。

実績や単価については「WEB開発について」をご覧ください。

運営について

MK Devはフリーランスのエンジニア村上浩司が運営するメディアです。フロントエンドを中心としたWEB開発、PCやガジェットに関連したことを発信しています。

最新の情報を受取る

(c) MK Dev. All Rights Reserved.