環境構築 ∋ 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 が見れるか確認しましょう。

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