りゅうじの学習blog

学習したことをアウトプットしていきます。

6/14 Storybook　const Template = (args) => <Button {...args} />;について

storybook

const Template = (args) => <Button {...args} />; がよくわからなかったので調べました

まずそれぞれの関係性の把握から

StorybookとTemplate関数、そしてButtonコンポーネントの関係を示す図

  1. Storybookは、異なる状態を表現するためのargsをTemplate関数に提供します。
  2. Template関数は、これらのargsをプロパティとしてButtonコンポーネントに渡します。
  3. Buttonコンポーネントは、特定のプロパティでレンダリングされ、その結果がStorybookで視覚的に表現されます。

ここの関係性のイメージを持っていないと、コードを読んでいても、今ひとつ腑に落ちなかった私です。

コードでの例として

Buttonコンポーネントがcolorとsizeという2つのプロパティを持っているとします。Storybookを使用して、これらのプロパティの異なる組み合わせを視覚的に確認したいと思います。

// Buttonコンポーネントの定義
const Button = ({ color, size }) => <button style={{ color, fontSize: size }}>Click me</button>;

// Template関数の定義
const Template = (args) => <Button {...args} />;

// Storybookのストーリー
export const LargeBlueButton = Template.bind({});
LargeBlueButton.args = {
  color: 'blue',
  size: '20px'
};

export const SmallRedButton = Template.bind({});
SmallRedButton.args = {
  color: 'red',
  size: '10px'
};
  • LargeBlueButtonとSmallRedButtonという2つのストーリーを作成しています。
    • それぞれのストーリーは、Template関数を使用して、Buttonコンポーネントの特定の状態を作成します。argsオブジェクトは、それぞれのストーリーで異なるプロパティをButtonコンポーネントに渡します。
      • この結果、StorybookではLargeBlueButtonストーリーでは大きな青いボタンが、SmallRedButtonストーリーでは小さな赤いボタンが表示されます。

Template.bind({})は何をしているのか？

Template.bind({})はJavaScriptのbindメソッドを使用しています。bindメソッドは、関数に特定のthis値と前置引数を設定した新しい関数を作成します。

Storybookのコンテキストでは、Template.bind({})は新しい関数を作成しますが、this値は空のオブジェクト（{}）に設定されます。これは、Storybookが各ストーリーに対して新しい関数インスタンスを作成することを保証します。これにより、各ストーリーが独立して動作し、他のストーリーに影響を与えることなくargsを変更できます。

const Template = (args) => <Button {...args} />;

export const LargeBlueButton = Template.bind({});
LargeBlueButton.args = {
  color: 'blue',
  size: '20px'
};
  1. Template.bind({})を呼び出すと、Template関数の新しいインスタンスが作成されます。
  2. この新しい関数は、Template関数と全く同じ動作をしますが、this値が空のオブジェクト（{}）に設定されています。
  3. この新しい関数にargsプロパティを設定すると、それらのargsは新しい関数の呼び出しに使用されます。

独立したTemplateを生成して、argsの内容も変えられるようにするためにあるようです。

参考

ゼロから始めるStorybook入門(React編)