【ITニュース解説】EffCSS lazy mode: emit exactly what's used

Webサイトやアプリケーションを開発する際、ユーザーが目にする見た目を司るのがCSS（カスケーディング・スタイル・シート）という技術だ。CSSは、色や形、配置、アニメーションといった視覚的な要素を定義し、ユーザー体験を大きく左右する。しかし、大規模なアプリケーションになると、CSSのコード量も膨大になりがちで、その全てが実際に使われているわけではないという問題が生じることがある。使われていないCSSが含まれていると、Webページの読み込みに時間がかかったり、ユーザーのデータ通信量が増加したりして、アプリケーションのパフォーマンスに悪影響を及ぼす可能性がある。システムエンジニアを目指す者として、このようなパフォーマンスの最適化は重要な課題である。

近年、この課題を解決するためのアプローチの一つとして、Tailwind CSSのようなユーティリティファーストなCSSフレームワークが注目されている。Tailwind CSSは、ボタンの色や文字のサイズなど、細かなスタイルを直接HTML要素に適用できるユーティリティクラスを多数提供する。このフレームワークの大きな特徴は、開発者が定義したユーティリティクラスの中から、実際にHTMLで使われているものだけを抽出して最終的なCSSファイルを生成する点にある。これにより、不要なCSSがファイルに含まれるのを防ぎ、CSSのファイルサイズを大幅に削減できる。EffCSSは、この「実際に使われているものだけを出力する」という考え方をユーティリティベースのスタイル構成に持ち込み、さらに「必要になった時だけ」生成するという「レイジーモード（lazy mode）」を導入することで、CSSの最適化を推進する。

EffCSSは、JavaScriptのコードを使ってCSSのスタイルを定義できるライブラリだ。JavaScriptの柔軟な記述でCSSを生成できるため、動的なスタイル作成やコンポーネントごとのスタイル管理がしやすくなるメリットがある。例えば、アニメーションのスタイルをEffCSSで定義するケースを考えてみよう。同僚がAnimate.cssのようなアニメーションライブラリが好きで、pulseやheartBeatといった複数のアニメーションをEffCSSのanimationユーティリティを使って定義したとする。これらのアニメーションは、それぞれ特定の動きを定義するCSSのキーフレームアニメーションとして記述される。

Copy
1import { animation } from 'effcss';
2export const pulse = animation({ /* ... pulseアニメーションの定義 ... */ });
3export const heartBeat = animation({ /* ... heartBeatアニメーションの定義 ... */ });

次に、開発者が自分のコンポーネントでheartBeatアニメーションを使いたい場合、EffCSSのclassNameユーティリティを使って、このアニメーションを適用するCSSクラスを定義する。例えば、アニメーション名にheartBeat()を渡し、アニメーションの持続時間などを設定して、heartBeatClsというクラスを作成する。さらに、アニメーションの持続時間が異なるshortHeartBeatClsやlongHeartBeatClsといった派生クラスも定義したとする。

Copy
1import { className } from 'effcss';
2import { heartBeat } from '../animations';
3
4export const heartBeatCls = className({
5  animationName: heartBeat(),
6  // ...
7});
8// ... 他のクラス定義 ...

そして、最終的にReactなどのコンポーネントでこのheartBeatClsを利用する。

Copy
1import { heartBeatCls } from '../styles/heartbeat-variants';
2const cls = `another-cls ${heartBeatCls}`;
3export const HeartBeatBase = () => {
4  return <div>💚</div>
5};

この状態でアプリケーションをビルド（Webアプリケーションを公開できる形式に変換する作業）すると、開発者は驚くかもしれない。なぜなら、実際にコンポーネントで使ったのはheartBeatClsだけなのに、同僚が定義したpulseアニメーションや、使っていないshortHeartBeatCls、longHeartBeatClsといったクラス全てが最終的なCSSファイルに含まれてしまうからだ。デフォルトでは、EffCSSはインポートされたスタイルファイルに含まれる定義は全て使われるものと仮定してCSSを生成してしまうのである。これはCSSのファイルサイズが増大する原因となり、せっかくのユーティリティベースのメリットが半減してしまう。

この問題を解決するためにEffCSSが提供するのが「レイジーモード」だ。レイジーモードには、特定のスタイルだけを対象にする方法と、ライブラリ全体の挙動を変更する方法の二種類がある。

一つ目の方法は、特定のEffCSSユーティリティを「レイジー（遅延）」バージョンに置き換える「Lazy utils」の利用だ。EffCSSはclassNameだけでなく、lazyClassNameやclassName.lazyといったレイジー版のユーティリティを提供する。これらのユーティリティを使うと、CSSの生成が遅延される。具体的には、これらのレイジーユーティリティは、CSSクラス名やスタイルを直接生成するのではなく、それらを生成するための「関数」を返す。この関数が実際に呼び出されるか、文字列として扱われる（例えば、テンプレートリテラル${fn}の中で使われる）まで、実際のCSSは生成されないのだ。

