free 技術log

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をそのまま流用するだけだったので、そこまで面倒ではありませんでした。

プロフィール

author

shuta

フリーランスエンジニア

React、React系のフレームワークを用いた開発をメインに行なっています

github

カテゴリ