React Storybook：美しいユーザーインターフェイスを簡単に開発します

フロントエンドプロジェクトの開始時には、通常、美しいインターフェイスが最初に設計されています。すべてのUIコンポーネントとそれらのさまざまな状態と効果を慎重に計画および描画します。ただし、開発中は状況が変化する傾向があります。新しい要求と予期せぬユースケースが次々と出現しています。当初の美しいコンポーネントのライブラリは、これらのニーズのすべてをカバーするものではなく、新しいデザインを追加し続ける必要があります。

現時点であなたの周りにデザインの専門家がいる場合、それは素晴らしいことですが、彼らはしばしば他のプロジェクトに切り替えて、これらの変更に対処するために開発者だけを残します。その結果、設計の一貫性は低下し始めます。コンポーネントライブラリの既存のコンポーネント、そのステータスと外観を追跡することは困難です。

この設計の混乱を避けるために、通常、すべてのコンポーネントに個別のドキュメントを作成することが最善です。この目的のために利用できるさまざまなツールがありますが、この記事はReactアプリケーション専用に設計されたツールであるReact Storybookに焦点を当てます。コンポーネントとその機能のコレクションを簡単に閲覧できます。 Reactネイティブコンポーネントライブラリは、このようなアプリケーションの例です。

キーポイント

• UIの開発を簡素化：Reactストーリーブックは、UIコンポーネントの開発と管理プロセスを簡素化し、開発者が独立してコンポーネントを構築し、リアルタイムで動作を視覚化できるようにします。
• 強化されたコラボレーション：これは、すべてのUIコンポーネントを表示および対話するための単一の場所を提供することにより、デザイナー、開発者、およびその他の利害関係者の間のギャップを埋めるコラボレーションプラットフォームとして機能します。
• カスタマイズ可能でスケーラブル：アドオンと構成設定を備えた幅広いカスタマイズオプションを提供し、開発者が特定のプロジェクトのニーズに合わせてツールをカスタマイズできるようにします。
• 自動テストのサポート：JESTおよびその他のテストフレームワークと統合して、UIコンポーネント開発環境での直接自動テストを容易にします。
• 広く汎用性があり、スケーラブル：小規模および大規模プロジェクトに適しており、React以外の他のJavaScriptフレームワークをサポートしているため、さまざまな開発チームに多目的な選択肢となっています。

なぜReact Storybookが必要なのですか？

では、この表示はどのように役立ちますか？この質問に答えるために、UIコンポーネントの開発に関与する人々をリストし、彼らのニーズを評価してみましょう。ワークフローによっては、このリストは異なる場合がありますが、通常は次のものが含まれます。

デザイナーまたはUXエキスパート

ユーザーインターフェイスの外観と感触を担当します。プロジェクトのプロトタイプフェーズが完了した後、デザイナーは通常チームを去ります。新しい要件が発生した場合、UIの現在の状態を迅速に理解する必要があります。

開発者

開発者は、これらのコンポーネントを作成するものであり、スタイルガイドの主な受益者である可能性があります。開発者には2つの主なユースケースがあります。ライブラリから適切なコンポーネントを見つけて、開発中にテストすることができるということです。

tester

テスターは、コンポーネントが予想どおりに実装されていることを慎重に確認します。テスターの主な仕事の1つは、コンポーネントがあらゆる面で正しく機能することを確認することです。これは統合テストの必要性を排除するものではありませんが、通常、プロジェクト自体で単独で行うよりも便利です。

プロダクトオーナー

設計および実装担当者を受け取ります。プロダクトオーナーは、プロジェクトのすべての部分が期待に沿っていること、およびブランドスタイルが一貫していることを確認する必要があります。

関係者全員が共通しているのは、すべてのコンポーネントを持つ単一の場所を持っていることに気づいたかもしれません。プロジェクト自体のすべてのコンポーネントを見つけることは非常に退屈です。それについて考えてください、プロジェクト内のすべての可能なボタンバリアント（そのステータス（無効、プライマリ、セカンダリなど）を見つけるのにどれくらい時間がかかりますか？したがって、別のライブラリを持つ方がはるかに便利です。

私があなたに納得したなら、あなたのプロジェクトにストーリーブックを設定する方法を見てみましょう。

React Storybook Reactストーリーブックを設定するには、最初にReactプロジェクトが必要です。現時点で適切なプロジェクトがない場合は、Create-React-Appで簡単に作成できます。

