Storybook

Storybook を分かりやすく

さて、今度の課題は「Storybook」ですね。これは、UIコンポーネントを開発するための強力なツールで、だいぶヤバいやつですよね〜（褒め言葉）。

Storybookを使うと、アプリケーションから独立して、UIコンポーネントを個々に開発できるんです。なんて便利なんでしょう。例えばボタンやカードなど、アプリケーションの小さな部分をそれぞれ個別に作り、テストし、調整することができます。各コンポーネントがどのように見えるか、どのように動作するかを確認することができますよね。

それを例え話にすると、想像してみてください。レゴのブロックを組み立てるのと似ています。各レゴのピース（＝コンポーネント）がどのように見えるか、どのように組み合わさるかを知ることができます。そして、それぞれのピースを組み立てるのに適した環境（＝Storybook）があるんです。

Storybookを使えば、レゴのピースを一つずつ、しっかりと確認しながら組み立てられます。それぞれのピースがどのように見えるか、どのように動作するかをテストすることができますよね。そして最終的には、すべてのピースが組み合わさって、一つの大きな作品（＝アプリケーション）を形成します。

一体どういうことなん？って思いますよね。でも、これがStorybookの凄さなんです。コンポーネントベースの開発を推進し、それぞれのコンポーネントを独立してテストできる環境を提供してくれるんです。なんて素晴らしいんでしょう！

ここまで大丈夫ですか？Storybook、ぜひ使ってみてくださいね。UIコンポーネントの開発が、もっともっと楽しく、効率的になりますよ。本当に、めっちゃ便利なんですよ！

結論

Storybook は、UI コンポーネントの開発を効率化するためのツールです。UI コンポーネントとは、ボタンやフォーム、カードなどのパーツのことを指します。これらのコンポーネントは、1 つずつ作成していく必要がありますが、Storybook を使うことで、作成したコンポーネントを一覧表示したり、実際のコンポーネントの見た目や動作をプレビューすることができます。

Storybook を使うことで、以下のようなメリットがあります。

• デザイナーやエンジニア、品質管理など、チーム全員が同じビジュアルを共有できる。
• コンポーネントの再利用が簡単になる。
• コンポーネントの状態を見ることができ、バグを見つけやすくなる。
• テストがしやすくなる。

Storybook は React や Vue.js、Angular などのフレームワークに対応しています。また、TypeScript や SCSS などの言語にも対応しています。

Storybook の使い方

まずは、以下のように Storybook をインストールします。

npm install @storybook/react

また、必要なライブラリをインストールします。

npm install react react-dom --save-dev

次に、.storybookという名前のディレクトリを作成し、その中にconfig.jsというファイルを作成します。このファイルには、Storybook の設定を書きます。

import { configure } from '@storybook/react'

const req = require.context('../src/components', true, /\.stories\.js$/)

function loadStories() {
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module)

この例では、src/componentsディレクトリ以下にある、.stories.jsで終わるファイルを Storybook で扱うファイルとして読み込んでいます。

次に、src/components/Button.stories.jsというファイルを作成します。このファイルには、Button コンポーネントの Storybook の設定を書きます。

import React from 'react'
import { Story, Meta } from '@storybook/react/types-6-0'
import { Button, ButtonProps } from 'components/Button'

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
    onClick: { action: 'clicked' },
  },
} as Meta

const Template: Story<ButtonProps> = (args) => <Button {...args} />

export const Primary = Template.bind({})
Primary.args = {
  primary: true,
  label: 'Button',
}

export const Secondary = Template.bind({})
Secondary.args = {
  label: 'Button',
}

export const Large = Template.bind({})
Large.args = {
  size: 'large',
  label: 'Button',
}

export const Small = Template.bind({})
Small.args = {
  size: 'small',
  label: 'Button',
}

Storybook では、まず最初に設定した title の名称でコンポーネントがグルーピングされます。title は、グループの階層を定義するために、スラッシュを使って階層を表現することもできます。その下に、各コンポーネントのスナップショットが表示されます。スナップショットは、Template と呼ばれるテンプレートを定義し、Story コンポーネントでラップすることによって生成されます。

Story コンポーネントには、先ほど定義した Primary、Secondary、Large、Small といった名前が指定されています。これらは、Storybook で表示される各スナップショットの名前に対応します。args プロパティには、先ほど作成した Button コンポーネントのプロパティが含まれています。

それぞれの Story コンポーネントで、プロパティの値を変更することができ、各スナップショットを生成する際に変更されたプロパティの値が反映されます。これによって、同じコンポーネントで異なる状態を持つ複数のスナップショットを作成することができます。

Storybook のメリットは、開発中のコンポーネントを手軽に確認できることです。Storybook を使うことで、UI の変更を簡単に確認でき、エラーを事前に発見することができます。また、Storybook の UI は非常に使いやすく、コンポーネントの仕様を確認するのにも役立ちます。