はじめに

"React Storybook" の導入について簡単にまとめたメモとして残します。

Storybook とは

Storybook を使用することで、UI コンポーネントをビジネスロジックやコンテキストから切り離して開発できるようになります。また可視化することができるので提案、打ち合わせなどにも活用できます。

はじめ方

さっそくですがまずは、Reactのアプリケーションを作成します。

npx create-react-app React-Story-Book

RCAで作成したアプリにStorybookを追加します。

npx -p @storybook/cli sb init

コマンドの実行には基本的に yarn となりますが、 yarn ではなく npm を使用したい場合には、上記のコマンドの末尾に--use-npmつけることで、npmコマンドを使用することができます。
(今回は--use-npmをつけてnpmで実行しました)

処理が完了したら下記コマンドを実行します。

npm run storybook

これでポート 9009でStorybookのデフォルトのエクスプローラーが表示されたと思います🚀

簡単なボタンの作成

最後に簡単なボタンコンポーネントの例を作っていきたいと思います。

準備

上記コマンドによりjsonファイルに各Storybookの追加された記述と
アプリケーションフォルダ内にstorybookディレクトリとsrcディレクトリ直下にstoryディレクトリが作成されているのが確認してください。
今回は新たにディレクトリを作成していくので、src直下のstoryディレクトリを削除します。
srcディレクトリ直下にcomponentsディレクトリを作成してさらにButtonディレクトリを作成し、その中に以下3つのファイルを作成します。

　・Button.js
　・Button.stories.js
　・Button.css

ソースコード

Button.js

import React from 'react';
import './Button.css'

function Button(props) {
  const { variant = 'primary', children, ...rest} = props
  return (
    <button className={`button ${variant}`} {...rest} >
      { children }
    </button>
  )
}

export default Button

Button.css

.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

.primary {background-color: #008CBA;}
.secondary {background-color: #e7e7e7; color: black;}
.succcess {background-color: #4CAF50;}
.danger {background-color: #f44336;}

Button.stories.js

import React from 'react';
import Button from './Button';


export default {
  title: 'Button',
  component: Button
}

export const Primary = () => <Button variant='primary'>Primary</Button>
export const Secondary = () => <Button variant='secondary'>Secondary</Button>
export const Succcess = () => <Button variant='succcess'>Succcess</Button>
export const Danger = () => <Button variant='danger'>Danger</Button>

上記ソースコードを実際に出力するとこのようになると思います。

Button.jsで左のサイドバーの親となるButtonの作成。
Button.stories.jsでその子となるコンポーネントを記述。
Button.cssでそれぞれの見た目を記述。

終わりに

簡単な導入方法と１例の紹介でした！
さらに掘り下げる場合は公式サイトなどを見てみると良いと思います！

Storybook の公式ドキュメント

【React】React Storybook v.6 導入 サンプル