Storybookとは？
Storybookとは？
- Storybookは、UIコンポーネントの動作を独立した環境でテストできるツールです。
- Storybookに追加されたコンポーネントは、サービスとは独立した環境でレンダリングされるため、再利用可能なコンポーネントである必要があります。
- Storybookは、開発者がコンポーネントの動作を理解するのに役立ちます。
- また、Figmaとの連携も可能であるため、デザイナーとのコミュニケーションにも効果があります。
なぜStorybook？
1. 文書化
⚫︎自動文書化: ストーリーブックは、コンポーネントの使用例を文書化するために使用でき、この文書は開発者とデザイナーの両方にとって有用な参考資料となります。
⚫︎コンポーネントカタログ: プロジェクト内のすべてのコンポーネントを一目で確認できるカタログを提供します。これは、チーム内でのコンポーネントの再利用を促進します。
2. UIテストとデバッグ
⚫︎ビジュアルテスト: ストーリーブックは、UIのビジュアルテストを容易にします。開発者は、さまざまな状態でコンポーネントを事前に確認でき、問題を容易に特定して修正することができます。
⚫︎インタラクティブ開発環境: コンポーネントの相互作用をリアルタイムでテストし、調整することができます。
エンジニアの観点
不要な作業を減らしてくれる
安定して検証されたコードを使用できる
カプセル化によりテストが容易になる
デザイナーの観点
デザインの変更時に簡単に修正可能
ユーザーに一貫した経験を提供する
開発者とのコミュニケーションが容易になる
Canvas area
| 構成 | 説明 |
|---|---|
| A. ストーリーリスト | 追加されたストーリーのリストです。 |
| B. プレビューエリア | 該当ストーリーをプレビューしたり、マウスのインタラクションを通じてイベントを確認できます。 |
| C. アドオンエリア | Storybookでアドオンを追加することにより、機能の拡張が可能です（Storybookの機能の大部分はアドオンで実装されています）。Controlsアドオンの場合、ストーリーのイベントチェックはもちろん、propsの値を変更してスタイルを確認することができます。 |
Docs area
| 構成 | 説明 |
|---|---|
| D. ドキュメント | ストーリーのPropsやイベントに関する説明を見ることができます。自動生成され、カスタマイズが可能です。 |
環境構築
yarnでviteを設定します。
yarn create vite
次に、以下のコマンドを使用してstorybookの設定を行います。
npx sb init --builder @storybook/builder-vite
yarn add -D @storybook/cli
npx storybook@next automigrate
yarn storybookでスタートします
yarn storybook
結論
コンポーネント単位で多くのことを考慮しながら開発を行うため、開発の速度は遅くなり、Storybookに関連する設定や問題を解決するのにそれだけ時間がかかるという点が欠点です。
そのため、個人が進行する小さなTOYプロジェクトや規模が小さいプロジェクトでは、導入することで得られる利点があまりないと考えられます。
しかし、規模が少しでも大きなプロジェクトや複数人が協力する環境では、上記の欠点を十分に相殺し、さらに余裕をもって、使用する立場からも理解しやすく、他人のコードを読んで理解する際のコストを削減できるとともに、開発する立場からも自然とコンポーネント中心の思考ができる点が組み合わさって効率的だと思われます。
また、開発チームでは、すべての開発者が他人のコンポーネントを使用するユーザーの立場でありながら、同時にコンポーネントを開発する開発者の立場であるため、組織の生産性を向上させるのに非常に適しているツールだと思います。
そして、ページが完成する前にも結果をコンポーネント単位で見ることができ、このような利点により、コンポーネント単位でフィードバックをしながら改善していくことができる点もまた、利点と感じられます。
Discussion