Zenn
📚

Storybook に入門する

2023/01/07に公開
Storybook
tech

はじめに

今まではバックエンドで開発を行ってきたのですが、現場に恵まれフロントエンドも触らせていただくこととなりました。React, Next, CSS-in-JS あたりは触れていますが Storybook は触れたことがなく、今回入門していきます。

本記事は Storybook 公式ドキュメントの Get started パートをまとめたものになります。Story 定義のセクションのみ CSF 3.0 の内容で書き換えています。

メモついでにまとめた内容です。よろしくお願いします。

Storybook とは

  • Storybookは UI 開発のためのツール
  • コンポーネントを分離することで、開発をより速く、より簡単にする
  • 一度に1つのコンポーネントで作業できるようにする
    • 複雑な開発スタックを立ち上げたりする必要がない
    • データベースに特定のデータを強制的に入れたりする必要がない
    • アプリケーションを操作したりする必要がない

Storybook をインストールすると、デフォルトでサンプルのストーリー (Button, Header, Page) も付いてきます。とりあえずどんなものか触ってみたい人にもおすすめです。

Install

Storybook のインストール。

npx storybook init

Storybook の実行。

npm run storybook

プロジェクトがなくお手軽に試したい人へ

以下のコマンドでゼロから立ち上げできます。

npx create-react-app try-storybook
cd try-storybook

npx storybook init

npm run storybook

実行時の筆者のバージョンは以下です。

node: 19.3.0
webpack: 5.75.0
react: 18.2.0
storybook: 6.5.15

Story とは

  • ストーリーとは
    • コンポーネントのある1つの状態
    • コンポーネントをどのようにレンダリングするかを記述した関数
    • ファイルの拡張子は stories.js or stories.ts
  • ストーリの使い方
    • コンポーネントごとに複数のストーリーを作成し、コンポーネントの状態を記述する
    • ある1つのストーリーの結果を確認する
    • ある1つのストーリーが他のストーリーへ影響を与えていないかを確認する
  • ストーリーの画面
    • Controls
      • コンポーネントの引数を変更できる
    • Actions
      • コンポーネントの挙動結果を記録
    • より詳細な使い方は こちら

ストーリの画面は以下です。

  • Controls で props の値を変更できます
  • Actions でボタンをクリックした結果などを表示できます
  • Storybook を編集すると即座に結果が反映されます

Storybook の定義

このセクションのみ CSF 3.0 で書き換えています。

// YourComponent.stories.js|jsx

import { YourComponent } from './YourComponent';

// export default で Story のメタデータを提供
export default {
  component: YourComponent,
};

// 各 Story のテンプレートの定義
const Template = {}

// export したオブジェクトが各 Story となる
export const FirstStory = {
  ...Template,
  args: {
    // コンポーネントの引数を記述
  }
}

CSF 3.0

CSF 3.0 では、CSF 2.0 と比べて様々な変更点が加わりました。

  • named export のオブジェクト

    • named export が関数からオブジェクトとなった

    • 他のオブジェクトを展開することにより、より簡単にストーリーを再利用できるようになった

      export const PrimaryOnDark = {
  ...Primary,
  parameters: { background: { default: 'dark' } },
};

  • デフォルトの render 関数

    • レンダー関数がオプション指定となった

      export const Default = {};

    • カスタムするとき

      export const Default = {
	render: (args) => (
	<Wrap>
		<Button {...args} />
	</Wrap>
)
};

  • タイトルの自動生成

    • デフォルトでディスク上の story ファイルのパスから推測するようになった

  • play 関数

    • CSF 3.0 で追加された新機能
    • Story がレンダリングされた後に実行される小さなコードのスニペット

    export const Empty = {};

export const EmptyError = {
  ...Empty,
  play: () => userEvent.click(screen.getByText('Submit'));
}

export const Filled = {
  ...Empty,
  play: () => {
    userEvent.type(screen.getById('user'), 'shilman@example.com');
    userEvent.type(screen.getById('password'), 'blahblahblah');
  }
}

export const FilledSuccess = {
  ...Filled,
  play: () => {
    Filled.play();
    EmptyError.play();
  }
}

その他の事項

おわりに

以上、簡単にですがまとめてみました。

所感としては高機能〜便利〜と感じています。どのように運用していくのが良いのかは今後の経験から判断したいと思います。

それでは、また別の記事にて✨

Discussion