Vue Academy · レッスン

Controls、Actions、Args

Controls UIのためのargTypes、イベント記録用Actions addon、インタラクションテスト用のplay()

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

インタラクティブなControls

StorybookのControlsパネルは、ストーリーのargsを操作可能なフォームフィールドに変換します。コードを編集せずにpropsを変更すると、コンポーネントが即座に再レンダリングされます。これらのフィールドはargTypesで設定します。

argTypesを定義する

argTypesでは、各propのコントロールの種類、選択肢、ドキュメントを指定します。argsと並べてmetaオブジェクトに記述します。

export default {
  component: Button,
  argTypes: {
    label: { control: "text" },
  },
}

テキストとブール値のControls

コントロールの種類によってウィジェットが決まります。textでは入力ボックス、booleanではトグルスイッチが表示されます。

argTypes: {
  label: { control: "text" },
  disabled: { control: "boolean" },
}

optionsを使ったSelect Controls

値の候補が決まっている場合は、options配列とselectコントロールを使用します。パネルにドロップダウンが表示されます。

argTypes: {
  variant: {
    control: "select",
    options: ["primary", "secondary", "danger"],
  },
}

カラーと数値のControls

その他にも便利なコントロールがあります。colorではカラーピッカー、number（またはrange）では数値入力が表示されます。

argTypes: {
  background: { control: "color" },
  count: { control: { type: "range", min: 0, max: 10 } },
}

Actionsアドオン

Actionsアドオンはパネルにイベントを記録するため、コンポーネントが正しくイベントを発行しているか確認できます。fn()を使って、argをログ出力関数に接続します。

import { fn } from "@storybook/test"

export default {
  component: Button,
  args: {
    onClick: fn(),
  },
}

fn()の仕組み

fn()は、Actionsパネルへの呼び出しを記録するスパイを作成します。コンポーネントがハンドラーを呼び出すと（たとえば、発行されたclickをonClickに対応付けた場合）、呼び出しと引数を確認できます。

args: {
  onSubmit: fn(),
}
// Clicking submit logs "onSubmit" with payload in the Actions panel

イベントをハンドラーに対応付ける

Vueはイベントを発行し、Storybookはon<Event>というargをそのイベントに対応付けます。updateイベントが発行されると、onUpdateのアクションargを通じて確認できます。

argTypes: {
  onUpdate: { action: "update" },
}

play関数

ストーリーには、レンダリング後に実行され、クリックや入力などのユーザー操作をシミュレートして結果を検証するplay関数を含めることができます。これにより、ストーリーがインタラクションテストになります。

import { expect, userEvent, within } from "@storybook/test"

export const Clicks = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)
    await userEvent.click(canvas.getByRole("button"))
  },
}

playで検証する

playの中では、expectを使って検証したり、アクションが呼び出されたことを確認したりできます。インタラクションテストをStorybook上で直接確認できます。

export const Submits = {
  args: { onSubmit: fn() },
  play: async ({ args, canvasElement }) => {
    const canvas = within(canvasElement)
    await userEvent.click(canvas.getByRole("button"))
    await expect(args.onSubmit).toHaveBeenCalled()
  },
}

Controls + Actions + playが重要な理由

これらを組み合わせると、ストーリーが強力になります。Controlsでpropsを試し、Actionsでイベントの発行を確認し、playで操作と検証を自動化できます。ドキュメントとテストを1か所にまとめられます。

確認テスト

ControlsとActionsについての理解度を確認しましょう。

まとめ

Controls、Actions、argsについて学びました。

argTypesでControlsパネルを設定します。text、boolean、select（options付き）、color、number/rangeを指定できます。
Actionsアドオンはイベントを記録します。fn()でハンドラーを接続するか、actionでイベントを対応付けます。
play関数はレンダリング後に実行され、userEventで操作をシミュレートし、expectで検証します。
これらを組み合わせることで、ストーリーを操作可能で検証しやすく、自己完結したドキュメントにできます。

よくある質問

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

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

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

Controls UIのためのargTypes、イベント記録用Actions addon、インタラクションテスト用のplay() ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

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

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

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

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

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

← Vue Academyに戻る