React Storybook キャッチアップ

charter48
2025年6月10日

Storybook導入：UIを見える化して再利用しやすくする

Reactでコンポーネントを増やしていくと、「この部品どう使うんだっけ？」「見た目崩れてない？」みたいな問題が出てくる。
Storybookを導入すると、それがすべて一発で解決する。

UIをドキュメント化・単体表示・動作確認できる環境、それがStorybook。

Storybookって何ができる？

コンポーネントをブラウザで個別に確認できる
Propsの挙動をリアルタイムで変更して検証できる
ユースケースやパターンをストーリーとして管理できる
チームやデザイナーとUIの認識合わせがしやすくなる

導入の流れ（ざっくり）

プロジェクトにstorybook関連パッケージを追加
npx storybook initで設定ファイル生成
*.stories.tsx/jsxファイルを作ってUIを登録
npm run storybookでローカル起動

bash
npm install
npm run storybook

ストーリーファイルの基本構成

jsx
// Button.stories.js
import { Button } from './Button';

export default {
  title: 'Components/Button',
  component: Button,
};

export const Primary = () => (
  <Button label="Click me" variant="primary" onClick={() => alert("clicked")} />
);

export const Secondary = () => (
  <Button label="Cancel" variant="secondary" />
);

titleでStorybook上のカテゴリと表示名を決定
componentに対象コンポーネントを指定
各export関数が**ストーリー（UIのバリエーション）**になる

Storybookを使うメリット

✅ UIコンポーネントの「動くカタログ」になる

Storybookは開発中のUIパーツのプレビュー環境として超便利。
新しく作ったコンポーネントをチームに共有するときも、「とりあえずStorybook見て」でOK。

✅ Props変更もリアルタイム

Controlsパネルで、文字列・数値・色などをリアルタイムで変更できる。

jsx
<Button label="テスト" variant="primary" />

→ これをPropsを変えながらその場で挙動確認できる。

✅ イベント確認も可能

jsx
<Button onClick={action("clicked")} />

→ Actionsアドオンを使えば、クリックなどのイベントログが見えるようになる。

✅ バリエーションの整理ができる

通常状態
無効化
ローディング中
異常系（テキストオーバーフローなど）

UIのすべての状態をストーリー化しておけば、バグやデグレを未然に防げる。

チームで使うと強いポイント

デザイナーとのUI確認用として使える
エンジニア間で「この部品どうなってる？」の確認がラク
リグレッションテストのベースにも使える（+Chromaticなど）

導入の注意点

必須ではないけど、チームでUI開発してるなら絶対に導入価値あり
コンポーネントが細かく分かれてないとあまり活きない（＝Atomic Designと相性◎）
.stories.js/tsが肥大化しすぎないように注意

👇 サンプル：Storybookで開発・管理されたButtonコンポーネント

まとめ

StorybookはReactコンポーネントの開発・管理・検証を効率化するツール
単体表示・Props操作・イベント確認・バリエーション整理が全部できる
アトミックデザインやデザインシステムとの相性が抜群
実務では「UIの見える化」「変更の影響チェック」に大きく貢献する

React