開発覚書はてな版

個人的な開発関連の備忘録

【Vue.js】Vue.jsでStorybookを使ってみた - addon-controls編

概要

2020/8/16 6.0がリリースされたので記事を修正しました。

  • 今回はVue.js+Storybookのaddon-controlsを使用したサンプルです。(2020/6/17時点ではβ版です)
  • addon-controlsaddon-knobs と同様に Vue.jsのpropsへの値変更をStorybook上で確認できるようになります。
  • addon-knobs より設定が簡単になっています。
  • addon-docs との連携が可能です。( addon-docsのインストールが必須になります。)

github.com

  • Vue.jsでのStorybookの設定については以下の記事を参照ください。

kakkoyakakko2.hatenablog.com

kakkoyakakko2.hatenablog.com

kakkoyakakko2.hatenablog.com

実行環境

  • Node.js - 12.x

使用ライブラリ

  • vue - 2.6.x
  • @storybook/vue - 6.0.x
  • @storybook/addon-controls - 6.0.x
  • @storybook/addon-docs - 6.0.x

サンプルソース

src/components/MyButton.vue

<template>
  <button @click="onClick">{{ label }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    label: {
      type: String,
      default: 'button',
    },
  },
  methods: {
    onClick($event) {
      this.$emit('click', $event);
    },
  },
};
</script>

<style scoped>
button {
  background: yellow;
}
</style>

src/components/my-button.stories.js

  • component に対象のコンポーネントを指定します。
  • export const で定義する箇所に以下の設定をします。
    • functionの引数に(args, { argTypes }) を指定します。
    • props: Object.keys(argTypes)を宣言します。
import MyButton from './MyButton.vue';

export default {
  title: 'MyButton',
  component: MyButton,
};

export const Basic = (args, { argTypes }) => ({
  components: { MyButton },
  template: '<my-button @click="onClick" :label="label" />',
  props: Object.keys(argTypes),
});

.storybook/main.js

  • addons@storybook/addon-docs@storybook/addon-controls を追加します。
module.exports = {
  stories: ['../src/**/*.stories.[tj]s'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-controls',
  ]
};

実行

  • start-storybook -p 8080 で実行できます。(-p 8080 はポート番号)
  • http://localhost:8080/ にブラウザからアクセスすることで、Storybookの確認が出来ます。

f:id:kakkoya:20200610221138g:plain

サンプルソース一式

github.com

おわりに

  • addon-knobs より簡単にpropsの設定が出来るようになりました。
  • addon-knobs の更新はバージョン7までの予定なので、新規にStorybookを導入する場合はaddon-controlsの利用をおすすめします。