CSS Academy · レッスン

Vanilla Extract: ゼロランタイムCSS-in-JS

Q: 「Vanilla Extract: ゼロランタイムCSS-in-JS」で何を学びますか？

Vanilla Extractで型安全なCSSを記述し、ビルド時に静的なCSSファイルを生成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vanilla Extractで型安全なCSSを記述し、ビルド時に静的なCSSファイルを生成します。

「Vanilla Extract: ゼロランタイムCSS-in-JS」はCoddyKit上の無料CSS Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

Vanilla Extractとは

Vanilla Extractは、ランタイムのオーバーヘッドがゼロのCSS-in-JSライブラリです。CSSをTypeScriptで定義し、ビルド時に静的なCSSファイルへコンパイルします。これにより、ランタイムでスタイルを注入することなく型安全性を得られます。

基本原則

styled-componentsやEmotionとは異なり、Vanilla Extractは完全にビルド時に実行されます。JavaScriptのインポートはスタイルを記述するためのAPIであり、出力されるのは通常のCSSファイルです。クライアント側でスタイルを適用するためにJavaScriptが実行されることはありません。

ファイルの命名規則

Vanilla Extractのファイルには.css.ts拡張子を使用します。

// button.css.ts
import { style } from '@vanilla-extract/css';

export const button = style({
  background: 'royalblue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '4px',
  cursor: 'pointer',
  ':hover': {
    background: '#2563eb'
  }
});

コンポーネントで使用する

エクスポートされたクラス名をインポートして適用します。

import { button } from './button.css.ts';

function Button({ children }) {
  return <button className={button}>{children}</button>;
}

テーマコントラクト

Vanilla Extractで最も強力な機能です。テーマコントラクト（トークンの構造）を定義し、それを実装する複数のテーマを作成します。

import { createTheme, createThemeContract } from '@vanilla-extract/css';

const contract = createThemeContract({
  color: { primary: null, bg: null }
});

export const lightTheme = createTheme(contract, {
  color: { primary: '#3b82f6', bg: '#ffffff' }
});

export const darkTheme = createTheme(contract, {
  color: { primary: '#60a5fa', bg: '#111827' }
});

styleVariants

スタイルを重複させずに、複数のバリアントを作成します。

import { styleVariants } from '@vanilla-extract/css';

export const variants = styleVariants({
  primary: { background: 'royalblue' },
  danger:  { background: 'crimson' },
  ghost:   { background: 'transparent', border: '1px solid royalblue' }
});

// <Button className={variants[variant]}>

@vanilla-extract/recipesでレシピを作成する

recipesパッケージのrecipe関数を使うと、ベーススタイルとバリアントを洗練された形で組み合わせられます。

import { recipe } from '@vanilla-extract/recipes';

export const button = recipe({
  base: { padding: '10px 20px', borderRadius: '4px' },
  variants: {
    color: {
      primary: { background: 'royalblue', color: 'white' },
      danger:  { background: 'crimson', color: 'white' }
    },
    size: {
      sm: { fontSize: '0.875rem' },
      lg: { fontSize: '1.25rem' }
    }
  }
});

ユーティリティクラスのためのSprinkles

@vanilla-extract/sprinklesは、トークンセットからユーティリティクラスを生成します。型安全でランタイムコストのないTailwindのような機能です。

型安全性

スタイルはTypeScriptオブジェクトであるため、CSSプロパティ名と値に対してIDEの完全な自動補完と型チェックを利用できます。プロパティ名の誤りは、ランタイムではなくビルド時に検出されます。

ビルドツールとの統合

Vanilla Extractは、専用アダプターを通じてVite、webpack、esbuild、Next.jsと統合できます。抽出されたCSSは静的ファイルとして配信されます。

Vanilla Extractを選ぶ場面

次の要件がある場合は、Vanilla Extractを選択します。

スタイルに対する完全なTypeScript型安全性
CSS-in-JSのランタイムオーバーヘッドがゼロ
最大限のパフォーマンスを実現する静的CSS出力
型チェックされたトークンコントラクトによる堅牢なテーマシステム

確認問題

styled-componentsのようなランタイムCSS-in-JSと比べた場合、Vanilla Extractのパフォーマンス上の主な利点は何ですか。

まとめ

Vanilla Extractは、TypeScriptを中心に設計された、ランタイムコストゼロのCSS-in-JSライブラリです。型安全なJavaScriptオブジェクトを使って.css.tsファイル内にスタイルを定義します。ビルド時に静的なCSSファイルが生成されます。テーマコントラクトにより、型チェックされた複数テーマのサポートを実現できます。styleVariantsとrecipeを使うと、コンポーネントのバリアントを洗練された形で扱えます。ランタイムコストがないため、パフォーマンスが重要なアプリケーションに適しています。

よくある質問

「Vanilla Extract: ゼロランタイムCSS-in-JS」レッスンは無料ですか？

はい。「Vanilla Extract: ゼロランタイムCSS-in-JS」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「Vanilla Extract: ゼロランタイムCSS-in-JS」で何を学びますか？

Vanilla Extractで型安全なCSSを記述し、ビルド時に静的なCSSファイルを生成します。ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Vanilla Extract: ゼロランタイムCSS-in-JS」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

Styled-components: Tagged Template Literals
Emotion: css()とstyled()
CSS Modules: スコープ付きスタイル
Vanilla Extract: ゼロランタイムCSS-in-JS

← CSS Academyに戻る