ストーリーブックを生成するには、Getttorybookをグローバルにインストールしてください：

その後、プロジェクトに移動して実行します：

<code>npm i -g getstorybook</code>

このコマンドは、次の3つの操作を実行します

<code>getstorybook</code>

@Kadira/Storybookをプロジェクトにインストールします。

StoryBookとBuild-StorybookスクリプトをPackage.jsonファイルに追加します。

• 基本的な構成を備えた.storybookフォルダーと、サンプルコンポーネントとストーリーを備えたストーリーフォルダーを作成します。
ストーリーブックを実行するには、NPMを実行してストーリーブックを実行して表示されたアドレスを開きます（
• https://www.php.cn/link/93e4d7106625e1b0f2eb8af065c83452
：

新しいコンテンツを追加

React Storybookが実行されているので、新しいコンテンツを追加する方法を見てみましょう。新しいページは、ストーリーを作成することで追加されます。これらは、コンポーネントをレンダリングするコードのスニペットです。 gettstorybookによって生成されたサンプルストーリーを以下に示します。 Storiesof関数は、ナビゲーションメニューに新しい部分を作成し、ADDメソッドは新しいサブパートを作成します。ストーリーブックを自由に整理することはできますが、2つのレベルを超える階層を作成することはできません。ストーリーブックを整理する簡単な方法の1つは、「フォーム入力」、「ナビゲーション」、「ウィジェット」、および個々のコンポーネントのサブパートなど、関連する要素グループの共通のトップレベルセクションを作成することです。

ストーリーファイルを配置する場所を自由に選択できます。別のストーリーフォルダーまたはコンポーネントの横にあります。私は個人的に後者を好みます。なぜなら、コンポーネントにストーリーを置くことは、それらをアクセスしやすく最新の状態に保つのに役立つからです。

//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>);

ストーリーは.storybook/config.jsファイルにロードされています。これには、次のコードが含まれています。

<code>npm i -g getstorybook</code>

<code>getstorybook</code>

ソースコードとして別のフォルダーを使用している場合は、正しい場所を指すようにしてください。変更を実施するためのストーリーブックを再実行します。 Storybookはindex.jsファイルをインポートしなくなったため空になりますが、この問題はすぐに解決します。

（以下の内容は基本的に元のテキストと一致しており、セマンティクスを変更しないように少し調整し、部分的な説明が簡素化されます）

新しいストーリーを書く

私たちのニーズに合わせてストーリーブックをわずかに微調整したので、最初のストーリーを書きましょう。しかし、最初に表示するコンポーネントを作成する必要があります。色のブロックに名前を表示するシンプルな名前コンポーネントを作成しましょう。このコンポーネントには、次のJavaScriptとCSSがあります。

//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);

この単純なコンポーネントには、デフォルト、ハイライト、および無効の3つの状態があることに気付いたかもしれません。これらすべての状態を視覚化するのはいいことではないでしょうか？このための物語を書きましょう。新しいname.stories.jsファイルをコンポーネントの横に作成し、以下を追加します。

ストーリーブックを開いて、新しいコンポーネントを表示します。結果は次のようにする必要があります

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に追加することにより、すべてのページに「例」タイトルを追加できます。

Storiesofの後にAddDecoratorを呼び出すことで、個別の部品をカスタマイズすることもできます。

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;

ストーリーブックを投稿しました

ストーリーブックの作業を行って、公開する準備ができていると思うと、実行して静的Webサイトとして構築できます。 デフォルトでは、ストーリーブックはStoryBook-Staticフォルダーに組み込まれています。 -oパラメーターを使用して出力ディレクトリを変更できます。これで、お気に入りのホスティングプラットフォームにアップロードする必要があります。

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>

SASS-RoaderとNode-Sassをインストールすることを忘れないでください。

必要なWebpack構成を追加できますが、エントリ、出力、および最初のBabelローダーをオーバーライドすることはできません。

開発環境と生産環境にさまざまな構成を追加する場合は、関数をエクスポートできます。基本的な構成と「開発」または「生産」に設定されたconfigType変数を使用して呼び出されます。

アドオンを使用して機能を拡張します ストーリーブック自体は非常に便利ですが、それを改善するためには、いくつかのアドオンがあります。この記事では、それらのいくつかのみをカバーしていますが、後で公式リストをチェックしてください。

