🫡

便利なUIカタログツール「Storybook」とは？

KEISUKE

2024/12/19に公開

私たちの研究室

https://nisk.doshisha.ac.jp/

アドベントカレンダー 19日目

始めに〜Storybookとは？〜

Storybookは、ざっくり言えば「コンポーネントのUIカタログ」です。
フロントエンド開発におけるコンポーネントの開発，テスト，ドキュメント化を効率的に行うためのオープンソースかつ無料のツールで、主にコンポーネントベースのフレームワーク（React, Vue, Angular, etc...）で使用されます。
以前までは、コンポーネントの挙動確認のためには、プロジェクト全体の起動する必要があり、非常に面倒なプロセスでした。
それが、コンポーネント単位でUI上での挙動を確認できるStorybookの登場により一気に効率的になりました。
今回はこのStorybookの簡単な導入の仕方を解説したいと思います！

実践

今回は、Reactを使って簡単なコンポーネントの表示までを実践したいと思います。
まずは、Reactのプロジェクトを作成します（⬇︎React＋TypeScriptのプロジェクト作成用のコマンド）

npx create-react-app react-storybook --template typescript

次に、プロジェクトのルートディレクトリにStorybookをインストールします。
基本的には、公式サイト⬇︎を参考にすれば大丈夫です。

プロジェクトのルートディレクトリで、

npx storybook@latest init

を実行します。
場合によっては、以下のこと聞かれます。

? Do you want to manually choose a Storybook project type to install? › (y/N)

⇧ これは、手動でインストールするか聞かれてるので、y (yes)を選択し、

✔ Do you want to manually choose a Storybook project type to install? … yes
? Please choose a project type from the following list: › - Use arrow-keys. Return to submit.
❯   react
    react_scripts
    react_native
    react_project
    webpack_react
    nextjs
    vue3
    angular
    ember
  ↓ web_components

⇧これは、見れば大体わかると思いますが自分の用いるフレームワークを選択しましょう。
しばらくすると完了画面が出てきます。
これでインストールは完了です！

で、完了するとすぐにブラウザでlocalhost:6006でStorybookが立ち上がります。

⇧ これがStorybookの画面です！
ただ、これは何も実装してない状態なので、簡単なコンポーネントを作ってそれを反映していきましょう。

適当にコンポーネントファイルを作成します。（⬇︎今回作ったボタンのコンポーネントのコード）

react-storybook/src/Button.tsx

import React from "react";
import styled, { css } from "styled-components";

export interface ButtonProps {
  size?: "small" | "medium" | "large";
  children?: string;
  onClick?: () => void;
}

export const Button = ({ size = "medium", children }: ButtonProps) => {
  return <StyledButton size={size}>{children}</StyledButton>;
};

const StyledButton = styled.button<ButtonProps>`
  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  border: 0;
  border-radius: 3em;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
  ${(props) => props.size && SIZE[props.size]}
`;

const SIZE = {
  small: css`
    font-size: 12px;
    padding: 10px 16px;
  `,
  medium: css`
    font-size: 14px;
    padding: 11px 20px;
  `,
  large: css`
    font-size: 16px;
    padding: 12px 24px;
  `,
};

あとはこのコンポーネントに対応するStoryファイルを作成します。

その前にStorybookで追加されるフォルダたちについて解説します。

react-storybook/.storybook
Storybook自体の構成ファイルが入ってます。いじらないでそっとしときましょう。
react-storybook/src/stories
Storybookに表示するコンポーネントと、その状態を定義するファイルたちです。デフォルトではサンプルファイルが入ってます。

今回は、ボタンのサイズとボタンテキストを変更できるようにStoryファイルを作ります。

react-storybook/src/stories/Button.stories.ts

import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "../Button.tsx";

const meta = {
  title: "Button",
  component: Button,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Large: Story = {
  args: {
    size: "large",
    children: "Button",
  },
};

export const Medium: Story = {
  args: {
    size: "medium",
    children: "Button",
  },
};

export const Small: Story = {
  args: {
    size: "small",
    children: "Button",
  },
};

これでStorybookにボタンのカタログが反映されました！見てみましょ。

npm run storybook

を実行すると、任意のタイミングでStorybookを立ち上げることができます。
ここで、左にあるカタログバーを確認すると、無事「Button」のカタログが生成されていることが分かります。（下にあるButtonは元からあるサンプルファイルのやつです）

立ち上げたStorybookの画面
画面中央らへんにあるコントロールスイッチで、色々な状態のコンポーネントを瞬時に確認することが可能です。

最後に

今回は軽い紹介だけになりましたが、もっと知りたいって人はこちらを参考にしてください！
https://storybook.js.org/

以上です、簡単な記事でしたがご覧いただきありがとうございました！

NISLab 小板研究室Publication

同志社大学ネットワーク情報システム研究室（小板研究室 nisk.doshisha.ac.jp/ NISLab 小板研

私たちの研究室

アドベントカレンダー 19日目

始めに 〜Storybookとは？〜

実践

最後に

Discussion

始めに〜Storybookとは？〜