React Academy · レッスン

CSF3 Storiesの記述

Component Story Format 3を使い、default meta objectとnamed storiesをexportします。

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

CSF3とは

Component Story Format 3（CSF3）は、現在のStorybook story形式です。storyは通常のJavaScript/TypeScriptオブジェクトであり、単純なケースではrender関数は必要ありません。

Metaのエクスポート

すべてのstoryファイルには、デフォルトエクスポートとしてMetaオブジェクトが必要です。このオブジェクトでコンポーネントを説明し、storyに共通する設定を指定します。

import type { Meta } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'UI/Button',     // Storybook sidebar path
  component: Button,
  tags: ['autodocs'],     // enables auto-generated docs page
};

export default meta;

名前付きstoryのエクスポート

ファイルから名前付きエクスポートされたものが、それぞれstoryになります。CSF3では、storyはargsプロパティ（コンポーネントのprops）を持つオブジェクトです。

import type { StoryObj } from '@storybook/react';

type Story = StoryObj<typeof Button>;

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

export const Secondary: Story = {
  args: { label: 'Cancel', variant: 'secondary' },
};

export const Disabled: Story = {
  args: { label: 'Unavailable', disabled: true },
};

Storyの継承

storyはmetaオブジェクトからargsを継承します。共通のデフォルト値をmeta.argsに設定し、必要に応じてstoryごとに上書きします。

const meta: Meta<typeof Button> = {
  component: Button,
  args: {
    onClick: fn(), // from @storybook/test
    disabled: false,
  },
};

export const Large: Story = {
  args: { size: 'large', label: 'Large Button' }, // merges with meta args
};

Render関数の上書き

カスタムJSXラッパーや複数のインスタンスが必要な複雑なケースでは、storyにrender関数を指定します。

export const WithIcon: Story = {
  render: (args) => (
    <div style={{ display: 'flex', gap: 8 }}>
      <Button {...args} icon={<StarIcon />} />
      <Button {...args} icon={<HeartIcon />} />
    </div>
  ),
  args: { label: 'Action' },
};

個別のStoryへのデコレーター

storyにdecorators配列を追加すると、そのstoryだけを追加のプロバイダーやレイアウトでラップできます。

export const InsideCard: Story = {
  decorators: [
    (Story) => (
      <div style={{ padding: 24, background: '#f5f5f5' }}>
        <Story />
      </div>
    ),
  ],
  args: { label: 'Card Button' },
};

Storyのパラメーター

parametersを使用してstoryごとにアドオンを設定します。特定の状態の背景やビューポートを設定する場合などに使用できます。

export const DarkMode: Story = {
  parameters: {
    backgrounds: { default: 'dark' },
  },
  args: { label: 'Dark Button', variant: 'primary' },
};

autodocsタグ

metaにtags: ['autodocs']を追加すると、すべての名前付きstoryからpropsテーブルとライブな使用例を含むドキュメントページが自動生成されます。

状態ごとのStory

意味のあるコンポーネントの状態ごとにstoryを作成します。空、読み込み中、エラー、1件、複数件、RTLレイアウトなどです。

export const Loading: Story = { args: { isLoading: true } };
export const Error: Story = { args: { error: 'Failed to load' } };
export const Empty: Story = { args: { items: [] } };
export const WithData: Story = { args: { items: mockUsers } };

命名規則

状態を説明するPascalCaseのstory名を使用します。Defaultのような一般的な名前は避け、PrimaryDisabledやSecondaryWithIconのように具体的にしてください。

titleによるStoryのグループ化

metaのtitleでスラッシュ記法を使用すると、Storybookサイドバーに入れ子のグループを作成できます。'Forms/Input'では、Formsグループ内にInputサブグループが作成されます。

const meta: Meta<typeof TextInput> = {
  title: 'Forms/TextInput',
  component: TextInput,
};
// Sidebar: Forms → TextInput → Primary, Error, Disabled...

テストでのStoryの再利用

CSF3のstoryは通常のオブジェクトなので、ユニットテストや他のstoryにインポートして組み合わせることができます。

import { Primary } from './Button.stories';

test('renders primary button', () => {
  render(<Button {...Primary.args} />);
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

クイックチェック

CSF3では、storyのpropsや状態をどのように定義しますか。

振り返り

CSF3のstoryはargsを持つ型付きオブジェクトです。共通のデフォルト値をmeta.argsに設定し、storyごとに上書きします。カスタムJSXにはrenderを使用し、自動生成ドキュメントにはtags: ['autodocs']を追加してください。意味のあるコンポーネントの状態ごとにstoryを作成します。

よくある質問

「CSF3 Storiesの記述」レッスンは無料ですか？

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

「CSF3 Storiesの記述」で何を学びますか？

Component Story Format 3を使い、default meta objectとnamed storiesをexportします。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「CSF3 Storiesの記述」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← React Academyに戻る