React で Storybook を使い始める

すべての UI コンポーネントを React のある場所に配置しようとしたことがありますか?

React の世界に慣れていない場合は、おそらくそうではないでしょう。

それはどういう意味ですか？

を参照してください 反応美しい dnd 例。

例で見たものはストーリーと呼ばれます。 ストーリーを作成するために使用されるツールは Storybook と呼ばれます。

これで、この記事で説明する内容が理解できました。 苦労せずに探検しましょう。

ストーリーブックとは？

Storybook は、コンポーネントのプレイグラウンドを提供するユーザー インターフェイス分離開発環境です。 メインアプリを実行せずに、さまざまな方法でコンポーネントを操作できます。 セットアップを使用して、ストーリーブックをそのポートで実行できます。

Reactに限ったことではありません。 Storybook は、Vue、Angular、Mithril、Marko、Svelte などのほとんどのフロントエンド フレームワークで使用できます。

ストーリーブックの詳細を確認できます ここ.

物語とは？

ストーリーは、コンポーネントのレンダリング状態を定義します。 共通のコンポーネントを使用すると、小道具でさまざまな方法で使用できます。 これらの状態ごとにストーリーを書くことができます。

Button コンポーネントがあるとします。

ボタンは、無効、読み込み中、プライマリ、セカンダリ、小、大、中など、さまざまな状態で存在できます。すべての状態をリストアップすると、チュートリアルを進めるのが非常に難しくなります。 あなたはそれを理解していると思います。 ストーリーブックで作業を開始すると、より多くのことが得られます。

ボタンのストーリーをケース別（大、中、小）で見ることができます。

プロジェクトで Storybook を設定する

反応プロジェクトでストーリーブックをセットアップします。

さあ行こう。

• 次のコマンドで反応プロジェクトを作成します。 好きな名前を付けることができます。

npx create-react-app storybook-demo

• 次に、次のコマンドを使用してプロジェクトにストーリーブックをインストールします。

npx sb init

ストーリーブックのセットアップが完了しました。

ストーリーブックは、別のサーバーを提供します。

開始方法は？

ストーリーブックは、スクリプト ファイルにコマンドを自動的に追加します。 スクリプト セクション内の package.json ファイルで確認できます。 とりあえず、以下のコマンドを実行して Storybook サーバーを起動します。

npm run storybook

Storybook は、package.json ファイルのスクリプト セクションで指定されたポートで新しいサーバーを起動します。 デフォルトのブラウザ（反応サーバーと同じ）でストーリーブックが自動的に開きます。

デフォルトでは、さまざまなストーリーが表示されます。 不要な場合は削除するか、参照用に保管してください。 前のセクションで説明したように、ボタンは複数の状態を持つことができ、それらはストーリーブックで確認できます (すべての状態が言及されているわけではありません)。 このチュートリアルの最後のセクションで、ボタンのストーリーの大規模なセットを作成します。

ストーリーブックのさまざまなセクションを調べて、さまざまなセクションに慣れてください。 チュートリアルでは、それらのいくつかについて説明します。

最初の物語を書きましょう。

テストストーリーブック

ストーリーブックの実行とその中のいくつかの例を見てきました。

• src フォルダー内に Button というフォルダーを作成します。
• Button.jsx、Button.css、constants.js というファイルを作成します。
• 以下のスニペットのそれぞれのコードをファイルに配置します。

ボタン.jsx

import React, { Component } from "react";
import PropTypes from "prop-types";

import "./Button.css";

import { buttonTypes, buttonVariants, buttonSizes } from "./constants";

class Button extends Component {
    static defaultProps = {
        isDisabled: false,
        type: "filled",
        variant: "oval",
        size: "medium",
        backgroundColor: "#1ea7fd",
        textColor: "#ffffff",
    };

    static buttonTypes = buttonTypes;
    static buttonVariants = buttonVariants;
    static buttonSizes = buttonSizes;

    renderButton = () => {
        const {
            text,
            isDisabled,
            type,
            variant,
            size,
            backgroundColor,
            textColor,
            onClick,
        } = this.props;
        return (
            <button
                onClick={onClick}
                className={`default ${variant} ${size} ${
                    isDisabled ? "disabled" : ""
                }`}
                style={
                    type === buttonTypes.outline
                        ? {
                              border: `1px solid ${backgroundColor}`,
                              color: "#000000",
                              backgroundColor: "transparent",
                          }
                        : {
                              backgroundColor: `${backgroundColor}`,
                              border: `1px solid ${backgroundColor}`,
                              color: textColor,
                          }
                }
                disabled={isDisabled}
            >
                {text}
            </button>
        );
    };

