Nuxt.js に Storybook を導入する 中編

Storybookを利用して Nuxt.js のプロジェクトに スタイルガイドを導入する手法を紹介します。中編では、Storybookのアドオンの使用方法について紹介していきます。

Storybook のアドオン

Storybook ではアドオンと呼ばれる追加機能を利用して、様々な機能を追加することが出来ます。

アドオンは 様々なものが用意されていますが JS フレームワーク毎にその対応状況も様々です。フレームワーク毎の対応表が用意されているのでAddonを探す際には参考として利用すると良いでしょう。

https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md

アドオンを利用する場合、Storybookの設定ディレクトリに addons.jsを作成して、ファイル内でアドオンを読み込む必要があります。様々なアドオンを利用する前にまず、この addons.js を作成しておきましょう。

$ touch .storybook/addons.js

addons.js が作成できたら、様々なアドオンの利用方法について実際に確認していきましょう。

StorySource

StorySource アドオンは Storybook 内に Story のソースコードを表示します。

https://github.com/storybooks/storybook/tree/master/addons/storysource

storysource アドオンをインストールするには以下のコマンドを実行します。

$ npm i @storybook/addon-storysource

モジュールのインストールが終わったら addons.js に以下の一行を追加します。

import '@storybook/addon-storysource/register';

StorySource アドオンは Webpack にフックして、任意のDecorator を生成します。Webpack 設定をカスタマイズするため .storybook/webpack.config.js 以下の記述を行いましょう。

const path = require('path')
const rootPath = path.resolve(__dirname, '../')

module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.resolve.alias['@'] = rootPath;
  defaultConfig.resolve.alias['~'] = rootPath;
  // StorySource アドオンの設定項目追加
  defaultConfig.module.rules.push({
    test: /\.stories\.jsx?$/,
    loaders: [require.resolve('@storybook/addon-storysource/loader')],
    enforce: 'pre',
  })
  return defaultConfig;
}

StoryBook を再起動すると Story のタブが追加され、Storyのソースコードが表示されるようになります。

Notes

notes アドオンは、StoryBook内に自由記述可能なテキストエリアを提供します。

https://github.com/storybooks/storybook/tree/master/addons/notes

notes アドオンをインストールするには以下のコマンドを実行します。

$ npm i @storybook/addon-notes

モジュールのインストールが終わったら addons.js に以下の一行を追加します。

import '@storybook/addon-notes/register';

次に、Notes アドオンでメッセージを表示するため storybook/index.stories.js に以下のような記述を追加します。

import { storiesOf } from '@storybook/vue';
import { withNotes } from '@storybook/addon-notes';

import Message from '../components/message.vue';

storiesOf('Message', module)
  .add('story as a component', withNotes("this is note text")(()=> ({
    components: { Message },
    template: '<message></message>'
  })));

add の第二引数に withNotes 関数を適用する事で、メッセージを指定することが出来ます。

Notesには Markdown を使用して以下のように記述する事もできます。

import { storiesOf } from '@storybook/vue';
import { withNotes } from '@storybook/addon-notes';
import someMarkdownText from './someMarkdownText.md';

import Message from '../components/message.vue';

storiesOf('Message', module)
  .add('story as a component', withNotes(someMarkdownText)(()=> ({
    components: { Message },
    template: '<message></message>'
  })));

後編では コンポーネントの区別や、Storybook の運用についてまとめていきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です