アルアカ - Arcadia Academia

Arcadia Academiaは「エンジニアリングを楽しむ」を合言葉に日本のデジタル競争力を高めることをミッションとするテックコミュニティです。

Storybookの使い方を徹底解説!フロントエンド開発の効率を向上させよう

Featured image of the post

Storybook は、UIコンポーネントの開発、テスト、ドキュメント作成を効率化するための強力なツールです。特に、React、Vue、Angularなどのコンポーネントベースのフレームワークで使用され、コンポーネントの分離開発やビジュアルテストに最適です。

本記事では、Storybookの基本的な使い方 をステップバイステップで解説します。


[目次を開く]

1. Storybookとは?

Storybook とは、UIコンポーネントを「ストーリー(story)」として独立して管理し、実装や動作をブラウザ上で確認できるツールです。コンポーネントの再利用性を高め、デザインシステムの管理を容易にします。

Storybookの主な特徴
  • コンポーネントの分離開発が可能(アプリから切り離してUI単位で作業)
  • 直感的なUIカタログを自動生成
  • コンポーネントごとのドキュメント作成が容易
  • 動作確認やビジュアルテストが簡単にできる

2. Storybookのインストール

まず、Storybookをプロジェクトに導入する方法を説明します。

必要な環境
Step 1: プロジェクトの準備

ReactやVueなどのフレームワークでプロジェクトを作成していない場合、以下のコマンドで新規作成します。

npx create-react-app my-app
cd my-app

または、Next.jsプロジェクトなら以下のように作成します。

npx create-next-app my-app
cd my-app

Step 2: Storybookのインストール

プロジェクトディレクトリに移動し、以下のコマンドを実行してStorybookをセットアップします。

npx storybook@latest init

このコマンドにより、プロジェクトに必要なファイルが自動生成されます。

成功すると、以下のようなメッセージが表示されます:

Image in a image block

Step 3: Storybookの起動

インストールが完了したら、次のコマンドでStorybookを起動できます。

npm run storybook

ブラウザで http://localhost:6006 を開くと、StorybookのUIが表示されます。

Image in a image block


3. Storybookの基本的な使い方

① ストーリーの作成

Storybookでは、各コンポーネントを「ストーリー」として記述します。src/stories フォルダにコンポーネントごとの.stories.jsまたは.stories.tsxファイルを作成します。

例:Buttonコンポーネントのストーリー(Button.stories.js

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

// Storybookのメタデータ
export default {
  title: 'Example/Button',
  component: Button,
};

// 各バリエーションをストーリーとして定義
export const Primary = () => <Button primary label="Primary Button" />;
export const Secondary = () => <Button label="Secondary Button" />;
export const Disabled = () => <Button disabled label="Disabled Button" />;

② Storybookのアドオン活用

Storybookにはさまざまなアドオンがあり、UI開発を強力にサポートします。

便利なアドオン例
アドオン名 機能
@storybook/addon-essentials 基本的なコントロール、ドキュメント、背景色設定など
@storybook/addon-interactions ユーザーインタラクションのシミュレーション
@storybook/addon-actions イベントハンドラーの確認
@storybook/addon-a11y アクセシビリティチェック

アドオンの追加方法(例:a11yアドオン)

npm install @storybook/addon-a11y --save-dev

次に、storybook/main.js にアドオンを追加します。

module.exports = {
  addons: ['@storybook/addon-a11y'],
};

③ コンポーネントのプロパティ管理(Args)

Storybookでは、コンポーネントのプロパティ(Props)を「Args」として制御できます。これにより、UIのリアルタイムプレビューが可能になります。

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

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    label: { control: 'text' },
    primary: { control: 'boolean' },
  },
};

const Template = (args) => <Button {...args} />;

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

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

StorybookのUI上で、プロパティを変更して動的にコンポーネントを確認できます。


4. Storybookのデプロイ方法

作成したStorybookをGitHub PagesやVercelなどのサービスで公開することができます。

① Storybookのビルド

静的ファイルとしてエクスポートするには、以下のコマンドを実行します。

npm run build-storybook

生成された storybook-static フォルダを任意のホスティングサービスにアップロードします。

② GitHub Pagesにデプロイ(gh-pagesを使用)
npm install gh-pages --save-dev

package.json に以下のスクリプトを追加します。

"scripts": {
  "deploy-storybook": "gh-pages -d storybook-static"
}

以下のコマンドでデプロイを実行します。

npm run deploy-storybook

まとめ

Storybookを活用することで、UIコンポーネントの管理・テストが容易になり、チーム開発の生産性が向上します。

この記事のまとめ

  1. Storybookのインストール方法npx storybook@latest init
  2. ストーリーの作成方法Button.stories.jsの作成)
  3. アドオンの活用@storybook/addon-a11y など)
  4. ビルド&デプロイ方法(GitHub Pagesなど)

Storybookを導入して、効率的なUIコンポーネント開発を始めましょう!

あなたを爆速で成長させるメンタリングプログラムはこちらから↓↓

RUNTEQ(ランテック) - 実践型Webエンジニア養成プログラミングスクールの入会