コンポーネントを独立して開発する

通常、アプリには多くのUIコンポーネントがあり、それぞれのコンポーネントには多くの異なる状態があります。例として、基本的なボタンコンポーネントには、以下の状態が考えられます。

• テキストラベル付きの通常の状態。
• 無効モード。
• ローディング状態。

通常、サンプルアプリやいくつかの例を実行しないと、これらの状態を確認するのは困難です。

Create React Appには、デフォルトではこのためのツールは含まれていませんが、Storybook for React (ソース) または React Styleguidist (ソース) をプロジェクトに追加できます。これらは、コンポーネントを開発し、アプリから独立してすべての状態を確認できるサードパーティ製のツールです。

Storybookまたはスタイルガイドを静的なアプリとしてデプロイすることもできます。これにより、チームの全員が、バックエンドサーバーを起動したり、アプリでアカウントを作成したりすることなく、UIコンポーネントのさまざまな状態を表示およびレビューできます。

Storybookを使い始める

Storybookは、React UIコンポーネントの開発環境です。コンポーネントライブラリの閲覧、各コンポーネントのさまざまな状態の表示、およびコンポーネントのインタラクティブな開発とテストが可能です。

アプリのディレクトリ内で次のコマンドを実行します。

npx -p @storybook/cli sb init

その後、画面の指示に従ってください。

React Storybookの詳細

• Learn Storybook (チュートリアル)
• ドキュメント
• GitHubリポジトリ
• Storybook + addon/storyshotによるUIのスナップショットテスト

Styleguidistを使い始める

Styleguidistは、すべてのコンポーネントがプロパティドキュメントと使用例とともに単一のページに表示されるスタイルガイドと、Storybookと同様にコンポーネントを独立して開発するための環境を組み合わせたものです。Styleguidistでは、各コードスニペットがライブで編集可能なプレイグラウンドとしてレンダリングされるMarkdownで例を記述します。

まず、Styleguidistをインストールします。

npm install --save react-styleguidist

または、yarnを使用することもできます。

yarn add react-styleguidist

次に、これらのスクリプトをpackage.jsonに追加します。

   "scripts": {
+    "styleguide": "styleguidist server",
+    "styleguide:build": "styleguidist build",
     "start": "react-scripts start",

次に、アプリのディレクトリ内で次のコマンドを実行します。

npm run styleguide

その後、画面の指示に従ってください。

React Styleguidistの詳細

• GitHubリポジトリ
• ドキュメント