（次の部分が合理化され、アドオンの導入が調整されています）ストーリーブックには、アクションとリンクという2つの事前に設定されたアドオンが付属しています。それらを使用するために追加の構成を作成する必要はありません。

アクション：

アクションロガーパネルでコンポーネントトリガーイベントをログに記録できます。

• リンク：コンポーネント間にナビゲーションを追加できます。
• ノブ：実行時にUIから直接反応特性を変更して、コンポーネントをカスタマイズできます。インストール方法：
、登録方法：インポート

。

デコレーターを使用してストーリーを包みます。 npm i --save-dev @storybook/addon-knobs情報：.storybook/addons.jsソースコード、説明、React Proptypesなど、ストーリーに関する情報をさらに追加できます。インストール方法：withKnobs、登録方法：

in

を使用します。 npm i --save-dev @storybook/addon-info自動テスト.storybook/preview.jsaddDecorator

ストーリーブックの重要な側面（この記事に記載されていない）は、自動テストを実行するためのプラットフォームとして使用することです。ユニットテストから機能テストや視覚回帰テストまで、さまざまなテストを実行できます。予想どおり、テストプラットフォームとしてのストーリーブックの機能を強化するために設計されたアドオンがいくつかあります。彼らは別々の記事に値するので、私たちは詳細には触れませんが、それでもそれらについて言及したいと思います。

• 仕様：ストーリーファイルにユニットテストを直接書き込むことができます。
• ストーリーショット：ストーリーに基づいてJest Snapshotテストを実行できます。

サービスとしてのストーリーブック

Kadiraは、Storybook Hubと呼ばれるサービスとしてのStorybookも提供しています。これにより、ストーリーブックをホストし、次のレベルにコラボレーションを行うことができます。標準機能に加えて、GitHubと統合され、プルリクエストごとに新しいストーリーブックを生成できます。また、ストーリーブックに直接コメントを残して、同僚との変更について話し合うこともできます。

結論

プロジェクトでUIコンポーネントを維持することが痛みを伴うようになっていると感じたら、一歩下がって、欠けているものを確認してください。関係するすべての関係者間で便利なコラボレーションプラットフォームが必要になる場合があります。この場合、React Projectの場合、Storybookはあなたに最適なツールです。

すでにストーリーブックを使用していますか？試してみるつもりですか？なぜ？またはなぜですか？コメントでお聞きしたいです。

（FAQパーツが合理化され、構造が調整されます）

faq（faq）

React Storybookは他のUI開発ツールとどう違うのですか？
• React Storybookを使用すると、開発者はコンポーネントを個別に構築できるようになり、開発プロセスがより速く効率的になり、リアルタイムの視覚テスト環境を提供できます。
他のJavaScriptフレームワークでReact Storybookを使用できますか？
• はい、Vue.jsやAngularなどのフレームワークをサポートしています。
私のストーリーブックにアドオンを追加する方法は？ NPMまたはYARNを介してインストールし、
• ファイルに追加し、ドキュメントに従って構成します。 .storybook/addons.jsReact Storybookの学習曲線は何ですか？
JavaScriptに精通して反応する場合は、すぐに開始できるはずです。
• 大規模なプロジェクトにReact Storybookを使用できますか？
はい、Airbnb、IBM、Lyftなどの大規模な組織で使用されています。
• 私のストーリーブックを他の人と共有する方法は？
GitHubページなどの静的マネージドサービスに展開したり、StoryBook Deployerを使用してNetLifyを使用したりできます。
• React Storybookでコンポーネントをテストできますか？
はい、視覚的なテスト環境を提供し、Jestなどのテストライブラリと統合できます。
• ストーリーブックの外観をカスタマイズする方法は？
ストーリーブックは、テーマのカスタマイズ、カスタムWebpack構成、カスタムアドオンの作成などのオプションを提供します。
• モバイルアプリケーション開発にReact Storybookを使用できますか？
はい、それはReactネイティブをサポートします。
• React Storybookはオープンソースですか？
はい、それはGithubでホストされており、世界中の開発者からの貢献を歓迎します。
• 要するに、元のテキストは、より簡潔でスムーズにするために大いに書き直され、元の意味を維持しました。 画像形式は同じままです。

以上がReact Storybook：美しいユーザーインターフェイスを簡単に開発しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。