Storybook for HTML で React/Vue 以外の案件でもUIコンポーネントカタログを使う

こんにちは森田です。
タイトル通りですが React/Vue を使わない案件でも UIコンポーネントカタログの Storybook を使いたいことがあります。

そんな時は Storybook for HTML を使えば html ファイルもStorybookで導入することが可能です。
今回はStorybook for HTML の導入について説明させていただきます。

ちなみに、UIコンポーネントカタログにつきましては、弊社茶木の書いた記事が熱いので是非お読みいただきたいです。

Storybook for HTML とは

その名の通りですが HTML でも Storybook を使えるようにしたものです。

基本的に stories.js などの書き方は従来のものと変わりませんが、html ファイルを import して使うことができます。

環境構築

インストール

公式のチュートリアルページを参考にインストールしてきましょう。

npx コマンドで sb（storybookのエイリアス）を指定し、オプションで --type hml を指定します。

※ package.jsonがないディレクトリーではエラーになるので、新規ディレクトリの場合は予め $ npm init などは済ませてください。

# Add Storybook:
$ npx sb init --type html

インストールが完了し、以下コマンドを実行すると Storybook を起動します。

$ npm run storybook

通常ですと http://localhost:6006 にStorybookが自動で起動します。

見た目はいつも通りの Storybook と同じです。

設定

設定は .storybook ディレクトリに設定ファイルが置いてあります。
こちらでコンポーネントやアドオンなどの読み込み設定をします。

ひとまずインストールされたままの main.js です。

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  "framework": "@storybook/html"
}

main.js に webpack のビルド設定などもかけますが、今回は Tailwind.css を採用し別の Webpack でビルドしているので特にビルドなどの設定はせず、preview.js にビルドした CSS を import します。

import '../public/css/app.css';
import { addParameters } from '@storybook/html'

Tailwind.css の設定

Storybook内のコンポーネントも Tailwind.css でクラスが生成できるように tailwind.config.js に stories ディレクトリも content に追加します。

module.exports = {
  content: [
    "./resources/**/*.{html|php}",
    "./stories/**/*.html", //追加
    "./stories/**/*.stories.js", //追加
  ],
}

コンポーネント

コンポーネントの作成と読み込み

main.js で設定した stories ディレクトリにコンポーネントを置きます。

読み込む html ファイルと、表示を設定する stories.js をセットで配置します。

stories.js は React も使えますのでJSX記法で stories.js の中に html を直接記述する方法もありますが、今回は html ファイルを読み込む形にしています。

状態やテキストの中身を Storybook 上で動的に変えたい場合などはstories.js に直接書く必要があります。

<h1 class="w-[500px] bg-purple-700 text-3xl font-bold text-white">Hello World!!</h1>

heading1.html を作成しました。

import heading1 from './heading1.html';

export default {
    title: 'Components/Headings',
};

export const Heading1 = () => {
    return heading1;
};

headings.stories.js を作成しheading1.html を読み込みます。

画面表示されるコンポーネント名などはこちらで設定します。

Headingコンポーネントが表示されました。

複数コンポーネントの読み込み

stories.js は以下のように複数ファイルも読み込むことが可能です。

import heading1 from './heading1.html';
import heading2 from './heading2.html';
import heading3 from './heading3.html';

export default {
    title: 'Components/Headings',
};

export const Heading1 = () => {
    return heading1;
};

export const Heading2 = () => {
    return heading2;
};

export const Heading3 = () => {
    return heading3;
};

Document形式にすれば一覧表示も可能です。

まとめ

React/Vue 以外の案件でも使える Storybook for HTML の導入を説明いたしました。
現状、UIコンポーネントカタログはStorybook 一強な感じですが、色んな開発環境で使用することができ、当分はデファクトスタンダートとして使われていくと思いました。

アドオンやサードパーティのサービスが充実しているのも Storybook の強みですね。
先日、kimizuy が書いてくれた Chromatic を使い、Storybook for HTML も公開し確認することもできます。

Storybook for HTML は環境構築もすぐにでき htmlファイルさえあればすぐにUIコンポーネントカタログを作ることができるのでプロトタインピングとしても使いやすくデザイナーとの連携も捗ります。