先ほどのheartBeatClsの例で考えてみよう。もしclassNameをclassName.lazyに置き換えると、コードは次のようになる。

Copy
1export const heartBeatCls = className.lazy({/* ... */});
2// ... 他のクラス定義も同様に lazy 版を使う ...

この変更に伴い、コンポーネントでheartBeatClsを使う際も調整が必要になる。heartBeatClsはもはや直接のクラス名ではなく、クラス名を生成する関数になったため、実際にクラス名を取得するにはheartBeatCls()のように関数を呼び出す必要がある。

Copy
1import { heartBeatCls } from '../styles/heartbeat-variants';
2// heartBeatCls はレイジー関数になった
3const cls = `another-cls ${heartBeatCls()}`; // 関数を呼び出してクラス名を取得
4// ...

この変更を加えてビルドを実行すると、使われなかったshortHeartBeatClsやlongHeartBeatClsといったクラスは最終的なCSSファイルから削除される。これは大きな改善だが、まだ課題が残る。それは、同僚が定義したpulseアニメーションなど、使っていないアニメーションの定義が依然としてCSSファイルに含まれてしまうことだ。className.lazyはクラス名の生成を遅延させるが、animationユーティリティ自体はデフォルトではレイジーではないため、インポートされている全てのアニメーション定義が生成されてしまうのだ。

このアニメーションの定義まで含めて全てをレイジーにするには、二つ目の方法である「Lazy configuration（全体設定）」を利用する。EffCSSにはconfigureという関数があり、これを使ってライブラリ全体の挙動を変更できる。configure({ lazy: true })という設定を行うと、variable、animation、classNamesなど、関数リゾルバー（関数を返すユーティリティ）を返す全てのEffCSSユーティリティが、自動的にレイジーバージョンとして振る舞うようになる。つまり、これらのユーティリティは結果が実際に使用されるまでCSSの生成を遅らせるのだ。

この設定の素晴らしい点は、lazyClassNameのような特別なlazy*プレフィックス付きのユーティリティ名を使う必要がなく、今まで通りanimationやclassNameといった通常の名前のユーティリティを使い続けられることだ。ただし、注意点が一つある。classNameやattributeユーティリティは、関数リゾルバーではなく、直接文字列（クラス名）やオブジェクト（属性）を返すため、この全体設定の影響を受けず、これまで通り即座にCSSを生成する。そのため、これらのユーティリティをレイジーにしたい場合は、引き続きclassName.lazyのような個別指定を使う必要がある。

このconfigure({ lazy: true })の設定は、アプリケーションの起動時、具体的にはEffCSSのスタイルが作成されるよりも前に呼び出す必要がある。例えば、Reactアプリケーションであれば、ルートコンポーネントをレンダリングする前に設定を行う。

Copy
1import { createRoot } from 'react-dom/client';
2import { configure } from 'effcss';
3// スタイルシートが作成される前に呼び出す
4configure({
5  lazy: true
6});
7const domNode = document.getElementById('root');
8const root = createRoot(domNode);
9root.render(<App />);

この設定を適用して最終ビルドを行うと、生成されたCSSファイルには、実際にアプリケーションで使われているスタイル定義だけが含まれるようになる。同僚が作ったpulseアニメーションも、もしアプリケーションのどこでも使われていなければ、最終的なCSSには含まれない。これにより、EffCSSを使ってどれだけ多くの変数やアニメーション、フォントが定義されていても、実際に使用されるものだけが最終的なCSSとして出力され、アプリケーションのファイルサイズを最小限に抑えることができる。

EffCSSのレイジーモードを効果的に使うためのポイントがいくつかある。特定のCSSルールだけをレイジーにしたい場合や、アプリケーション全体のlazy設定とは独立して確実に遅延させたい場合は、lazyClassNameのような個別のlazy*ユーティリティを使うのが適している。一方、アプリケーション全体で「実際に使われているものだけを出力する」という挙動を実現したい場合は、configure({ lazy: true })を設定するのが最も手軽で強力な方法だ。特にvite-plugin-effcssのようなツールと組み合わせると、クライアントに配信されるCSSを、実際にレンダリングされたものだけに限定できる。また、サーバーサイドレンダリング（SSR）を行う場合、サーバー側とクライアント側で同じlazy: true設定を使うことで、生成されるスタイルシートが一致することを保証できる。

最も重要な点は、レイジーモードが、特にサードパーティ製のEffCSSスタイルをアプリケーションに取り込む際に、不要なCSSでアプリケーションを肥大化させないための最も簡単な方法であるということだ。もし、自分で作成したルールしか使っておらず、全ての定義が常に使われることがわかっている場合は、このモードを有効にする必要はないかもしれない。しかし、複雑なプロジェクトや多数のスタイルバリエーションを扱う場合には、EffCSSのレイジーモードはWebアプリケーションのパフォーマンスを大きく向上させる強力なツールとなるだろう。システムエンジニアにとって、このようにコードの効率化とパフォーマンス向上を両立させる技術は、常に注目すべきテーマである。