ReactでサクッとStorybookを導入する

自分のReact PJにStorybook導入してみたいけど、なんかめんどくさそう...という方へ向けて、サクッと簡単に導入できるまでのステップを紹介します。

1.Storybookのインストール

まずnpx create-react-app ${React PJ名}でReactのPJを作成、もしくは既存のReact PJを開き、以下のコマンドを叩くだけです。

.bash

$ npx storybook init

このコマンドを叩くと以下のようなdirが新たに作成されます。

React PJ/
    ├ + .storybook/
    ├ src/
       ├ + stories/

このうち.storybookにはStorybookを動かすための基本的な設定が、storiesディレクトリにはサンプルのStorybook用のコンポーネントファイルが格納されます。

2.フォルダ構成の設定（❎必須）

ここで、まずどんなフォルダ構成にするのかを考えましょう。
例えばデフォルトで作成されたstoriesフォルダにstorybook関連のファイルだけ格納するのか、自分でcomponentsフォルダに格納したコンポーネント用ファイルにstorybook関連のファイルも格納するのか？

私の場合は後者にしてみました。

特にStorybookをデフォルトでインストールした状態でも動きますが、componentsフォルダにしか格納しない予定なので、storyを読み込みにいくパスを変更しておきます。

.storybook/main.js

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  }
}

これを

.storybook/main.js

module.exports = {
  "stories": [
    "../src/components/*.stories.@(js|jsx|ts|tsx)"
  ],
...

こうしてみました。

3.Storyの書き方の説明

今回はInputというコンポーネントを作ってみました。
コンポーネントの方は特に普通にReactでやる通りに書けばOKです。

stories/Input.jsx

import React from 'react';
import PropTypes from "prop-types"

function Input({ 
    labelName = "", 
    labelTitle = "", 
    inputType = "text", 
    value = "", 
    width = "300", 
    borderColor = "gray"}) {
  return (
  <div style={{display: 'flex', flexWrap: 'wrap', width: width}}>
      <label 
        name={labelName} 
        style={{marginBottom: 10, width: width}}>
          {labelTitle}
      </label>
      <input type={inputType} value={value} style={{border: `1px solid ${borderColor}`}}/>
  </div>)
}

Input.propTypes = {
    labelName: PropTypes.string,
    labelTitle: PropTypes.string, 
    inputType: PropTypes.string,
    value:  PropTypes.string,
    width:  PropTypes.number, 
    borderColor: PropTypes.string,
}

export default Input

次に、Story用にButton.stories.jsxを書きます。
基本的にコンポーネントファイル+コンポーネント用のstoryファイルをセットで書きます。
またstory用のファイルは コンポーネント名.stories.js(x) というファイル名にする必要があります。

stories/Input.stories.jsx

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

// まず、以下export default内にコンポーネントの基本情報を書きます。
// 1. title: ここに書いた内容がStorybook画面でフォルダ構成として表示されます。例えば以下の場合、`Example/Button`とした場合Exampleというフォルダ（まとまり）以下にButtonというコンポーネントが表示されます。
// 2. component: ここで設定するコンポーネント名
// 3. argTypes: これは特に必須ではないのですが、コンポーネントファイルに書いたPropTypesや、デフォルト値を上書きすることができます。

export default {
  title: "Input",
  component: Input,
  argTypes: {
      width: {type: 'number', defaultValue: 500}
  }
}

// Templateとして、ここにどんなパターンのコンポーネントを書くのか、その元となるテンプレートを書きます。
const Template = ({ ...args }) => (
  <Input {...args}/>
)

// 以下、Templateを使って、色々なパターンのPropsなどを渡したスタイルなどを定義できます。
// ここではわかりやすいように、とりあえずtextのインプットと、パスワード用のインプットを作ってみました。
export const TextInput = Template.bind({})
TextInput.args = {
    labelName: "", 
    labelTitle: "Title",
    inputType: "text",
    value: "",
    flex: true,
    borderColor: 'pink'
}

export const PasswordInput = Template.bind({})
PasswordInput.args = {
    labelName: "", 
    labelTitle: "Password",
    inputType: "password",
    value: "",
    flex: true,
    borderColor: 'blue'
}

4.Storybookを立ち上げてみる

さて、ここまで書けたらnpm run storybookをします。
すると、localhost:6006にStorybookが立ち上がりました。

下の方にControlsというタブが見えていますが、ここに直接値を渡すことでコンポーネントの見た目を動的に変えてみることができます。
例えば、valueの隣のインプットに文字を入れると、コンポーネント内のInputに値が表示されます。

次に、画面上部のDocsタブを開きます。
すると、コンポーネントファイルのPropTypesで設定した型の設定が反映されています。

これでStorybookが簡単に設定出来ました。
次回以降は、テストなど詳しい設定についても書いていきたいと思っています。