Storybook 7.0 – 待望のアップデート情報と注目すべきポイント

皆さんご存知かと思いますが、 Storybook は開発チームの生産性を大きく向上させ、開発や作業のスケールアップや同じページでの作業をスムーズにしてくれるツールです。このツールは、UXPinでも活用できる新バージョンになります。今回のアップデートでは、いくつかの大きな改善点が加わり、 Storybook の機能が拡大されました。

 Storybook のコンポーネントをUXPinに取り込み、最終製品のような外観と機能を持つプロトタイプをデザインできます。デザインと開発間の一貫性を保ち、信頼できる唯一の情報源でチームをひとつにまとめましょう。UXPinのStorybook統合をこちらのリンクよりぜひお試しください。

 Storybook 7.0の魅力は？

Storybook 7.0の正式リリースは3月14日を予定しています。正式リリースに先立ち、ベータ版でお試しいただき、その効果を体験していただくこともできます。詳しくは、Storybookの2023年の予定についての記事でご紹介しています。

パフォーマンスの向上

Storybookのチームは、ツールの性能を大幅に向上させました。前バージョンに比べ、2倍以上のスピードを実現しました。

より多くの互換性のある統合を実現

Storybookの新バージョンでは、統合がより簡単になりました。Frameworks APIを提供開始に伴い、StorybookはVite、NextJSをサポートし、SvelteKitのサポートに取り組んでいます。また、Remix、Qwik、SolidJSなどの新しいフレームワークとの統合を検討できるようになったそうです。

より広範囲なテストが可能

コード・カバレッジ・レポートが追加されました。これで、コンポーネントやライブラリのどの行のコードが、ユーザーのストーリーによってテストされているかが見えるようになりました。

ドキュメントの改善

Storybookでは、ドキュメンテーションについてもいくつかのアップデートがあります。その1つとして、StorybookのチームがドキュメントをMDXのバージョン2にアップグレードしたことです。また、docsのストーリー（コンポーネント例）のインポート方法をより簡単にしたそうです。

Storybook 7.0とUXPinの連携

UXPinはすでにStorybook 7.0をサポートしています。StorybookのコンポーネントをUXPinと同期させましょう。とても簡単で、製品デザインや 開発プロセスを向上させる多くのメリットを得ることができます。

 Storybook のコンポーネントを使ったプロトタイプの作成

UXPinに持ち込まれたコンポーネントは、Storybookにあるものを単に視覚的に表現しているの だけではありません。これらは実際に機能し、実際のユーザーインタラクションをテストすることができます。これこそが、忠実度の高いプロトタイピングのあるべき姿なのです。

部門横断的なコラボレーションを促進

この統合では、製品設計と開発の間のサイロ化を解消することができます。チームは同じコンポーネントを共有することで、デザインと開発の間に起こる問題を防ぐことができます。

デザインハンドオフの効率化

完全に機能するコンポーネントでプロトタイプを作ることで、デザイナーはデザインのハンドオフプロセスを円滑に進めることができます。Storybookのコンポーネントは、チーム間で共有する信頼できる唯一の情報源となるため、大量のドキュメントを作成する必要がなく、ズレも生じません。

 Storybook との連携方法

統合には1分もかかりません。以下の動画でご紹介します。

使用したいStorybookライブラリへのリンク（パブリックまたはプライベート）が必要で、UXPinにログインし、フォームにリンクを貼り付けて新しいライブラリを追加します。

UXPinのStorybook統合のガイドツアーはこちらです。

UXPinと Storybook  7.0を試してみる

StorybookはUIコンポーネントの品質管理に最適なツールですが、UXPinと組み合わせることで、デザインシステムの維持と拡大につながります。Storybookコンポーネントを使ったインタラクティブなプロトタイプのデザインを始めましょう。