    render() {
        return this.renderButton();
    }
}

Button.propTypes = {
    text: PropTypes.string,
    isDisabled: PropTypes.bool,
    type: PropTypes.oneOf([buttonTypes.outline, buttonTypes.filled]),
    variant: PropTypes.oneOf([buttonVariants.oval, buttonVariants.rectangular]),
    size: PropTypes.oneOf([
        buttonSizes.small,
        buttonSizes.medium,
        buttonSizes.large,
    ]),
    backgroundColor: PropTypes.string,
    textColor: PropTypes.string,
    onClick: PropTypes.func,
};

export { Button };

ボタン.css

.default {
    border: none;
    cursor: pointer;
    background-color: transparent;
}

.default:focus {
    outline: none;
}

.disabled {
    opacity: 0.75; 
    cursor: not-allowed;
}
.small {
    font-size: 12px;
    padding: 4px 8px;
}

.medium {
    font-size: 14px;
    padding: 8px 12px;
}

.large {
    font-size: 16px;
    padding: 12px 16px;
}

.oval {
    border-radius: 4px;
}

.rectangular {
    border-radius: 0;
}

定数.js

export const buttonTypes = {
    outline: "outline",
    filled: "filled",
};

export const buttonVariants = {
    oval: "oval",
    rectangular: "rectangular",
};

export const buttonSizes = {
    small: "small",
    medium: "medium",
    large: "large",
};

そのコードは何ですか？

さまざまな方法で使用できる Button の共通コンポーネントを作成しました。 これで、さまざまな状態を持つことができるコンポーネントができました。

以下の手順に従って、最初のストーリーを書きましょう。

• Button.stories.jsx というファイルを作成します。
• React と Button コンポーネントをファイルにインポートします。
• 次に、コンポーネント ストーリーのタイトルまたはパスを定義します。 次のコードを使用して定義します。

export default {
   title: ‘common/Button’,
}

上記のコードは、現在のファイルにあるすべてのストーリーを common/Button/ ディレクトリ内に配置します。

• 次のように、必須の小道具を含むボタンをエクスポートします。

export const defaultButton = () => (
    <Button text=”Default Button” onClick={() => {}} />
);

私たちは最初の物語を完成させました。 次のコマンドでストーリーブックを実行し、出力を確認します。

npm run storybook

最後に、心配しないでください。

フロントエンド開発でどのように役立ちますか?

ストーリーブックを使用する主な利点は何ですか?

10人のメンバーのチームで働いているとしましょう。 そして、現在作業中のプロジェクト用に全員が作成した共通コンポーネントを確認する必要があります。

どうすればそれができますか？

それらを確認するには、すべての共通コンポーネントに移動する必要があります。 しかし、それは時間がかかり、私たちにとって好ましい方法ではありません。 新しいゲスト ストーリーブックが登場します。

私たちの問題を克服するためにそれをどのように利用しますか？

ストーリーブックを使用して、共通コンポーネント (任意の UI コンポーネント) のストーリーを作成できます。 そして、チームメイトが他のコンポーネントの共通コンポーネントをチェックしたいときはいつでも、ストーリーブック サーバーを実行するだけで、上で見たようにすべての UI コンポーネントがそこに表示されます。

ストーリーブックでレンダリングされたコンポーネントを使用して、さらに多くのことができます。 Storybook にはアドオンと呼ばれるコンセプトがあり、ストーリーにスーパーパワーを与えます。

ストーリーブック自体で UI コンポーネントの応答性を確認する必要があるとしましょう。ストーリーブックで Viewport というアドオンを使用できます。 アドオンについては、次のセクションで詳しく説明します。

ストーリーブックの操作

このセクションでは、共通コンポーネント Button のさまざまな状態を定義するさまざまなストーリーを記述します。

物語を書くことはそれほど難しいことではありません。 ストーリーはコンポーネントの状態を定義します。 コンポーネントの小道具を見ると、コンポーネントのさまざまなユースケースを簡単に理解できます。

オプションの小道具を与えて、いくつかのストーリーを書きましょう。

export const largeButton = () => (
    <Button text="Large Button" onClick={() => {}} size="large" />
);
export const outlineSmallButton = () => (
    <Button
        text="Outline Small Button"
        onClick={() => {}}
        size="small"
        type="outline"
    />
);
export const rectangularLargeButton = () => (
    <Button
        text="Rectangular Large Button"
        onClick={() => {}}
        size="large"
        variant="rectangular"
    />
);


