Storybook導入メモ(with React)

3行で

• 汎用的に使えそうなReactコンポーネントをつくった
• どこで使えるのかよくわからない感じになってしまった
• Storybookでカタログを作ろう

Storybookとは

• Storybook - UI dev environment you'll love to use

コンポーネントのカタログみたいなやつを表示してくれるツール。コマンドを叩くとコンポーネントをいい感じに表示してくれるサーバーが起動するので、ウェブブラウザで自分たちの作ったReactコンポーネントのカタログを見れるようにできます。

背景

Storybook導入を考える前はwikiで管理しようとしてたけど挫折しました。Storybookいいよという話を聞いて、見てみたらたしかによさそうという感想を持ったので試してみた次第です。

はじめかた

getstorybookコマンドを叩く

Storybookのトップページにあるように、以下でできます。

npm i -g @storybook/cli
cd my-react-app
getstorybook

自分のプロジェクトのディレクトリ直下で getstorybook コマンドを叩くだけで、storybookの設定を勝手に作ってくれるので何も考える必要がない。補足しておくと、具体的には設定ファイルなどを作って、 package.json にコマンドを追加してくれています。

その場で以下を打つとサーバーが立ち上がります。

npm run storybook

コンポーネントを置く

getstorybook するとデモのコンポーネントが置かれた状態でstorybookサーバーのようなものが動くので、それを真似てコンポーネントを置けばよさそう。置いてみます。

my-react-app/stories/index.stories.js

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import { Button, Welcome } from '@storybook/react/demo';
import LikeButton from '../app/javascript/components/common/LikeButton';

storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

// デモで最初から置かれているやつ
storiesOf('Button(Demo)', module)
  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
  .add('with some emoji', () => <Button onClick={action('clicked')}>😀) 😎😀 👍😎 💯👍</Button>);

// 上のデモを真似て追加
storiesOf('LikeButton', module)
  .add('いいね済み, 10いいね', () => {
    return (
      <LikeButton
        liked={true}
        likeCount={10}
        onLike={() => {} }
        onUnlike={() => {} }
      />
    );
  });

うまくいってる感じはしませんが、一応サイドバーに追加されてクリックしたらそれが表示されるという状態にはなりました。

静的ファイル配信

うまくいってる感じがしないのは、画像が入っておらず、またCSSがコンポーネントに当たっていないからです。どちらもドキュメントに書いてあるようなので、それを見て直します。

画像

• Serving Static Files

画像については、今回はコンポーネントが参照するアイコン画像が ./public にあるという感じだったので、上にも書かれている通り package.json を以下のように修正するだけで大丈夫でした。

package.json

- start-storybook -p 6006
+ start-storybook -s ./public -p 6006

再び npm run storybook し直すと、うまく表示されました。

CSS

次に、CSSです。コンポーネントの中にスタイルが閉じていればいいのですが、Bootstrap 3のようなCSSフレームワークでデザインを実現しているような場合は、そのCSSをどうにかして当てる必要があります。

Add Custom Head Tagsに書かれているように、 preview-head.html というファイルでheadタグに追加したいHTMLを書けば良さそうです。今回はCSSのダウンロードなので、Bootstrapや独自のスタイルも諸々入った application.css があるとしたら、それをlinkタグで読み込めばOKです。

.storybook/preview-head.html

<link rel="stylesheet" media="all" href="/assets/application.css" />

意図した通りにスタイルが反映されました。

まとめ

この要領でコンポーネントを並べていけば、「なんか使えるコンポーネントあるかな〜」というのがざっくり確認できるのではないでしょうか。ほかにもできることはありそうなので、模索しながらこちらにも追記していこうかと思っています。