styled-componentsを使う時のポイント

styled-components、使っていますか？
自分はほとんどの案件で、styled-componentsなどのCSS-in-JSを使っています。

スタイルの影響範囲を限定できる、構造/振る舞い/見た目を1カ所に集約できる、、などさまざまなメリットがあるstyled-components。
とはいえメリットばかりではなく、使い勝手が悪く感じるところもあるのは事実です。

特に「ぱっと見で構造がつかめない」ことに大きなデメリットを感じて、使用を避けている人が一定数いるように感じます。
この記事ではそのデメリットを最低限に抑えるための工夫として自分がやっていることを紹介したいと思います。

ぱっと見で構造がつかめない

styled-componentsを普通に使うと以下の問題が発生します。

styled-componentsと外部コンポーネントの区別が付きづらい
HTML構造が分かりづらい

具体的に見ていきましょう。

styled-componentsと外部コンポーネントの区別が付きづらい

以下のコードを見てください。

外部コンポーネントとstyled-componentsの併用


// 外部コンポーネントの読み込み
import { OuterComponent } from '../components/OuterComponent';

// styled-componentsの定義
const HogeElement = styled.p`margin: 8px auto;`;

export const MyComponent = () => {
  return (
    <>
      <OuterComponent />
      <HogeElement />
    </>
  );
};

外部から読み込んだOuterComponentと、ファイル内部で定義したstyled-componentsのHogeElementは出自がだいぶ違う割に、使う際にはほぼ同じ見た目になっています。

このぐらいの規模のコンポーネントの場合は特に問題になりませんが、大規模コンポーネントになってくると、構造を把握するのが難しくなってきます。

HTML構造が分かりづらい

styled-components版の記述と普通のJSX版の記述を見比べてみてください。

styled-components版


export const MyComponent1 = () => {
　return (
　　<Wrapper>
　　　<Title></Title>
　　　<Inner>
　　　　<Items>
　　　　　<Item></Item>
　　　　　<Item></Item>
　　　　</Items>
　　　</Inner>
　　</Wrapper>
　);
};

普通のJSX版（素のHTML）


export const MyComponent2 = () => {
return (
　　<section>
　　　<h2></h2>
　　　<div>
　　　　<ul>
　　　　　<li></li>
　　　　　<li></li>
　　　　</ul>
　　　</div>
　　</section>
　);
};

同じ構造を表現しているにもかかわらず、「styled-components版は構造がつかみづらい」と感じた方が多いのではないでしょうか？

見慣れていないことに加えて、styled-components版ではどのHTMLタグを使った要素なのかという情報が判断できず、それを知るためには各要素の定義を確認する必要があります。

これは直感的ではないですし、HTMLタグのミスにつながる可能性もあります（ulタグの直下にliタグ以外を置いているのにそれに気づけない、など）

この課題をどう解決するか

ではこの課題を解決/緩和するにはどうすればいいのでしょうか？

自分が導入している方法は、各styled-componentsの定義命名の先頭にHTMLタグ名を大文字で入れる、というシンプルな命名規則です。

実際のコードは以下の通りです。

先頭にHTMLタグ名を入れる


// 外部コンポーネントの読み込み
import { OuterComponent } from '../components/OuterComponent';

// styled-componentsの定義
const SECTION_Wrapper = styled.section` 略 `; // 先頭にタグ名である「SECTION」を付与
const H2_Title = styled.h2` 略 `;
const DIV_Inner = styled.div` 略 `;
const UL_Items = styled.ul` 略 `;
const LI_Item = styled.li` 略 `;

export const MyComponent1 = () => {
　return (
　　<SECTION_Wrapper>
　　　<H2_Title></H2_Title>  // 「sectionの中のh2である」ことが分かりやすい
　　　<DIV_Inner>
       <OuterComponent /> // 外部コンポーネントは先頭にタグ名が付いていないので区別可能
　　　　<UL_Items>
　　　　　<LI_Item></LI_Item>
　　　　　<LI_Item></LI_Item>
　　　  </UL_Items>
     </DIV_Inner>
  </SECTION_Wrapper>
　);
};

若干の冗長さはありますが、returnの中を見るだけで得られる情報量が通常よりも増えています。

もちろん素のHTMLに比べると美しいとは言い難いですが、命名規則のみで改善できる範囲では悪くない手法かなと思います。

最後に

CSSの課題を解決してくれるstyled-components。
「なんとなく見づらい」から使わなくなってしまうのは非常にもったいないと思います。

この記事で紹介したような命名規則を使うなどの工夫をしながら、うまく使っていけると良いですね。

この記事をシェアしてくれると小躍りします