@storybook/addon-actionsを利用したときのTips

こんにちは。Nonです。

最近、フロントのこともガッツリと関わるようになってきました。デザインのセンスはあまりありませんが、デザインシステムがどれだけ有効なのかは、UIデザインについて少し調べてみた。の記事ですでに記述しています。

そのデザインシステムをまとめ、管理するためにstorybookを採用したのですが、そのaddonである@storybook/addon-actionsを導入したときにハマったtipsを記載しようと思います。

actionが起動しない問題

これは私がjavascriptの理解が浅いせいなのですが、下記のように書くとactionが起動されず、

copied.storiesOf('Button', module)
  .add('default', () => ({
    components: {Buttons},
    template: '<Buttons @click="action"></Buttons>',
    methods: {
      action() {
        // 起動しない
        action('clicked');
      }
    }
  }));

下記の様に書くと、起動します。

copied.storiesOf('Button', module)
  .add('default', () => ({
    components: {Buttons},
    template: '<Buttons @click="action"></Buttons>',
    methods: { action: action('clicked') /* 起動する*/ }
  }));

これ全然わからない。
誰か知っている人いたら教えて下さい。

storybookって便利

お試しに作成しただけですが、https://storybook.nozomi.bike/に自分のデザインストーリーを作って公開してます。

storybookで何ができるかを知るにはちょうどいいし、それをどのように使っているのかをしれていいと思います。

公開されているstorybookでもっといいものはたくさんあるので、それを探すのも面白いですよ。

最後に

今回はとても短い記事ですが、内容はかなりハマったことでしたので、許してください。

なぜこれが駄目だったのかわかったときは、この記事を更新します。

その時はよしなに。

.