Storybookの基本
それでは、getstorybookによって自動生成されたアプリケーションを見ながら、Storybookの基本を確認していきましょう。図2は左側のメニュー表示部です。
カテゴリ分けされたリストの形式になっています。本記事では、カテゴリのことを「ストーリーズ」、リストの項目を「ストーリー」と呼びます。各ストーリーにはコンポーネントが1つ登録されており、ストーリーを選択すると該当のコンポーネントが右側のコンポーネント表示部に表示されます。ストーリーズはそれらを取りまとめる役割です。
エントリーポイントと記法
create-react-app製のアプリケーションの中でStorybookを運用する場合、エントリーポイントはsrc/stories/index.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'; // （3）
storiesOf('Welcome', module) // （1）
.add('to Storybook', () => ( // （2）
<Welcome showApp={linkTo('Button')} /> // （4）
));
storiesOf('Button', module)
.add('with english text', () => (
<Button onClick={action('clicked')}>Hello Button</Button> // （5）
))
.add('with japanese text', () => (
<Button onClick={action('clicked')}>押してください</Button>
));
ストーリーズは（1）のようにstoriesOf関数を呼び出して定義します（1）。第一引数にはタイトルを渡し、第二引数にはグローバル変数のmoduleを渡します。ストーリーはstoriesOfの戻り値からadd関数を呼び出すことで定義します（2）。こちらも第一引数はタイトルですが、第二引数には表示したいコンポーネントの定義を書きます。このサンプルでは（3）でインポートしたコンポーネントが仮置きされていますが、もちろん相対パスで自作のコンポーネントを呼び出すのが本来の使い方です。こちらについては後述します。
ここまでがStorybookのコア部分の使い方の解説でした。非常にシンプルなAPIなので、覚えやすいですね。
Storybookは機能拡張の仕組みとして、アドオンという機能を持っています。サンプルにもいくつか活用されているので、確認してみましょう。
まずは、（4）で利用されている、@storybook/addon-linksパッケージからインポートされたlinkTo関数です。linkTo関数にストーリーズの名前を渡して呼び出すと、該当するストーリーズに画面遷移するための関数オブジェクトを生成します。onClick属性などに渡すのが本来の用途です。
もう1つが、（5）で利用されている、@storybook/addon-actionsパッケージからインポートされたaction関数です。action関数に任意の名前を渡して呼び出すと、アクション表示部にメッセージを表示するための関数オブジェクトを生成します。コンポーネントがpropsでコールバック関数を受け付けているときに、action関数の戻り値を渡しておくと、コンポーネント内でコールバック関数が呼ばれたことを、アクション表示部で知ることができるようになります。図3のように、渡された引数の概要も表示されるので、かなり重宝します。
各種設定ファイル
getstorybookがもたらした変更はsrc/storiesの追加だけではありません。package.jsonのscriptsには、次の2つが追加されました。
"scripts": {
// （省略）
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public"
},
先ほどnpm run storybookで実行していたのはこのstorybookです。build-storybookはStorybookを静的なWebアプリケーションとしてデプロイ可能な形に出力するタスクです。社内サーバーにアップロードして関係者に挙動を見せたい場合などに威力を発揮するでしょう。
また、devDependenciesにも次のパッケージが追加されています。アドオンは個別のパッケージとしてインストールされていることが分かります。
"devDependencies": {
"@storybook/react": "^3.3.9",
"@storybook/addon-actions": "^3.3.9",
"@storybook/addon-links": "^3.3.9",
"@storybook/addons": "^3.3.9",
// （省略）
}
package.json以外では、次のファイルが追加されています。
- .storybook/addons.js
- .storybook/config.js
addons.jsは有効にするアドオンの設定、config.jsはエントリーポイントの設定を行っています。特にアドオンについては、npm installだけではなく、addon.jsへの設定を行わないと有効にならないため、注意が必要です。
アドオンは公式サイトで紹介されているので、興味があればのぞいてみてください。Storybookの機能を拡張する便利な機能がたくさんあります。
