Gatsbyで作成したブログをStyled-ComponentからCSS Modulesへ移行しました
Gatsby.js
2022年9月30日(金)
こんにちは自作した当ブログでは、Styled-Componentを用いて実装していました。Styled-Componentは実装の容易さと、コードの可読性の高さが良く、好んで使っていました。ただ、Styled-Componentも欠点があり、それは実行速度とSSRとの相性の悪さです。Styled-ComponentはCSS in JSの一種で、CSSファイルではなく、jsファイル内に直接CSSを記載します。そのため、実行時にCSSへのコンパイルが必要になることから、実行速度上の問題、SSR、SSGとの相性の悪さがあります。通常のReactでは上記の欠点はそこまで気になる点ではなかったと思いますが、最近のReactフレームワークではSSR、SSGや、速度の点を重視していることから、使いづらさを感じることも多くなってきました。もちろん、実装する上ではとても便利ではあるのですが...そこで、当ブログではCSS Modulesを用いることにしました。CSS Modulesは通常のCSSのように外部CSSファイルに記述する方法ですが、違うのはクラス名が衝突しないように、呼び出し時に一意なクラス名を命名してくれる点です。参考:CSS Modulesの歴史、現在、これからこの点はStyled-Compoentと同じですね。これを用いてコンポーネント毎にCSSを定義すれば、クラス名の衝突を回避しつつ、可読性もそこまで下がらずに、通常のCSSの良い点を利用できそうですStyled-ComponentからCSS Modulesの移行ですが、Styled-Componentで利用していたCSSをそのまま流用するだけだったので、そこまで面倒ではありませんでした。