Storybookでコンポーネントの品質を向上する

基礎からはじめるReact入門 第6回

ストーリーズを追加する

　サンプルにストーリーズを追加してみます。ストーリーズの追加は、src/stories/index.jsの末尾でstoriesOf関数を呼び出すだけでOKです。

import App from '../App'; // （1）
//省略
storiesOf('App', module) // （2）
  .add('デフォルト', () => <App />);

　表示対象のコンポーネントは、（1）のように相対パスでインポートします。タイトルはコンポーネント名にしておくとよいでしょう。ファイルを保存すると、自動でStorybookが更新され、図4のようにAppコンポーネントが表示されます。

図4　Appのストーリーズ

複数のストーリーを持つストーリーズを作る

　せっかくなのでストーリーを増やしてみましょう。create-react-appが生成したAppを少し改造して、メッセージを変更できるようにします（リスト1）。

リスト1　App.js

render() {
  // （1） messageがなければデフォルトのメッセージを出す
  const message = this.props.message || "Welcome to React";
  return (
    // 省略
        <h1 className="App-title">{message}</h1>
    // 省略
  );
}

　これを踏まえて、ストーリーズの設定を次のようにします。

storiesOf('App', module)
  .add('デフォルト', () => <App />)
  .add('指定したメッセージ', () => <App message="ようこそReactへ" />);

　Storybookを確認してみましょう。図5のようになっているはずです。

図5　ストーリーを追加

　「デフォルト」のストーリーは図4のときと変わりがないことを、手軽に切り替えながら確認できるのはうれしいところですね。

ストーリーズを整理する

　取り扱うコンポーネントが増えてくると、src/stories/index.jsが肥大化して見通しが悪くなってきます。これを改善するための工夫として、ファイルを分けることが挙げられます。

リスト2　src/stories/App.stories.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import App from '../App';

storiesOf('App', module)
  .add('デフォルト', () => <App />)
  .add('指定したメッセージ', () => <App message="ようこそReactへ" />);

　上記の部分だけを別のファイルに抜き出しました。storiesOfを実行することだけが大切で、特に外部に公開するデータはないため、exportなどは使いません。

リスト3　src/stories/index.js

import "./App.stories";

　src/stories/index.jsで別ファイルのストーリーズを取り込むには、上記の形でインポートします。ファイルの内容は即時に評価され、Storybookに取り込まれます。

まとめ

　今回は動作確認が容易になるツール、Storybookを紹介しました。Storybook自体は「動くカタログ」になるので、ドキュメンテーションの二度手間を省けるのもまたうれしいところですね。また、筆者の経験上、Storybookでの動作確認に慣れてくると、propsの切り分け方も洗練されて分かりやすくなっていくことが多いです。コンポーネントの品質向上のために、Storybookを活用していきましょう。