序章

Storybook は、UI(ユーザーインターフェイス)コンポーネントを分離して開発するためのオープンソースツールです。

つまり、開発者は、不安定なデータ、未完成のAPI、またはビジネスロジックを気にすることなく、アプリケーションとは別の環境でUIコンポーネントを作成できます。 これにより、コンポーネントを自信を持って出荷できます。

Screenshot of the Storybook landing page.

Storybookは、React、Vue、Angularなどのほとんどのフロントエンドフレームワークと統合されています。

この記事では、プロジェクトでStorybookを使用する方法を紹介します。

Storybookのユースケースの調査

Storybookを採用するためのいくつかのユースケースがあります。

  • コンポーネントライブラリ:Storybookの動作方法では、アプリケーション内のすべてのコンポーネントを1つの場所に配置し、コンポーネントの各状態をテストするこのプロセスを利用して、コンポーネントライブラリを維持できます。
  • 設計システム:設計システムは、さまざまな組み合わせで再利用できる一連のコンポーネントです。 設計システムを使用すると、設計を大規模に管理できます。 Storybookを使用すると、すぐに使用できるデザインシステムを入手できます。
  • ビジュアルテスト:Storybookアドオンを使用すると、ビジュアル回帰テストを統合して、コンポーネントライブラリのサイズに関係なく、コンポーネントライブラリをテストして一貫性を保つことができます。
  • チーム間で共有:ストーリーブックは、それ自体でのみ機能する静的サイトとして展開できるため、チーム間で共有できます。 チーム内の設計者とプロジェクトマネージャー間で共有して、チーム内のコラボレーションを改善するコンポーネントの現在の設計に関するフィードバックやコメントを提供できます。

いくつかのチームは、Storybookを使用して、コンポーネントライブラリの構成を大幅に強化し、設計システムの構成要素としても使用しています。 Salesforce Artsy GOV.UK GitHub などの企業は、Storybookを使用して、何百万人もの人々に影響を与えるUIコンポーネントを構築および配布しています。

ストーリーブックでストーリーを書く

ストーリーブックは、コンポーネントごとに異なるストーリーを組み合わせたものです。 ストーリーは、画面にレンダリングできるものを返す関数です。 ストーリーには、1つのコンポーネントの単一の状態を含めることも、コンポーネントの視覚的表現として表示することもできます。

Storybookを使用してUIコンポーネントを構築すると、アプリケーション内のすべてのコンポーネントが分離され、それらの間の接続に関係なく機能し、個別のUIコンポーネントとしてテストできるようになります。

Storybookを使用して構築する場合、アプリケーション内でストーリーを構造化および整理する方法はいくつかあります。

コンポーネントディレクトリ内にstories.jsファイルを使用したディレクトリ作成戦略の例を次に示します。

.
 └── src/
  └── components/
   └── button
    └── button.js
    └── button.stories.js

srcディレクトリの外側にstoriesディレクトリがある2番目のディレクトリ編成戦略の例を次に示します。

.
 └── src
  └── components
   └── button.js
 └── stories
  └── button.stories.js

コンポーネントディレクトリにstoriesサブディレクトリがある3番目のディレクトリ編成戦略の例を次に示します。

.
 └── src/
  └── components/
   └── button
    └── button.js
    └── stories
     └── button.stories.js

これらの方法のいずれかに従うことは選択の問題です。 あなたとあなたのチームに最適なものを選ぶのはあなた次第です。

Storybookと他のフレームワークの統合

Storybookは、利用可能なほぼすべてのフロントエンドフレームワークをサポートしており、これらのフレームワークのいずれかと統合するために、個々のフレームワークのストーリーブックをセットアップするために従うことができるガイドがストーリーブックチームによって作成されています。

他のフレームワークのサポートは、コミュニティアドオンで可能になります。

  • 残り火
  • HTML
  • ミスリル
  • マルコ
  • Svelte
  • 暴動
  • Preact
  • ラックス

ストーリーブックアドオンの使用

アドオンは、ストーリーブックの機能と動作を拡張します。

例として、@storybook/addon-actionsアドオンがあります。これは、イベントハンドラーが受信したデータをストーリーブックに記録するのに役立ちます。

プリインストールされているessentialアドオンのスイートがあります。 そして、コミュニティによって提供される多くのサードパーティのアドオン。

Storybookチームによってキュレーションされたすべてのアドオンのリストは、このアドオンページにあります。

Storybookを静的アプリとしてデプロイする

Storybookは、Webpack HMRを介したホットリロードなどの機能を備えた優れた開発者エクスペリエンスを提供するため、開発中のプロジェクトと一緒に使用できます。 ただし、ストーリーブックをそれ自体で静的サイトとして展開することで、これをさらに拡張することもできます。 これにより、スタイルガイドのリファレンスとしてコンポーネントをすべての人に紹介できます。

これには、次のスクリプトを使用してストーリーブックを構成する必要があります。

{
  "scripts": {
    "build-storybook": "build-storybook -c .storybook -o .out"
  }
}

npm run build-storybookまたはyarn build-storybookを実行すると、storybookディレクトリで構成されたストーリーブックが静的Webアプリにビルドされ、outというディレクトリ内に配置されます。 。 次に、GitHub Pages、Netlify、Nowなどのサービスを使用してそのディレクトリをデプロイできます。

結論

この記事では、Storybookとは何か、そしてWebアプリケーションを構築するときに利用することがいつ役立つかを学びました。

Storybookは多くのユースケースで機能し、ワークフローに統合することで、アプリケーションの包括的なUIコンポーネントを個別に構築できます。

ReactとStorybookを使用してインタラクティブなUIコンポーネントを構築する方法に関するチュートリアルで学習を続けてください。