序章

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

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

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

これは、2番目のディレクトリ編成戦略の例です。 stories の外のディレクトリ src ディレクトリ:

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

これは、3番目のディレクトリ編成戦略の例です。 stories コンポーネントディレクトリのサブディレクトリ:

.
 └── 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コンポーネントを構築する方法に関するチュートリアルで学習を続けてください。