React Academy · レッスン

Args、Controls、Actions Addon

argsでstoriesをインタラクティブにし、actions addonでコンポーネントのイベントをログ出力します。

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

Argsとは

Argsはstoryへの入力（props）です。Storybookはargsオブジェクトを使ってコンポーネントを描画し、Storybook UIでpropsをリアルタイムに編集できるControlsパネルを動かします。

Argsの定義

storyオブジェクトでargsを設定します。StorybookはTypeScriptのprop型からコントロールの種類を推測します。

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

Controlsパネル

argsを定義すると、Storybookはキャンバスの下にあるControlsパネルにインタラクティブなコントロールを表示します。コントロールを変更すると、新しいpropsでstoryが再描画されるため、コードを変更する必要はありません。

コントロールをカスタマイズするArgTypes

metaでargTypesを使用すると、Controlsでのpropの表示方法（型、選択肢、説明、デフォルト値）をカスタマイズできます。

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger'],
      description: 'Visual style of the button',
    },
    size: {
      control: { type: 'radio' },
      options: ['small', 'medium', 'large'],
    },
    disabled: { control: 'boolean' },
    label: { control: 'text' },
  },
};

ControlsからのArgsの非表示

argTypesでcontrol: falseを設定すると、Controlsパネルでpropを非表示にできます。内部用のpropや関数に便利です。

argTypes: {
  onClick: { control: false },
  className: { table: { disable: true } },
},

Actionsアドオン

Actionsアドオン（addon-essentialsの一部）は、Actionsパネルにpropの関数呼び出しを記録します。@storybook/testのfn()を使用すると、パネルに表示されるスパイ関数を作成できます。

import { fn } from '@storybook/test';

const meta: Meta<typeof Button> = {
  component: Button,
  args: {
    onClick: fn(),     // click events appear in Actions panel
    onHover: fn(),
  },
};

argTypesによるActionsの自動設定

argTypes: { onClick: { action: 'clicked' } }を使用すると、fn()をインポートせずにアクションハンドラーを自動作成できます。

const meta: Meta<typeof Select> = {
  component: Select,
  argTypes: {
    onChange: { action: 'changed' },
    onBlur: { action: 'blurred' },
  },
};

グローバルArgs

preview.tsでargsを設定すると、すべてのstoryにグローバルに適用できます。すべてのコンポーネントに影響するテーマ、ロケール、ビューポートのargsなどに便利です。

// .storybook/preview.ts
export const globalTypes = {
  locale: {
    description: 'Internationalization locale',
    defaultValue: 'en',
    toolbar: {
      icon: 'globe',
      items: ['en', 'fr', 'de'],
    },
  },
};

Storybookツールバー

toolbar設定を持つグローバルargsはStorybookツールバーにボタンとして表示され、テーマ、ロケール、ブレークポイントを全体的に切り替えられます。

Argsの合成

別のstoryからargsをスプレッドして、そのstoryを基に新しいstoryを作成できます。バリエーションstoryを作成する際の重複を減らせます。

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

export const PrimaryLoading: Story = {
  args: { ...Primary.args, loading: true },
};

export const PrimaryDisabled: Story = {
  args: { ...Primary.args, disabled: true },
};

コントロール値のマッピング

argTypesでmappingを使用すると、人が読みやすいコントロールの選択肢を実際のprop値（アイコンやコンポーネントなど）にマッピングできます。

argTypes: {
  icon: {
    options: ['Star', 'Heart', 'None'],
    mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
    control: { type: 'select' },
  },
},

クイックチェック

@storybook/test の fn() 関数をストーリーの arg として使用すると、何が起こりますか？

まとめ

Args は、Controls パネル（プロパティをリアルタイムで編集する機能）と Actions addon（イベントロガー）の両方を動かします。より豊富なコントロールを作成するには argTypes で arg の型を定義し、アクションを記録するには @storybook/test の fn() を使用します。また、ストーリー間で args を合成すると重複を減らせます。

よくある質問

「Args、Controls、Actions Addon」レッスンは無料ですか？

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

「Args、Controls、Actions Addon」で何を学びますか？

argsでstoriesをインタラクティブにし、actions addonでコンポーネントのイベントをログ出力します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Args、Controls、Actions Addon」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← React Academyに戻る