投稿目的
- Reactにおけるスタイル適用に関する知見を有識者から得たい
本記事について
今年4月から、Tailwind CSSを使っている現場(Typescript×React)に配属されました。
一方で、今年4月から始めた個人開発(Typescript×React)においては、styled-componentsを採用しています。
2つのパッケージを使ってみて、双方に良い点があったため比較形式でご紹介したいと思います。
比較
環境構築について
styled-components
$ yarn add -D styled-components
上記コマンドでインストールするとpackage.jsonにstyled-componentsが追記されます。
これで準備は完了です。
...
"devDependencies": {
"styled-components": "^6.1.8",
...
},
...
・1コマンドで完了!
Tailwind CSS
Tailwind CSSの環境構築については、下記記事で紹介しております。styled-componentsに比べると手間がかかる印象です。
・DaisyUIなどの関連パッケージも多数! 簡単にスタイリッシュなスタイルにできる!
・アプリケーション起動時、スタイルが適用されるようにビルドを実行する必要あり。
どっちが楽?
環境構築はstyled-componentsの方が簡単そうです。
書き方について
フレックスボックスで要素を縦横中央ぞろえにしてみます。
また、第二段階としてisVisibleという変数によってスタイルを動的に変えてみます。
styled-components
import React, { ReactNode, FC, memo } from "react";
import styled from "styled-components";
type CenteredFlexBoxProps = {
children: ReactNode;
};
export const CenteredFlexBox: FC<CenteredFlexBoxProps> = memo(({ children }: CenteredFlexBoxProps) => {
return <SContainer>{children}</SContainer>;
});
const SContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
※SContainerの定義位置は任意の場所で構いません。名称も任意です。
styled-componentsは、スタイルを適用した要素を定義し、その要素をReact.FCの中で用いることによってスタイルをあてることができます。
文法としては、styled.[用いたい要素名(div, a, spanなど)]の後に``(バッククオート囲み)を付し、バッククオート囲みの中にCSSを記述していきます。
CSSをCSSの文法のまま.jsx/.tsxファイルの中に記述できます。
定義位置や変数名は自由に設定できますが、規則を定めないとカオスになりがちです。
私の場合、「styled-componentsで定義した要素は、先頭をSから始める」「定義位置はファイルの末尾にする」というように規則を定めています。
次に、動的にスタイルを変化させられるようにしてみます。
import React, { ReactNode, FC, memo } from "react";
import styled from "styled-components";
type CenteredFlexBoxProps = {
children: ReactNode;
isVisible: boolean;
};
export const CenteredFlexBox: FC<CenteredFlexBoxProps> = memo(({ children, isVisible }: CenteredFlexBoxProps) => {
return <SContainer isVisible={isVisible}>{children}</SContainer>;
});
type SContainerProps = {
isVisible: boolean;
}
const SContainer = styled.div<SContainerProps>`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
visibility: ${(props) => (props.isVisible ? "visible" : "hidden")};
`;
CenteredFlexBoxのPropsであるisVisibleをSContainerにも渡すことでスタイルを動的に変化させることができます。
・CSSの文法のまま、CSSを.jsx/.tsxファイルに記述できる!
・動的なスタイル変更もスタイリッシュに記述できる!
・記述量が多くなってしまう...
Tailwind CSS
import React, { ReactNode, FC, memo } from "react";
type CenteredFlexBoxProps = {
children: ReactNode;
};
export const CenteredFlexBox: FC<CenteredFlexBoxProps> = memo(({ children }: CenteredFlexBoxProps) => {
return <div className='flex flex-col justify-center items-center'>{children}</div>;
});
Tailwind CSSは、スタイルを適用したい要素のclassName属性に対応するclass名を設定することでスタイルをあてることができます。
コードの記述量としては、styled-componentsと比較してかなりすっきりした印象です。
こちらも、動的にスタイルを変化させられるようにしてみます。
import React, { ReactNode, FC, memo } from "react";
type CenteredFlexBoxProps = {
children: ReactNode;
isVisible: boolean;
};
export const CenteredFlexBox: FC<CenteredFlexBoxProps> = memo(({ children, isVisible }: CenteredFlexBoxProps) => {
return (
<div className={`flex flex-col justify-center items-center${ isVisible ? " visible" : " invisible"}`}>
{children}
</div>
);
});
className属性にテンプレートリテラルを設定し、isVisibleによって適用されるclass名がvisible / invisibleのどちらかに変化するようにすることができます。
ちなみに、widthやpaddingをpx単位で設定したい場合は下記にようにclassName属性を設定します。
// widthを1200px、左右のpaddingを30pxに設定
// 上下のmarginは、0.75rem(12px)に設定
return <div className='w-[1200px] px-[30px] my-3 flex flex-col justify-center items-center'>{children}</div>;
・className属性をいじるだけでスタイルを適用できる!
・コードが煩雑になりがち...
・学習コストがかかってしまう...
・細かいスタイル管理が難しいかも...
どっちが楽?
記述量としてはTailwind CSSの方がかなり少ないですね。
またDaisyUIのようなプラグインを使うと、className属性を編集するだけでスタイリッシュなデザインにすることができます。
ただし、適用したいCSSが多くなってくるとclassName属性が長くなり、コードが煩雑になってしまう可能性もあります。
styled-componentsはCSSの文法のまま記述できる点、既にある程度CSSを書ける方の学習コストは低そうです。
また、動的にスタイルを変化させる際も、スマートに記述することができます。
どちらが楽か、一概には言えませんが...
個人的にはCSSを文法そのままに記述できるstyled-componentsの方が楽しい+分かりやすくて好きです。
VSCodeとの相性について
styled-components
vscode-styled-componentsというプラグインを用いると、styled-componentsを記述する際に自動補完を用いることができます。
また、ホバーするとCSSの情報を表示してくれるようになります。
Tailwind CSS
Tailwind CSS IntelliSenseというプラグインを用いることで、こちらも自動補完を用いることができます。
ホバーすると「このclassにはどんなCSSが設定されているか?」を表示してくれます。
どっちが楽?
VSCodeとの相性としては、どちらも申し分ないと思います。
ホバーした時の内容の充実度はstyled-componentsに軍配が上がりそうです。
総評
styled-components
・環境構築が楽!
・CSSの文法のまま、CSSを.jsx/.tsxファイルに記載できる!
・動的にスタイル制御もスタイリッシュに記述できる!
・コードの記述量が増えがち...
・スタイリッシュなスタイルにしたい場合、別途Material UIなどのパッケージをインストールした方がよいかも...
Tailwind CSS
・className属性を編集するだけでスタイルを適用できる!
・Daisy UIのようなTailwind CSSを前提としたプラグインとの相性が良い!
・環境構築が手間...
・複雑なスタイル適用は難しそう...
・動的なスタイル変化はテンプレートリテラルが必要...
まとめ
いかがだったでしょうか。
Tailwind CSSがデファクトスタンダート感はありますが、CSSをCSSの文法のまま記述できるstyled-componentsは非常に楽しく、機能的でもあります。
おススメのstyled-components/Tailwind CSSの活用法や、他のおススメのパッケージがありましたらご教示いただけると幸いです!