CSS Academy · レッスン

Styled-components: Tagged Template Literals

styled-componentsライブラリで、タグ付きテンプレートリテラルを使ったスタイル付きReactコンポーネントを作成します。

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

Styled-components とは

styled-components は React 向けの CSS-in-JS ライブラリです。タグ付きテンプレートリテラルを使って JavaScript ファイル内に直接 CSS を記述できます。各 styled component には、自動的にスコープ化された一意のクラス名が付与されます。

タグ付きテンプレートリテラル

JavaScript のタグ付きテンプレートリテラルを使うと、関数でテンプレート文字列を処理できます。styled-components はこれを使って CSS を解析します。

import styled from 'styled-components';

const Button = styled.button`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
`;

// Usage in JSX:
// <Button>Click me</Button>

props による動的なスタイル

テンプレートリテラル内でコンポーネントの props にアクセスして、動的なスタイルを適用できます。

const Button = styled.button`
  background: ${props => props.variant === 'danger' ? 'crimson' : 'royalblue'};
  color: white;
  opacity: ${props => props.disabled ? 0.5 : 1};
`;

// <Button variant="danger">Delete</Button>

CSS カスタムプロパティという選択肢

より単純な動的値には、props によるロジックより CSS カスタムプロパティを優先してください。こちらの方がパフォーマンスに優れ、JavaScript による補間を減らせます。

const Card = styled.div`
  background: var(--card-bg, white);
  color: var(--card-text, #111);
`;
// Set variables via style prop: <Card style={{ '--card-bg': 'navy' }}>

スタイルを拡張する

既存の styled component を拡張してスタイルを追加します。

const PrimaryButton = styled(Button)`
  background: royalblue;
  font-weight: bold;
`;

const DangerButton = styled(Button)`
  background: crimson;
`;

ネストと & セレクター

styled-components は、親要素を参照する & を使った Sass 風のネストをサポートしています。

const Nav = styled.nav`
  display: flex;

  & a {
    color: white;
    text-decoration: none;
  }

  & a:hover {
    text-decoration: underline;
  }
`;

createGlobalStyle

createGlobalStyle を使って、グローバルスタイル（リセットやベーススタイル）を定義します。

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: system-ui, sans-serif; margin: 0; }
`;
// Include <GlobalStyle /> in your app root

ThemeProvider

styled-components は、コンポーネントからテーマトークンにアクセスするための ThemeProvider を提供します。

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: 'royalblue' } };

const Button = styled.button`
  background: ${({ theme }) => theme.colors.primary};
`;

// <ThemeProvider theme={theme}><App /></ThemeProvider>

パフォーマンスに関する考慮事項

styled-components は実行時にクラス名を生成します。パフォーマンスが重要なアプリケーションでは、Babel プラグインを使った静的抽出や、Vanilla Extract、CSS Modules などのゼロランタイムの代替手段への切り替えを検討してください。

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

styled-components は ServerStyleSheet API による SSR をサポートしています。サーバーでのレンダリング中にスタイルを収集して挿入し、スタイルが適用されていないコンテンツが一瞬表示される現象を防ぎます。

代替手段とエコシステム

styled-components のエコシステムには、emotion（類似した API）、linaria（ゼロランタイム）、Vanilla Extract（型安全）、Panda CSS（ユーティリティファースト）があります。それぞれ、実行時のオーバーヘッド、DX、パフォーマンスのバランスが異なります。

クイックチェック

styled-components は、コンポーネント間でクラス名が衝突するのをどのように防ぎますか？

まとめ

styled-components はタグ付きテンプレートリテラルを使って、React コンポーネントとともに CSS を定義します。JavaScript の補間により、props から動的なスタイルを設定できます。コンポーネントは拡張やネストが可能で、ThemeProvider によってテーマにも対応できます。本番環境では、静的抽出のための Babel プラグインとサーバーサイドレンダリングのサポートを検討してください。ゼロランタイムの代替手段としては、Vanilla Extract や CSS Modules を評価してください。

よくある質問

「Styled-components: Tagged Template Literals」レッスンは無料ですか？

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

「Styled-components: Tagged Template Literals」で何を学びますか？

styled-componentsライブラリで、タグ付きテンプレートリテラルを使ったスタイル付きReactコンポーネントを作成します。ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Styled-components: Tagged Template Literals」レッスンにはどのくらい時間がかかりますか？

ほとんどの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に戻る