Skip to main content
Version: 5.1

Introduction to Storybook

それでは、Storybook がどのようなものかを見ていきましょう。このコマンドを実行して、Storybook サーバを起動します（開発やテストのランナーを停止してからこのコマンドを実行するか、別の新しいターミナルを起動しても構いません）：

yarn rw storybook

コンパイルが終わると、Storybook が起動して http://localhost:7910 で利用可能になったというメッセージが表示されるはずです。

image

左側のファイルツリーを見ると、チュートリアルで作成したコンポーネント、セル、レイアウト、ページがすべて表示されているのがわかると思います。これらはどこから来たのでしょうか？ 新しいページやセル、コンポーネントを作成するたびに、実際には少なくとも3つのファイルが作成されたことを思い出してください：

  • Article.tsx
  • Article.stories.tsx
  • Article.test.ts
info

セルを作成した場合は .mock.ts も作成されます（詳細は後述）。

この .stories.tsx ファイルがあるからこそ、Storybook ブラウザの左側にあるツリーを実現できるのです！ Storybookのホームページ によると、Storybook は次のように説明されています：

"... React、Vue、AngularなどのUIコンポーネントを分離して開発するためのオープンソースツールです。魅力的なUIの開発を整った形で効率よく実現します。"

つまりここで言いたいのは、コンポーネント、セル、ページを個別に作成し、必要な外観と正しいデータを表示させた後、アプリケーション全体に接続することができるということです。

Storybook を開くと、Components > Article > Generated が表示されているはずです。これは、1つのブログ記事を表示するために作成したコンポーネントです。 web/src/components/Article/Article.stories.tsx を開くと、このコンポーネントを Storybook に説明するのに必要なものがわかりますが、それほど多くはありません：

web/src/components/Article/Article.stories.js
import Article from './Article'

export const generated = () => {
  return (
    <Article
      article={{
        id: 1,
        title: 'First Post',
        body: `Neutra tacos hot chicken prism raw denim, put
              a bird on it enamel pin post-ironic vape cred
              DIY. Street art next level umami squid.
              Hammock hexagon glossier 8-bit banjo. Neutra
              la croix mixtape echo park four loko semiotics
              kitsch forage chambray. Semiotics salvia
              selfies jianbing hella shaman. Letterpress
              helvetica vaporware cronut, shaman butcher
              YOLO poke fixie hoodie gentrify woke
              heirloom.`,
        createdAt: '2020-01-01T12:34:45Z'
      }}
    />
  )
}

export default { title: 'Components/Article' }

使いたいコンポーネントをインポートすると、ファイル内の名前付きエクスポートはすべて、Storybookで表示される1つの "story" になります。この場合、ジェネレータは "generated" という名前を付けており、ツリービューでは "Generated" ストーリーとして表示されます：

Components
└── Article
    └── Generated

こうするとコンポーネントのバリアントを作って、まとめて表示するのが簡単になります。

Where did that sample blog post data come from?

実際のアプリではこのコンポーネントは次のように使用します：

<Article article={article} />

この props の article は、このコンポーネントの外からきたものです。ここ Storybook ではコンポーネントの "外" は存在しないので、articleオブジェクトを直接propsに送信するだけです。

しかし、入力済みの article はどこからきたのでしょうか？

私たち（Redwoodチーム）は、データを繋ぎこんだらストーリーがどのように見えるかを示すために、このようなサンプルデータを redwood-tutorial リポジトリに追加しました。いくつかのストーリーはこのようなデータを必要とし、いくつかはインラインで、いくつかは .mock.ts ファイルに含まれています。チュートリアルの残りの部分では、新しいコンポーネントを作成する際に、これを自分で行う方法を紹介します。

実際の 本文はどこからきたのでしょうか？

Hipster Ipsum ！Lorem Ipsumに代わる面白いやつ！