環境構築 ∋ React

プロジェクトにpackage.jsonが置かれてる所から始めます。無い場合はyarn init -yで作りましょう。

JavaScript で始める場合必須モジュールは以下の5つです。

  1. @storybook/react
  2. react
  3. reacnt-dom
  4. @babel/core
  5. babel-loader

以下でインストールします。

yarn add -DE @storybook/react @babel/core babel-loader && \
yarn add -E react react-dom

次に設定ファイルで「どのファイルを Story 対象にするか」を指定します。設定ファイルはデフォルトで.storybook/main.jsになります。src/以下にある全ての.stories.js(この設定は.stories.tsも行ける)を対象にする場合以下のように設定します。

module.exports = {
  stories: ['../src/**/*.stories.[tj]s']
};

最初..で1つ戻っているのは設定ファイルから見てだからです。では早速その.stories.jsファイルを作成しましょう。
ここではbutton.stories.jsを以下のようになるように作りました。

.
├── .storybook
│   └── main.js
└── src
    └── components
        └── button
            └── button.stories.js

button.stories.jsの中身は、

import React from 'react';
import {Button} from '@storybook/react/demo';

export default {title: 'Button'};

export const withText = () => <Button>Hello Button</Button>;

export const withEmoji = () => (
  <Button>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯a
    </span>
  </Button>
);

にします。

defaultではこのファイルで作った各 Story を Button というグループ名でエクスポートしてます。それ以外にエクスポートしているものが Story でただの JSX で書いてます。

準備は整ったのであとはサーバーを建てて見てみましょう。binを直接でもいいですがここではrun-scriptを追加して、そのコマンドから建てることにします。

以下のコマンドを叩くとyarn storybookでサーバーを建てれます。npeは CLI で簡単にpackage.jsonを編集したり取得できる優れた CLI ツールです。

npx npe scripts.storybook start-storybook

では以下を叩くと、

yarn storybook

ランダムなポートでサーバーが立ち上がります。

╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 5.3.3 started                           │
│   18 s for manager and 17 s for preview             │
│                                                     │
│    Local:            http://localhost:52871/        │
│    On your network:  http://192.168.1.153:52871/    │
│                                                     │
╰─────────────────────────────────────────────────────╯

この場合だとhttp://localhost:52871/が見れる URL です。アクセスしてみてButtonの各 Story が見れるか確認しましょう。

上記の内容と同じことをしたリポジトリを置いておきます。