Storybook Args とは？Storybookでどのように改善されるのか

最近では、視覚的に美しいだけでなく、ユーザーの要求を効果的に満たすピクセルパーフェクトなUIがますます重視されるようになりました。このUIへの再注目は、この動向をサポートするツール、フレームワーク、環境の大幅な増加をもたらしました。Storybookは、UI開発をより速く、より簡単にするためのツールの1つです。

本記事では、Storybookの理解と、Storybook Argsがどう便利なのかについて簡単にお話すべく、まずStorybookについての簡単な説明とその大きな利点について述べ、それからArgsの概要とその使い方について説明します。

Storybookとは

初めての方に説明すると、Storybookとは、インタラクティブで効率的な方法でコンポーネントを作成・テストすることができる、UIコンポーネントの開発環境です。Storybookを通じて、コンポーネントライブラリを簡単に閲覧でき、各コンポーネントのさまざまな状態の確認もできます。また、デベロッパーのためのインタラクティブなデザインシステムとしても機能します。

Storybookを使用すると、さまざまな「ストーリー」を作成できます。ストーリーとは、コンポーネントを追加し、サンドボックス環境で様々なユースケースを作成・テストできる場所です。ストーリーブックでは、小さなスタンドアロンコンポーネントから、Webアプリケーションの複雑なページまで作成できます。

Storybookには、UIデザインプロセス全体の学習、実装、テスト、文書化をしやすくするエコシステムがあり、Githubのスタータープロジェクトのインストールから始められます。また、詳細なドキュメントや、エコシステムに慣れるのに役立つインタラクティブなチュートリアルもあります。

UI開発時に使われる理由

Storybook の何が一番いいかと言ったら、オープンソースのツールであることです。これだけでも、強力なUI開発ツールを探しているオープンソースコミュニティの支持者にとっては十分な理由になります。

UI開発、テスト、ドキュメンテーションを合理化するという事実の他に、Storybookの際立った特徴の1つは、UIを分離して構築できるサンドボックス環境であることです。これにより、最も重要な部分、つまり正しいコンポーネントとページの実装に集中でき、その間はデータ、API、ビジネスロジックのことを気にする必要はありません。

また、Storybookでは、難しいユースケースのモックも可能です。このような鍵となるステートは、アプリでの再現は少し難しいですが、Storybook を使えば全くの手間いらずです。

また、UIが実際にどのように動作するかをチームに確認させることで、タイムリーなフィードバックを得ることができ、StorybookにはStorybook Docsのような便利なアドオンが付属しており、高品質でカスタマイズ可能なMarkdown/MDXの記述ができます。

Argsとは

Storybook Argsは、入力引数を通して動的なデータの受け取りを可能にすることによって、ストーリーを書くためのより良い方法をもたらします。これらはストーリーのサイズを小さくするだけでなく、複数のストーリーにまたがってフィクスチャデータを再利用することができるため、ポータビリティも実現します。

Argsを理解するもう一つの方法は、Storybookが個別のJavaScriptオブジェクトに引数を確定するために展開される道具とみなすことです。これはコンポーネントのライブでの編集に便利ですが、Argsを使うために、基礎となるコンポーネントのコード変更は必要ないことに注意してください。

Storybook Argsの利用方法

まず、Argsオブジェクトが何であるかを見てみましょう。Argsオブジェクトは、JSONで直列化できるオブジェクトです。このオブジェクトは、有効な値の型にマッチした文字列のキーで構成されており、そのキーは、フレームワークのためのコンポーネントにできます。Argsオブジェクトを確定する方法には、「ストーリーレベル」と「コンポーネントレベル」の2つがあります。

ストーリーレベルでは、引数 CSF（主要成功要因）ストーリーキーは、それらが添付される単一のストーリーのための引数を確定するのに使われ、JavaScript の再利用オブジェクトを介して再利用することができます。一方、コンポーネントレベルでは、引数はコンポーネントのすべてのストーリーに適用され、これは特に上書きされない限り有効です。

ストーリーの引数は、他のストーリーへの合成のために分離することができ、これは、複合コンポーネント、つまり、他の様々なコンポーネントを使用して作成されたコンポーネントのストーリーを書く際に非常に便利です。この複合コンポーネントは、それぞれの子コンポーネントにそのまま引数を渡すことができ、引数によって、引数を直接合成することができます。

引数設定のもう一つの方法は、URL経由です。有効なストーリーの引数は、URLの引数クエリパラメータを使って上書きができます。これは URL を変更することで手動で行うか、【Controls】 と呼ばれるアドオンの助けによって自動化できます。セキュリティの強化のために、例えば英数字、数字、スペース、ダッシュ、アンダースコアのみ、この方法で確定される引数には一定の制限があります。URLを通じて実装される引数は、デフォルトで指定される引数を拡張し、オーバーライドします。

コンポーネントの改変

UXPinが提供するMergeテクノロジーは、自身のStorybookや既存の公開Storybookをシームレスに統合することで、作業がより快適なものになります。ストーリーブックの統合に関するステップバイステップガイドはこちらで確認できます。コードベースのコンポーネントをUXPinのインタラクティブな世界に持ち込み、Production-readyのインタラクティブなコンポーネントをプロトタイピングに使用すれば、数分でデザインを始めることができます。

​​引数を使用すると、コード内でコンポーネントのプロパティを変更する代わりに、UXPinのデザインエディタで簡単に変更できます。これの素晴らしい点は、事前のコーディング経験がなくても、業界標準のプロトタイプを構築できることです。すべてのフレームワークに対応しているため、特定のStorybookフレームワークについて心配する必要もありません。

まとめ

Storybookは、UIのデザインとテストをインタラクティブかつ使いやすい方法で行うことができる、完全なUI開発エコシステムであることに疑いの余地はないでしょう。その使いやすさと絶大な柔軟性により、業界をリードするUI開発ツールの1つとなっています。

UXPinでは、Storybookのパワーを活用することができ、MergeテクノロジーによってStorybookの引数から簡単に利益を得る方法が取り入れられています。これにより、デザインに関するあらゆる問題を簡単に解決し、最終製品との一貫性を持った魅力的なデザインを作成することができます。