Frontend Academy · レッスン

Storybook：Stories・Controls・Docs

各コンポーネントの状態に対するStoriesを記述し、Controlsでpropsをインタラクティブに調整して、JSDocとargTypesからDocsページを生成します。

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

Storybookとは

Storybookは、アプリから分離してUIコンポーネントを開発するための作業環境です。「ストーリー」と呼ばれる、さまざまな状態での各コンポーネントの使用例を記述し、開発サーバーで閲覧します。デザインシステムには欠かせません。

Storybookを使う理由

1）アプリのコンテキストを用意せず、コンポーネントを分離して開発できます。2）ローディング中、エラー、空の状態など、すべての状態を視覚的に確認できます。3）デザイナーやプロダクトマネージャーがカタログを閲覧できます。4）ドキュメントを生成できます。5）ビジュアルリグレッションテストを自動化できます。

Storybookのインストール

公式の初期化コマンドを使用してください。フレームワークが検出され、すべてが設定されます。

npx storybook@latest init

# Adds:
#  .storybook/        config
#  src/stories/       example stories
#  scripts: 'storybook' and 'build-storybook'

npm run storybook   # opens http://localhost:6006

ストーリーを書く（CSF 3.0）

Component Story Format 3では、default exportがメタデータを、名前付きexportがストーリーを表します。

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Atoms/Button',
  component: Button,
  tags: ['autodocs']
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: { label: 'Save', variant: 'primary' }
};

export const Disabled: Story = {
  args: { label: 'Save', variant: 'primary', disabled: true }
};

コンポーネントごとに複数のストーリーを作る

重要な状態ごとに1つのストーリーを用意します。デフォルト、ホバー、ローディング中、エラー、空、データありなどです。レビュー担当者はクリックして確認するだけで、すべてのバリエーションを一目で確認できます。

export const Loading: Story = { args: { state: 'loading' } };
export const Error: Story    = { args: { state: 'error', message: 'Network failed' } };
export const Empty: Story    = { args: { items: [] } };
export const Populated: Story = { args: { items: mockItems } };

Controls（Args Table）

StorybookのControlsアドオンは、argsオブジェクトをインタラクティブなフォームコントロールに変換します。UI上でpropの値をリアルタイムに変更し、エッジケースをテストできます。

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger']
    },
    onClick: { action: 'clicked' }
  }
};

Actionsアドオン

action()を使用すると、Actionsパネルにイベントハンドラーの呼び出しを記録できます。実際の状態管理を接続せずにコールバックをテストするのに適しています。

argTypes: {
  onClick: { action: 'clicked' },
  onChange: { action: 'changed' }
}

Autodocs — 自動生成ドキュメント

メタデータにtags: ['autodocs']を追加すると、Storybookがコンポーネントのpropsテーブル、説明、実行可能な使用例を含むDocsページを生成します。

リッチなドキュメントのためのMDX

MDX（Markdownと埋め込みJSX）でコンポーネントのドキュメントを記述します。説明文と実際に動くコンポーネントの使用例を組み合わせられます。

{/* Button.mdx */}
import { Meta, Story, Canvas } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';

<Meta of={ButtonStories} />

# Button

The primary action element.

## Variants
<Canvas of={ButtonStories.Primary} />
<Canvas of={ButtonStories.Secondary} />

デコレーター — ストーリーをコンテキストでラップする

デコレーターを使用して、ストーリーをプロバイダー（Theme、Router、Redux）でラップします。

export const decorators = [
  (Story) => (
    <ThemeProvider theme={lightTheme}>
      <Story />
    </ThemeProvider>
  )
];

ビジュアルリグレッションテスト

Storybookチームが提供するChromaticは、コミットごとにすべてのストーリーのスクリーンショットを取得し、ベースラインとの差分を比較します。ビジュアルリグレッションを自動的に検出できます。

Storybookをデプロイする

npm run build-storybookを実行すると、storybook-static/に静的サイトが生成されます。Netlify、Vercel、GitHub Pagesなどにデプロイすれば、開発者以外の人もコンポーネントカタログを閲覧できます。

クイックチェック

コンポーネントのStorybookメタデータにtags: ['autodocs']を追加すると、何が起こりますか？

振り返り：Storybook

UIコンポーネントを分離して開発するための作業環境です。CSF 3.0では、default exportがメタ、名前付きexportがストーリーを表します。ControlsにはargTypesを使用します。コールバックの記録にはaction()を使用します。自動生成ドキュメントにはtags: ['autodocs']を使用します。リッチな説明文とJSXにはMDXを使用します。デコレーターでプロバイダーを注入します。ビジュアルリグレッションにはChromaticを使用します。静的ホスティングにはBuild-storybookを使用します。

よくある質問

「Storybook：Stories・Controls・Docs」レッスンは無料ですか？

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

「Storybook：Stories・Controls・Docs」で何を学びますか？

各コンポーネントの状態に対するStoriesを記述し、Controlsでpropsをインタラクティブに調整して、JSDocとargTypesからDocsページを生成します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Storybook：Stories・Controls・Docs」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Frontend Academyに戻る