フロントエンドプロジェクトの開始時には、通常、美しいインターフェイスが最初に設計されています。すべてのUIコンポーネントとそれらのさまざまな状態と効果を慎重に計画および描画します。ただし、開発中は状況が変化する傾向があります。新しい要求と予期せぬユースケースが次々と出現しています。当初の美しいコンポーネントのライブラリは、これらのニーズのすべてをカバーするものではなく、新しいデザインを追加し続ける必要があります。
現時点であなたの周りにデザインの専門家がいる場合、それは素晴らしいことですが、彼らはしばしば他のプロジェクトに切り替えて、これらの変更に対処するために開発者だけを残します。その結果、設計の一貫性は低下し始めます。コンポーネントライブラリの既存のコンポーネント、そのステータスと外観を追跡することは困難です。
この設計の混乱を避けるために、通常、すべてのコンポーネントに個別のドキュメントを作成することが最善です。この目的のために利用できるさまざまなツールがありますが、この記事はReactアプリケーション専用に設計されたツールであるReact Storybookに焦点を当てます。コンポーネントとその機能のコレクションを簡単に閲覧できます。 Reactネイティブコンポーネントライブラリは、このようなアプリケーションの例です。
デザイナーまたはUXエキスパート
開発者
テスターは、コンポーネントが予想どおりに実装されていることを慎重に確認します。テスターの主な仕事の1つは、コンポーネントがあらゆる面で正しく機能することを確認することです。これは統合テストの必要性を排除するものではありませんが、通常、プロジェクト自体で単独で行うよりも便利です。
設計および実装担当者を受け取ります。プロダクトオーナーは、プロジェクトのすべての部分が期待に沿っていること、およびブランドスタイルが一貫していることを確認する必要があります。
関係者全員が共通しているのは、すべてのコンポーネントを持つ単一の場所を持っていることに気づいたかもしれません。プロジェクト自体のすべてのコンポーネントを見つけることは非常に退屈です。それについて考えてください、プロジェクト内のすべての可能なボタンバリアント（そのステータス（無効、プライマリ、セカンダリなど）を見つけるのにどれくらい時間がかかりますか？したがって、別のライブラリを持つ方がはるかに便利です。
私があなたに納得したなら、あなたのプロジェクトにストーリーブックを設定する方法を見てみましょう。
ストーリーブックを生成するには、Getttorybookをグローバルにインストールしてください：
その後、プロジェクトに移動して実行します：
<code>npm i -g getstorybook</code>
このコマンドは、次の3つの操作を実行します
<code>getstorybook</code>
StoryBookとBuild-StorybookスクリプトをPackage.jsonファイルに追加します。
新しいコンテンツを追加
ストーリーファイルを配置する場所を自由に選択できます。別のストーリーフォルダーまたはコンポーネントの横にあります。私は個人的に後者を好みます。なぜなら、コンポーネントにストーリーを置くことは、それらをアクセスしやすく最新の状態に保つのに役立つからです。
//src/stories/index.js
import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';
storiesOf('Welcome', module)
.add('to Storybook', () => (
<Welcome showApp={linkTo('Button')}/>
));
storiesOf('Button', module)
.add('with text', () => <Button>Hello Button</Button>)
.add('with some emoji', () => <Button>? ? ? ?</Button>);<code>npm i -g getstorybook</code>
<code>getstorybook</code>
（以下の内容は基本的に元のテキストと一致しており、セマンティクスを変更しないように少し調整し、部分的な説明が簡素化されます）
//src/stories/index.js
import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';
storiesOf('Welcome', module)
.add('to Storybook', () => (
<Welcome showApp={linkTo('Button')}/>
));
storiesOf('Button', module)
.add('with text', () => <Button>Hello Button</Button>)
.add('with some emoji', () => <Button>? ? ? ?</Button>);import { configure } from '@kadira/storybook';
function loadStories() {
require('../src/stories');
}
configure(loadStories, module);ストーリーブックを開いて、新しいコンポーネントを表示します。結果は次のようにする必要があります
import { configure, addDecorator } from '@kadira/storybook';
import React from 'react';
configure(() => {
const req = require.context('../src', true, /.stories\.js$/);
req.keys().forEach(filename => req(filename));
},
module
);コンポーネントの表示方法とそのソースコードを自由に変更してください。 Reactのホットなリロード機能により、ブラウザを手動で更新せずに、ストーリーやコンポーネントを編集するたびに変更がすぐにストーリーブックに変更が表示されることに注意してください。ただし、ファイルを追加または削除する場合、更新が必要になる場合があります。ストーリーブックは常にこれらの変更に気付くとは限りません。 
（次のコンテンツも合理化され、セマンティックの一貫性を維持するために調整されています）
カスタマイズを表示
ストーリーの表示方法を変更したい場合は、コンテナにラップできます。これは、AddDecorator機能を使用して実行できます。たとえば、次のコードを.storybook/config.jsに追加することにより、すべてのページに「例」タイトルを追加できます。
import React from 'react';
import './Name.css';
const Name = (props) => (
<div className={`name ${props.type}`}> {props.name} </div>
);
Name.propTypes = {
type: React.PropTypes.oneOf(['highlight', 'disabled']),
};
export default Name;GitHubのプロジェクトに取り組んでいる場合は、StorybookをDocsフォルダーに構築してリポジトリにプッシュすることで、ストーリーブックを公開できます。 GitHubは、GitHubページのWebサイトをそこから提供するように構成できます。ビルドストーリーブックをリポジトリに保存したくない場合は、StoryBook-Deployerを使用することもできます。
ストーリーブックは、ストーリーの多くの機能をサポートするように構成されています。 Create-React-Appと同じES2015構文で記述できますが、プロジェクトが別のBabel構成を使用すると、.babelrcファイルが自動的にピックアップされます。 JSONファイルや画像をインポートすることもできます。
これで十分でないと思われる場合は、.storybookフォルダーにwebpack.config.jsファイルを作成して、追加のWebPack構成を追加できます。このファイルによってエクスポートされる構成オプションは、デフォルトの構成とマージされます。たとえば、ストーリーにSCSSのサポートを追加するには、次のコードを追加するだけです。
<code>npm i -g getstorybook</code>
必要なWebpack構成を追加できますが、エントリ、出力、および最初のBabelローダーをオーバーライドすることはできません。
開発環境と生産環境にさまざまな構成を追加する場合は、関数をエクスポートできます。基本的な構成と「開発」または「生産」に設定されたconfigType変数を使用して呼び出されます。
（次の部分が合理化され、アドオンの導入が調整されています）ストーリーブックには、アクションとリンクという2つの事前に設定されたアドオンが付属しています。それらを使用するために追加の構成を作成する必要はありません。
アクション：
アクションロガーパネルでコンポーネントトリガーイベントをログに記録できます。
デコレーターを使用してストーリーを包みます。
npm i --save-dev @storybook/addon-knobs情報：.storybook/addons.jsソースコード、説明、React Proptypesなど、ストーリーに関する情報をさらに追加できます。インストール方法：withKnobs、登録方法：
を使用します。
npm i --save-dev @storybook/addon-info自動テスト.storybook/preview.jsaddDecorator
Kadiraは、Storybook Hubと呼ばれるサービスとしてのStorybookも提供しています。これにより、ストーリーブックをホストし、次のレベルにコラボレーションを行うことができます。標準機能に加えて、GitHubと統合され、プルリクエストごとに新しいストーリーブックを生成できます。また、ストーリーブックに直接コメントを残して、同僚との変更について話し合うこともできます。
結論プロジェクトでUIコンポーネントを維持することが痛みを伴うようになっていると感じたら、一歩下がって、欠けているものを確認してください。関係するすべての関係者間で便利なコラボレーションプラットフォームが必要になる場合があります。この場合、React Projectの場合、Storybookはあなたに最適なツールです。
すでにストーリーブックを使用していますか？試してみるつもりですか？なぜ？またはなぜですか？コメントでお聞きしたいです。
（FAQパーツが合理化され、構造が調整されます）faq（faq）
.storybook/addons.jsReact Storybookの学習曲線は何ですか？ 以上がReact Storybook：美しいユーザーインターフェイスを簡単に開発しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
