モダンなWebインターフェースを構築する際、手作業でCSSを書くことはますます時間がかかり、メンテナンスも難しくなっています。Tailwind CSSのようなフレームワークは、Utility-firstというモデルでUI構築の方法を変えました。しかし、より軽量で高速、そしてほぼ無制限にカスタマイズできるソリューションを求めるなら、UnoCSSはぜひ知っておきたい存在です。
この記事では、UnoCSSとは何か、どのように動作するのか、その優れた特長、そして従来のCSSソリューションではなくUnoCSSを選ぶべきタイミングについて見ていきます。
#UnoCSSとは？
UnoCSSはAnthony Fu氏によって開発されたAtomic CSSエンジンです。従来のCSSフレームワークとは異なり、UnoCSSは固定のユーティリティセットを持ちません。代わりに、ソースコード内で使用されているクラスを解析してオンデマンドでCSSを生成します。
つまり、最初から数万ものクラスを生成するのではなく、UnoCSSはアプリケーションが実際に使用するCSSルールだけを正確に生成します。
例えば:
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg">
Save
</button>
UnoCSSはbg-blue-500、text-white、px-4、py-2、rounded-lgのCSSのみを生成します。
使用されていないユーティリティは最終的なCSSファイルには含まれません。
#UnoCSSはどのように動作するのか？
多くの従来のCSSフレームワークとは異なり、UnoCSSはエンジンとして動作します。
基本的な処理は次の4つのステップで構成されます。
- ソースコードをスキャンして使用されているクラスを見つける。
-
- 設定されたプリセットやルールに基づいて各クラスを解析する。
-
- 対応するCSSを生成する。
-
- 不要なCSSをすべて取り除く。
このアプローチにより、CSSファイルのサイズは非常に小さくなり、ビルド速度も大幅に向上します。
#UnoCSSの主な特長
#1. 非常に高いパフォーマンス
UnoCSSは速度を最優先に設計されています。何千ものコンポーネントを持つ大規模プロジェクトでも、スキャンとCSS生成にかかる時間は従来のutility-firstツールよりもはるかに高速です。これによりプロジェクトの起動時間が短縮され、開発スピードも向上します。
#2. オンデマンドでのCSS生成
UnoCSSはソースコードに実際に登場するクラスのみCSSを生成します。例えば、約200個のユーティリティクラスしか使用していない場合、最終的なCSSファイルにも約200個のルールしか含まれません。
その結果、CSSバンドルが小さくなり、ページの読み込みが速くなり、未使用のCSSも減ります。
#3. 強力なカスタマイズ性
UnoCSSの最も魅力的な点の一つが、その拡張性です。新しいユーティリティクラスの作成、ショートカットの定義、独自プリセットの作成、正規表現によるCSS生成(Dynamic Rules)、そしてカスタムバリアントの作成が可能です。
例えば:
shortcuts: {
btn: "px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600"
}
```
その後は次のように使うだけです:
```html
<button class="btn">
Save
</button>
```
ショートカットを使えば、柔軟性を保ちながらユーティリティのグループを再利用できます。
### 4. 多くのフレームワークに対応
UnoCSSはVue専用ではなく、[React](https://react.dev)、[Vue](https://vuejs.org)、[Svelte](https://svelte.dev)、[SolidJS](https://www.solidjs.com)、[Astro](https://astro.build)、[Vite](https://vite.dev)、[Nuxt](https://nuxt.com)、[Next.js](https://nextjs.org)、[Qwik](https://qwik.dev)など幅広いフレームワークで問題なく動作します。
ViteをはじめとするポピュラーなビルドツールとのUnoCSS統合により、プロジェクトへの導入は通常わずか数分で完了します。
### 5. 柔軟なプリセット
UnoCSSはプロジェクトのニーズに合わせて多くの[公式プリセット](https://unocss.dev/presets/)を提供しています。代表的なプリセットは以下の通りです。
- [Preset Wind3/Wind4](https://unocss.dev/presets/): Tailwind CSS互換のスタイルで、既存プロジェクトからの移行が容易です(これはかつてのPreset Unoの後継であり、現在は統合されて名称が変更されています)。
- [Preset Mini](https://unocss.dev/presets/mini): 小さなサイズと速度に重点を置き、最も基本的なルールとバリアントのみを含みます。
- [Preset Icons](https://unocss.dev/presets/icons): [Iconify](https://icones.js.org)を通じて、多数のアイコンセットからクラス一つでアイコンを使用できます。
例えば:
```html
<div class="i-mdi-home text-xl"></div>
```
UnoCSSは個別のSVGファイルをインストールすることなく、対応するアイコンを表示するCSSを自動生成します。
## UnoCSSとTailwind CSSの比較
| 項目 | UnoCSS | Tailwind CSS |
|---|---|---|
| 仕組み | CSSエンジン | CSSフレームワーク |
| CSS生成 | オンデマンド | オンデマンド(JIT) |
| カスタマイズ性 | 非常に高い | 高い |
| ビルド速度 | 非常に高速 | 高速 |
| ショートカット | あり | コンポーネントまたはプラグイン |
| Dynamic Rules | あり | より制限的 |
| プリセット | あり | テーマ・プラグイン |
[Tailwind CSS](https://tailwindcss.com)は大規模なエコシステム、豊富なドキュメント、そして大きなコミュニティが強みです。一方UnoCSSは、柔軟性・速度・拡張性に重点を置いており、CSS生成の方法をより深くコントロールしたいチームに向いています。
## UnoCSSはどんなときに使うべきか？
CSSサイズを最適化したい、Viteなどモダンなビルドツールを使用している、多くのカスタムユーティリティクラスを作成する必要がある、大規模プロジェクトで高速なビルドを求めている、あるいはUtility-firstモデルは好きだがTailwind CSSよりも柔軟性が欲しい場合、UnoCSSは適した選択肢です。
逆に、豊富なプラグインエコシステムが必要なプロジェクトや、すでにTailwind CSSに慣れているチームであれば、引き続きTailwindを使用するのも合理的な選択です。
## いくつかの注目すべき機能
基本的なユーティリティに加え、UnoCSSは生産性を高めるさまざまな機能を提供しています。
[Variant Groups](https://unocss.dev/transformers/variant-group)は、共通のプレフィックスを持つユーティリティをまとめることができます。
```html
<div class="hover:(bg-blue-500 text-white)">
</div>
```
[Attributify Mode](https://unocss.dev/presets/attributify)は、ユーティリティをHTML属性として記述できるようにします。
```html
<button bg="blue-500" text="white" p="4">
Save
</button>
```
Arbitrary Valuesは任意の値に対応します。
```html
<div class="w-[372px]">
</div>
```
これらの機能により、多くの場合ソースコードがより簡潔で読みやすくなります。
## まとめ
UnoCSSは単なる別のCSSフレームワークではなく、高いパフォーマンスと最大限のカスタマイズ性を実現するために設計された強力なAtomic CSSエンジンです。オンデマンドのCSS生成、高速なビルド、柔軟な拡張性により、UnoCSSはモダンなWebプロジェクトにとって魅力的な選択肢となっています。
Vite、React、Vue、あるいはモダンなエコシステムをサポートする任意のフレームワークを使用しているなら、UnoCSSは試す価値のあるツールです。特にパフォーマンスの最適化が必要なプロジェクトや、独自の方法でユーティリティシステムを構築したいプロジェクトにとって、[UnoCSS](https://github.com/unocss/unocss)は従来のソリューションに比べて大きなメリットをもたらす可能性があります。