コンポーネントライブラリを構築するためのStorybookフレームワーク

コンポーネントライブラリ を作ることで、UI開発を効率化し、失敗しないようにすることができます。（なぜUI開発に使う必要がある？）コンポーネントライブラリを作るメリットには以下のようなものがあります：

• 現在のガイドラインに沿った信頼できる唯一の情報源を作ることができる。
• 重要なマイルストーンやリリース日に間に合わせる必要がある場合、迅速にスケールアップすることができる。
• 製品チームのコラボレーションとコミュニケーションを向上させる。
• コードの重複を減らす。
• 複数のデバイスで動作するデジタル製品の構築。

UXPinがStorybookの統合を提供している今、アクセスできるStorybookのフレームワークについて学んでみましょう。Storybookが普及しているということは、あなたの開発チームのメンバーは、すでにこれらの一般的なフレームワークを使った経験があるということです。もしそうでなければ、Storybookのフレームワークの長所と短所を知る機会を与えてあげましょう。

Storybook for React

Reactは、たくさんの利点を持つJavaScriptライブラリです。私たちは、以下のようなReactの機能に対する評価を投稿してきました：

• コンポーネントの再利用性。
• 不具合を修正するための簡単なオプションを備えた安定したコード。
• 特にJavaScriptに慣れている人にとっては、学習曲線が短い。
• ライブラリを動かし続ける信頼できるエンジニアリングチーム。
• JSX拡張での条件文。

Reactは、UIライブラリの他のコンポーネントに影響を与えずに個々のコンポーネントを変更する方法をすでに提供しているため、Storybookに自然にフィットします。Storybookでは、コンポーネントを分離することで、この機能をさらに効果的にしています。サンドボックスでは、技術的な詳細に立ち入ることなく、UI全体を構築することができます。

また、React Storybookフレームワークは、コンポーネントを文書化することで再利用をこれまで以上に容易にし、コンポーネントを視覚的にテストすることでバグのあるコードを避けることができます。

StorybookでのReactの使用についてもっと知りたい方は、StorybookのReactの紹介を読み、ウェブサイト「Component Driven User Interfaces」をご覧ください。

Vue

Vue Storybookフレームワークでは、Storybook for Reactで得られるエッセンスをすべて提供しています。Vueフレームワーク用のStorybookとReactフレームワーク用のStorybookの最大の違いは、GraphQLアドオンを取得できないことで、これにより他のツールとの統合が若干難しくなります。

多くの開発者がVueを気に入っているのは、サイズが小さくてもパフォーマンスに妥協がないからだ。Vueは、強固なツールエコシステム、リアクティブな双方向データバインディング、仮想DOMレンダリングを提供します。

Angular

Storybook Angularフレームワークは、Reactで得られるエッセンスやアドオンをすべて提供しています。

少人数の開発チームで、シンプルなJavaScriptでHTMLの機能を拡張することに集中したい場合、Angularを選択するのは理にかなっています。基本的なJavaScriptのコーディングスキルがあれば誰でもこのフレームワークを使うことができ、コスト削減、開発時間の短縮、ミスの回避に役立ちます。

Angularがシンプルだからといって、弱いわけではありません。ディレクティブ、再利用可能なコンポーネント、データバインディング、ローカリゼーションなど、優れた機能を備えています。

コミュニティStorybookフレームワーク

コミュニティフレームワークは、大規模なコミュニティが存在しないため、ReactやVueなどの主要な  Storybookフレームワーク のように頻繁に更新されない傾向があります。

これらはStorybookの最良の選択肢ではありませんが、オープンソースのツールはまだ動作します：

• Ember
• HTML
• Mithril
• Marko
• Svelte
• Riot
• Preact
• Rax

これらのStorybookのフレームワークを使うと、いくつかの機能が失われることを覚えておいてください。Ember on Storybookだけが、必要なもの(Actions, Backgrounds, Docs, Viewport, Controls)をすべて備えています。コミュニティフレームワークの中には、GraphQLをサポートしているものはありません。また、他にも数多くのアドオンがないため、プロジェクトを迅速に終わらせるのが難しくなるかもしれません。

しかし、Storybookの柔軟性はこれらのフレームワークにも及びます。完璧ではありませんが、きっとうまくいくでしょう。

Storybook のDIYフレームワーク

Storybookは非常に柔軟なツールで、自分のチームのために特別に新しいフレームワークを足場にすることができます。Storybookは常にユーザーの成功を支援する優れた仕事をしているので、ウェブサイトにStorybookの新しいフレームワークを使用するための包括的なチュートリアルがあることは驚くことではありません。

Storybook とUXPinを統合して、製品をより効率的に作りましょう!

Storybookで コンポーネントライブラリ を作成したら、それをUXPinに簡単にインポートすることができます。1分程度で完了するほど簡単です。

UXPinとStorybookを統合すると、Storybookの中でUIコンポーネントライブラリを管理できるようになります。変更を加えると、UXPinのライブラリにも自動的に反映されます。このようにして、Storybookで信頼できる唯一の情報源を維持し、Mergeテクノロジーを使用してUXPinで完全に機能するプロトタイプを作成することができます。

StorybookとMergeは、コードベースのデザインの力を誰もが使えるようにすることで、開発プロセスをより効率的かつ効果的にします。あなたは効率性を求めていますよね？今すぐStorybookとの統合を行い、その効果を実感してください。