export const disabledButton = () => (
    <Button text="Disabled Button" onClick={() => {}} isDisabled={true} />
);


export const warningButton = () => (
    <Button
        text="Warning Button"
        onClick={() => {}}
        backgroundColor="orange"
    />
);

上記の 3 つのストーリーは、コンポーネント Button のさまざまな使用例を定義しています。 次は、共通コンポーネントのストーリーの他のケースをいくつか追加する番です。 disabledSamllRectangularButton、dangerButton、successDisabledButton などを追加してみてください。

上記の場合のコードは提供しません。 それを理解するには、自分で書く必要があります。 これまでに作成した完全なストーリー コードを確認できます。

import React from "react";

import { Button } from "./Button";

export default {
    title: "src/common/Button",
};

export const defaultButton = () => (
    <Button text="Default Button" onClick={() => {}} />
);

export const largeButton = () => (
    <Button text="Large Button" onClick={() => {}} size="large" />
);

export const outlineSmallButton = () => (
    <Button
        text="Outline Small Button"
        onClick={() => {}}
        size="small"
        type="outline"
    />
);

export const rectangularLargeButton = () => (
    <Button
        text="Rectangular Large Button"
        onClick={() => {}}
        size="large"
        variant="rectangular"
    />
);

export const disabledButton = () => (
    <Button text="Disabled Button" onClick={() => {}} isDisabled={true} />
);

export const warningButton = () => (
    <Button
        text="Disabled Button"
        onClick={() => {}}
        backgroundColor="orange"
    />
);

これで、コンポーネントのストーリーを完全に理解できました。

次のセクションに進み、アドオンと、アドオンがストーリーをどのように後押しするかについて学びましょう.

ストーリーブックのアドオン

デフォルトで複数のアドオンが利用可能になります。 このセクションでは、開発に最も役立つアドオンを探ります。

ボタンのストーリーを盛り上げましょう。

コントロール

コントロールは、ストーリーブック自体のコンポーネントにカスタムの小道具を提供する機能を追加します。 Button コンポーネントの場合、コントロールを追加して、ストーリーブックのさまざまな小道具を変更できます。

ボタンの背景色に最適な色を見つける必要があるとしましょう。 コンポーネントに1つずつ与えて背景色を確認するテストをすると手間がかかります。 代わりに、ストーリーブックで別の色を選択できるコントロールを追加できます。 ストーリーブック自体で背景色をテストできます。

ボタン ストーリーにコントロールを追加する方法を見てみましょう。

まず、タイトルの下のすべての小道具を次のように定義する必要があります。

export default {
    title: "src/common/Button",
    argTypes: {
        text: { control: "text" },
        backgroundColor: { control: "color" },
        isDisabled: { control: "boolean" },
        size: {
            control: { type: "select", options: ["small", "medium", "large"] },
        },
        type: {
            control: { type: "select", options: ["filled", "outline"] },
        },
        variant: {
            control: { type: "select", options: ["oval", "rectangular"] },
        },
    },
};

次に、props をコンポーネントから分離し、次のように引数として指定します。

export const outlineSmallButton = (args) => (
    <Button {...args} onClick={() => {}} />
);
outlineSmallButton.args = {
    text: "Outline Small Button",
    size: "small",
    type: "outline",
};

コンポーネント プレビュー ウィンドウの下部にコントロールが表示されます。

コンポーネント プレビュー ウィンドウの下部にコントロール タブが表示されます。 その周りで遊んでください。

上記のようにすべてのストーリーを更新します。 これは、ストーリーブックのアドオンの構文を知っているようなものです。 argTypes では、さまざまなタイプのコントロールを使用しました。 ストーリーブックにあるすべてのコントロールを見つけることができます ここ.

更新されたボタン ストーリーは次のようになります。

import React from "react";

import { Button } from "./Button";

export default {
    title: "src/common/Button",
    argTypes: {
        text: { control: "text" },
        backgroundColor: { control: "color" },
        isDisabled: { control: "boolean" },
        size: {
            control: { type: "select", options: ["small", "medium", "large"] },
        },
        type: {
            control: { type: "select", options: ["filled", "outline"] },
        },
        variant: {
            control: { type: "select", options: ["oval", "rectangular"] },
        },
    },
};

export const defaultButton = (args) => <Button {...args} onClick={() => {}} />;
defaultButton.args = {
    text: "Default Button",
};

export const largeButton = (args) => (
    <Button {...args} onClick={() => {}} size="large" />
);
largeButton.args = {
    text: "Large Button",
};

