コンポーネントにおける各スタイリングライブラリの責務
Note
#設計
#React
React にはスタイリングライブラリの種類が様々あり、これが一番良いといったものがあるわけではなく、最終的には好みで決定される場面が多いかと思います。 しかし、これらのライブラリはそれが担うコンポーネントにおける責務が異なるため、あるライブラリでは使用される方法が他のライブラリではアンチパターンになり得るため注意が必要です。
そこで、ここではコンポーネントにおける責務を定義し、それらのどこを各スタイリングライブラリが担っているのかについて随時まとめていきます。
Preliminaries
ここでは、Vue.js | Single-File Components を参考にして、コンポーネントは props を受け取り次の 3 つを果たす責務があると定義します:
- View - JSX.Element などの骨格の定義
- Logic - React Hook などの処理の定義
- Styling - View に当てる装飾の定義
![react component の責務](/img/writings/20220529/responsibility-of-react-component.png)
styled-components
![](https://styled-components.com//atom.png)
![styled-components](https://styled-components.com/meta.png)
![styled-components の構造](/img/writings/20220529/c1.png)
styled-components はコンポーネントをラップする形でスタイリングを決定するやり方であり、
具体的には、コンポーネントの props に新たに props を追加し、それらの値からスタイルを決定して className
としてコンポーネントの props へスタイルに対応するクラス名を渡しています。
構造を見るに、styled-components におけるスタイリングの責務はコンポーネントの props に少し影響していることがわかります。
CSS Modules
![CSS Modules の構造](/img/writings/20220529/c2.png)
CSS Modules は View のクラス名などの CSS Selector に紐づけてスタイリングをします。 あくまでスタイリングの指定は CSS ファイルなどで行い、View とのインターフェースに当たるのが CSS Selector になります。
tailwindcss
![Tailwind CSS](https://tailwindcss.com/_next/static/media/social-card-large.a6e71726.jpg)
![tailwindcss の構造](/img/writings/20220529/c3.png)
tailwindcss は CSS Modules のようにクラス名を紐付けてスタイリングをしますが、その粒度が小さいため、スタイリングの責務がほとんど View に移ります。