0Pricing
CSS Academy · レッスン

Emotion: css()とstyled()

Emotionのcss()ヘルパーとstyled()コンポーネントファクトリを使って、動的なスタイルを適用します。

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

Emotionとは

Emotionは、柔軟なAPIを備えたCSS-in-JSライブラリです。主に2つのアプローチがあります。css()関数（フレームワーク非依存）とstyled() API（styled-componentsに類似）です。どちらもスコープ化されたクラス名を自動生成します。

Emotionのインストール

必要に応じて、2つのパッケージから選択できます。

npm install @emotion/react    # css prop and Global
npm install @emotion/styled   # styled() API
npm install @emotion/css      # framework-agnostic

css()関数

css()関数は、CSSオブジェクトまたはテンプレートリテラルからクラス名を生成します。

import { css } from '@emotion/css';

const buttonStyle = css`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
`;

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

css()でCSSオブジェクトを使用する

オブジェクト構文はテンプレートリテラルの代替手段です。TypeScriptの自動補完が利用できるため便利です。

const cardStyle = css({
  background: 'white',
  borderRadius: '8px',
  padding: '24px',
  boxShadow: '0 4px 16px rgba(0,0,0,0.1)'
});

styled() API

Emotionのstyledは、両者の移行を容易にするため、styled-componentsと同じように動作します。

import styled from '@emotion/styled';

const Card = styled.div`
  background: white;
  border-radius: 8px;
  padding: 24px;
`;

const FeaturedCard = styled(Card)`
  border: 2px solid gold;
`;

css prop（インラインスタイル）

Emotionのcss propを使うと、追加のコンポーネントなしでJSX要素に直接スタイルを記述できます。@emotion/reactパッケージと、BabelまたはSWCのプラグインが必要です。

/** @jsxImportSource @emotion/react */

function Component() {
  return (
    <div css={{ background: 'white', padding: '24px' }}>
      Content
    </div>
  );
}

Emotionで動的なスタイルを設定する

どちらのAPIも、動的な値を受け取るprops用の関数に対応しています。

const Badge = styled.span`
  background: ${({ variant }) => variant === 'error' ? 'crimson' : 'royalblue'};
  color: white;
  padding: 2px 8px;
  border-radius: 9999px;
`;

グローバルスタイル

グローバルCSSには、@emotion/reactのGlobalを使用します。

import { Global, css } from '@emotion/react';

function App() {
  return (
    <>
      <Global styles={css`
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; }
      `} />
    </>
  );
}

Emotionとstyled-componentsの比較

Emotionとstyled-componentsのAPIはほぼ同じです。ベンチマークでは、Emotionのほうがパフォーマンスがやや優れており、バンドルサイズも小さく、追加のAPIとしてcss propも利用できます。どちらもReactアプリで実績のある選択肢です。

Emotionでキーフレームを使用する

keyframesヘルパーを使ってアニメーションを定義します。

import { keyframes, css } from '@emotion/react';

const bounce = keyframes`
  from { transform: translateY(0); }
  to   { transform: translateY(-20px); }
`;

const animated = css`
  animation: ${bounce} 1s ease-in-out infinite alternate;
`;

サーバーサイドレンダリング

Emotionは、extractCriticalToChunks()を使ってクリティカルCSSを収集し、サーバーレンダリング中に挿入することで、Next.jsのようなReactフレームワークでのSSRに対応します。

確認問題

Emotionのcss()関数とstyled() APIの主な違いは何ですか。

まとめ

Emotionには主に2つのスタイリングAPIがあります。css()はクラス名を生成し、classNameを通じて適用します。styled()はスタイル付きのReactコンポーネントを作成します。css propを使うと、インラインスタイルのように記述しながら、CSSの機能を完全に利用できます。Emotionはstyled-componentsとAPIの互換性が高く、多くの場合より高速です。どちらのアプローチも、生成したクラス名でスタイルを自動的にスコープ化します。

よくある質問

「Emotion: css()とstyled()」レッスンは無料ですか？

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

「Emotion: css()とstyled()」で何を学びますか？

Emotionのcss()ヘルパーとstyled()コンポーネントファクトリを使って、動的なスタイルを適用します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Emotion: css()とstyled()」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. Styled-components: Tagged Template Literals
  2. Emotion: css()とstyled()
  3. CSS Modules: スコープ付きスタイル
  4. Vanilla Extract: ゼロランタイムCSS-in-JS
← CSS Academyに戻る