export const outlineSmallButton = (args) => (
    <Button {...args} onClick={() => {}} />
);
outlineSmallButton.args = {
    text: "Outline Small Button",
    size: "small",
    type: "outline",
};

export const rectangularLargeButton = (args) => (
    <Button {...args} onClick={() => {}} />
);
rectangularLargeButton.args = {
    text: "Rectangular Large Button",
    size: "large",
    variant: "rectangular",
};

export const disabledButton = (args) => <Button {...args} onClick={() => {}} />;
disabledButton.args = {
    text: "Disabled Button",
    isDisabled: true,
};

export const warningButton = (args) => <Button {...args} onClick={() => {}} />;
warningButton.args = {
    text: "Warning Button",
    backgroundColor: "orange",
};

行動

アクションは JavaScript のイベントです。 JavaScript のイベントであるボタンをクリックできます。 アクションアドオンを使用して、ボタンクリックでいくつかのアクションを実行できます。

アクションを使用すると、イベントが正しく機能しているかどうかをテストできます。 無効化されたボタンはクリックできず、有効化されたボタンはクリック可能でなければなりません。 アクションを使用してそれを保証できます。

ボタンのクリックにアクションを追加する方法を見てみましょう。

以前に onClick props に無名関数を与えました。 今、それを更新する必要があります。

• 次のステートメントを使用して、ストーリーブック アドオンからアクションをインポートします。

import { action } from "@storybook/addon-actions";

• すべての () => {} を次のステートメントに置き換えます。

action("Button is clicked!")

次に、ストーリーブックに移動してボタンをクリックします。[コントロール]タブの横にある[アクション]タブの下にメッセージが表示されます。 無効になっているボタンをクリックすると、メッセージは印刷されません。

onChange、onMouseOver、onMouseOut などのさまざまなイベントに対してアクションを使用して、それらが適切に機能していることを確認できます。 入力要素の onChange にも同じことを実装してみてください。

アクションのドキュメントを参照してください ここ.

バックグラウンド

背景アドオンを使用して、プレビュー ウィンドウの背景を変更できます。 コードを書く必要はありません。 ストーリーブック内で変更するだけです。 下のgifを見ることができます。

ビューポート

ストーリーブックでコンポーネントの応答性をテストすることもできます。 ビューポート オプションについては、下の gif を参照してください。

ドキュメント

docs アドオンを使用して、ストーリーブックにコンポーネントを文書化できます。 チームで作業している場合は、より便利です。 彼らはコンポーネントを読み、それを直接理解します。 開発者は多くの時間を節約できます。

ストーリーブックのコンポーネント プレビュー ウィンドウでは、キャンバス タブの右上にドキュメントが表示されます。 コンポーネントのすべてのストーリーのすべてのドキュメントが含まれます。 マークダウンとコンポーネント レンダリングの両方を含むコンポーネントをドキュメント化する場合は、Button.stories.mdx を使用する必要があります。 コンポーネントのストーリーと一緒に、いくつかの追加のマークダウン コードを内部に記述するだけです。

私たちはストーリーのドキュメントを書いています。 このコードには、マークダウンとコンポーネントのレンダリングが含まれています。 構文を学習するだけです。 一目でわかります。

Button.stories.mdx doc コードを見てみましょう。

<!--- Button.stories.mdx -->

import {
    Meta,
    Story,
    Preview,
    ArgsTable
} from '@storybook/addon-docs/blocks';

import { Button } from './Button';

<Meta title="MDX/Button" component={Button} />

# Button Documentation

With `MDX` we can define a story for `Button` right in the middle of our
Markdown documentation.

<ArgsTable of={Button} />

export const Template = (args) => <Button {...args} />

## Default Button
We can write the documentation related to the Default Button
<Preview>
    <Story name="Default Button" args={{
        text: 'Default Button'
    }}>
    {Template.bind({})}
   </Story>
</Preview>

## Large Button
We are writing sample docs for two stories, you can write rest of them
<Preview>
    <Story name="Large Button" args={{
        text: "Large Button",
        }}>
        {Template.bind({})}
    </Story>
</Preview>

ドキュメンテーション コンポーネントの詳細を確認する ここ.

アドオンの詳細を確認できます ここ.

結論

チュートリアルを楽しんで、ストーリーブックについて学んでいただければ幸いです。 また、チームで効果的に使用して、仕事を生産的にします。

Reactは初めてですか？ これらの学習リソースを確認してください。

ハッピーコーディング🙂