1分でわかるStorybook for HTML(スタイルガイドツール)の使い方

Storybookとは

Storybookとは保守性の高いUIコンポーネント(スタイルガイド)を素速く簡単に構築するためのツール。

オープンソースなので商用でも無料で使用することが可能。

Storybook for HTMLといってもHTMLだけではなくCSSやJavaScriptのスタイルガイドも構築できる。

昔はFractal、sc5-styleguide、kss-nodeなどがよく使用されていたが、2020年現在では新規のプロジェクトの場合はStorybookが使用されることが多い。

React、Vue.js、Angular用などがあるが、この記事で説明するのは一番需要がありそうなHTML用のStorybook for HTMLのインストール手順と基本的な使い方。

Vue.jsなどの場合は公式サイトトップの右下のMADE FORのVueのリンク先にある説明手順に従ってインストールする。

Storybook for HTMLをインストールする

インストールするには任意のディレクトリで以下のコマンドをターミナルで実行する。

以下は新規作成でディレクトリ名をstorybookにした場合の例

mkdir storybook; cd storybook; npx -p @storybook/cli sb init --type html && npm init -y && npm i -D @storybook/html babel-loader @babel/core style-loader css-loader sass-loader node-sass

Storybookを実行する

インストールが完了したらnpm run storybookを実行すればStorybookのデモページが表示される。

npm run storybook

Storybookのデモページはstoriesディレクトリ内のjsファイルで表示されているため、こちらに追加していくことでUIコンポーネント(スタイルガイド)を構築していくことができる。

export default {
  title: 'Demo',
};

export const Heading = () => '<h1>Hello World</h1>';

export const Button = () => {
  const btn = document.createElement('button');
  btn.type = 'button';
  btn.innerText = 'Hello Button';
  btn.addEventListener('click', e => console.log(e));
  return btn;
};

ちなみにjsファイルではなくhtmlファイルにHTMLコードを記述する場合は以下の通り。

import heading from './heading.html';
export const Heading = () => heading;

StorybookにSCSSを追加する

SCSSを追加するにはmain.jsを以下のように修正する。

const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  webpackFinal: async(config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ],
      include: path.resolve(__dirname, '../'),
    })
    return config
  },
};

例えばDemoにRed Buttonを追加したい場合は_index.scssを作成してstoriesディレクトリに保存する。

button {
  &.red {
    background: red;

    &:hover {
      opacity: 0.7;
    }
  }
}

次にindex.stories.jsにRed Buttonとimportを追記してSCSSを読み込む。

import './_index.scss';

export const RedButton = () => {
  const btn = '<button class="red">Red Button</button>';
  return btn;
};

以上でRed Buttonが追加される。

ビルドしてサーバーにアップロード

ビルドはnpm run build-storybookで実行する。

実行後はstorybook-staticというディレクトリが生成されるので、あとはこれをFTPでアップロードする。

npm run build-storybook

https://iwb.jp/s/storybook-static/?path=/story/demo--red-button

Storybookにはアドオンが必要不可欠

Storybookはアドオンを追加することで機能を拡張できる。

例えばソースコードを表示・コピーするアドオンなどだ。

アドオンを追加していないStorybookはエディタで拡張機能が追加されていないくらい使い勝手が悪いので必ず追加したほうが良い。

アドオンを色々追加するとこのようなStorybookのページを作成可能。

Storybookのアドオンに関しては以下のリンク先をご参照ください。