LoginSignup
30
17

More than 5 years have passed since last update.

HameeAdvent Calendar 2018Day 25
@higemoja

Storybook で私とみんなのコンポーネントカタログ作成してこ

Last updated at Posted at 2018-12-24

この記事は Hamee Advent Calendar 2018 25日目の記事です。

私、入社したてのフロントエンド歴 4年目くらいの人です。
フロントエンドの環境とか技術とかインプットしたら、アウトプットもしないとなーと思っていたところでめでたくアドカレ初参加となりましたです👏

さてさっそく本題に…

私とみんなのコンポーネントカタログを作りたい！！

コンポーネント = HTML & CSS & JavaScript で作るパーツとして話を進めますね。

  • こんなの作ったよ
  • こんなコンポーネントあるんだよ
  • 見た目こんなにあるんだよ

というのを、みんな (デザイナー、開発者、クライアント) に知ってもらう & わかってもらうために作りたい！
途中で他の方がお手伝いに来た時も、きちんと準備してあると、幸せですよね🤝

じゃあ作ろう！

「はい、STOP」と、心の中のリトル自分が囁きます。

  • おれおれテンプレートってどうなのよ
  • フレームワークを使った時どうする？

まぁ確かに。
でも大丈夫。そう、Storybook ならね！

Storybook

hoge.gif
(👆この画像では　React 動かしてます)

Storybook は、UI 開発環境です。
見た目はもちろん、挙動のテストも行えます。
アドオンで機能の追加も可能で、お好みの環境を作れることができます。

いつの間にやら対応するフレームワークやライブラリが増えていて、HTML だけってのもあるんです。

もちろん有名どころはバッチリ抑えてくれているので、Storybook さえ覚えれば、使用するライブラリで振り回されることがないですね！(最初の準備は大変だったりするんだけど…)

今回は、実際に私が使用した Storybook for HTML + Sass の小さい構成で、Storybook を紹介してみようと思います。

準備

がインストールされている前提で進めていきます👍

基本的なことは Storybook for HTML に書いてありますが、まずは @storybook/cli を使用して、雛形を作ってもらいましょう。

npx -p @storybook/cli sb init --type html

終了したら下記コマンドを打って、動くか確認してみましょう！

npm run storybook

capture1.png

うん、動いてますね！

自分好みに変更

作業ディレクトリ

この段階でディレクトリ内がこうなってると思います。

├── node_modules
├── package-lock.json
├── package.json
├── stories
│   └── index.stories.js
└── .storybook
    └── config.js

index.stories.js に確認の時に表示されたコードが書かれているのですが、そこに全部書いていくのも面倒ですし、コンポーネント開発用のディレクトリを作り、そちらで HTML & Sass を開発するようにしていきます。

dev
└── components

dev/components ディレクトリを作成し、そこで作業を進めていくことにします。
作業の場所が変更になるので、.storybook/config.js に書いてある、 require.context の第1引数を変更します。

import { configure } from '@storybook/html';

// dev ディレクトリ内にある  "なんちゃら.stories.js" というファイルを
// 自動でストーリーに追加してもらえるようにします。
const req = require.context('../dev', true, /.stories.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

Sass

Sass を使用するので Custom Webpack Config のページを参考に、Storybook の webpack 設定を変更します。

まずは必要なパッケージを追加します。

npm i -D node-sass sass-loader css-loader style-loader

次は ./storybook の中に webpack.config.js を下記内容で追加します。

const path = require('path');

module.exports = (storybookBaseConfig, configType) => {
  storybookBaseConfig.module.rules.push({
    test: /\.scss$/,
    loaders: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../')
  });

  return storybookBaseConfig;
};

ひとまずここで Storybook の設定は OK なので、実際にストーリーを書いていきましょう。

ストーリー追加

Button という仮のコンポーネントのストーリーを作成していきましょう。

dev
└── components
    └── Button
        ├── button.stories.js
        └── _index.scss

// _index.scss

@charset "UTF-8";

.Button {
  @at-root {
    & {
      padding: 1em;
      border: 2px solid currentColor;
      border-radius: 2px;
      font-weight: bold;
    }
  }
}


// button.stories.js

import './_index.scss';
import { storiesOf } from '@storybook/html';

storiesOf('Components', module)
  .add('button', () => `
    <button class="Button" type="button">ボタン</button>
  `);

ファイルを追加してうまくいくと…

capture2.png

Fuーッ！！
ひだりのメニューに Components 、その下に button が追加され、右側にはきちんと追加したボタンが表示されています👏

おまけ

今回の Storybook for HTML を使用した場合、テンプレートリテラルを使用して JS 内に HTMLを書くのですが、増えていった場合などを考えるとちょっとしんどいですよね。実際しんどかった、Emmet 効かないとか…。

なので、html-loader と extract-loader を使用して、HTML は別ファイルで管理してみましょう。

まずは html-loader と extract-loader を追加します。

npm i -D html-loader extract-loader

./storybook/webpack.config.js もちょいと変更します。

const path = require('path');

module.exports = (storybookBaseConfig, configType) => {
  storybookBaseConfig.module.rules.push(
    {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../')
    },

    // html 用のルールを追加
    {
      test: /\.html$/,
      loaders: ['extract-loader', 'html-loader'],
      include: path.resolve(__dirname, '../')
    }
  );

  return storybookBaseConfig;
};

こうすることで HTML ファイルを JS 内で文字列をして扱えるようになるので、
さっそく Button ディレクトリに HTML を追加しますー。

<!-- default.html -->

<button class="Button"
        type="button">
  ボタン
</button>

<!-- color.html -->

<button class="Button -red"
        type="button">
  レッド
</button>

<button class="Button -green"
        type="button">
  グリーン
</button>

<button class="Button -blue"
        type="button">
  ブルー
</button>

HTML ファイルを追加しましたら、Sass の方でモディファイアを追加します。

// _index.scss

@charset "UTF-8";

.Button {
  @at-root {
    & {
      padding: 1em;
      border: 2px solid currentColor;
      border-radius: 2px;
      font-weight: bold;

      &.-red {
        color: red;
      }

      &.-green {
        color: green;
      }

      &.-blue {
        color: blue;
      }
    }
  }
}

準備ができたら JS の中で HTML を読み込んで使用してみましょう！
(Button の下に種類が表示されるようにメニューの構成も変更しています)

// button.stories.js

import './_index.scss';
import { storiesOf } from '@storybook/html';
import defaultTemplete from './default.html';
import colorTemplete from './color.html';

storiesOf('Button', module)
  .add('default', () => defaultTemplete)
  .add('color', () => colorTemplete);

output.gif

きちんと HTML ファイルが読み込まれましたね👏

最後に

ずらずら書いたのでわかりづらかったかもしれませんが、どうでしたでしょうか Storybook😅

半強制的にコンポーネントを開発しながらカタログを作っていくスタイルになるので、あとでドキュメント作成などで苦しむこともなくなるかなと思います👍
コマンド一発で静的ファイルを作成でき、PC 詳しくない人にみてもらう時にそのまま渡せちゃうのも良いですね🙆‍♂️

色々と試しながらドンドン Storybook を使っていこうと思います。

30
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
30
17