コンポーネントライブラリとは？なぜUI開発に使う必要がある？

原文：　What Is a Component Library and Why Should You Use One for UI Development?

コンポーネントライブラリは、特に迅速なスケールアップが必要な場合には、非常に便利なものです。

例えば、Netflix、Uber、Twilio。　Netflix、Uber、Twilioなどは、コンポーネントライブラリから構築された設計システムを利用して、スピーディで素晴らしい成長を遂げました。

企業の設計システムの一部として独自に構築することを主張する人もいるでしょうが、スクラッチで構築するために必要な時間とリソースは、長期的な利益を上回ることがよくあります。

むしろ、多くのプラットフォームでの開発を最適化するためには、コンポーネントライブラリの利用を検討するのが賢明でしょう。

コンポーネントライブラリは、ボタンやアコーディオンなど、すぐに使えるカスタマイズ可能な再利用可能なコードコンポーネントのオープンソースレポジトリを提供することで、UIデザイナーやUXデザイナーがより迅速な開発と成長を実現することを可能にします。

コンポーネントライブラリは唯一の情報源となります

デザインシステムの一部であるコンポーネントライブラリは、製品間のばらつきや、異なるコンポーネントを異なる場所に配置してしまうリスクを軽減します。コンポーネントライブラリは、UI要素のソースコードを扱い、通常はCSSとJavaScriptを活用します。

人気の高いオープンソースフレームワークの代表例であるReactは、Facebook社がコンポーネントライブラリとして開発したものですが、その後、アプリや静的サイト、デスクトップアプリケーションを作成するための大規模なエコシステムに成長しました。

また、それ以外にも様々なメリットがありますので、ご紹介します。

• アクセシビリティ: コンポーネントライブラリは、既製の再利用可能なコンポーネントを収容する単一のリポジトリとして、あらゆる場所にいる開発者やデザイナーに素早くアクセスを提供します。これにより、複数のチームに所属する開発者やデザイナーのコラボレーションやコミュニケーションが向上します。
• 重複コードの削減: 様々なデザインやプロジェクトにおいて、コードが重複してしまうことがよくあります。しかし、コンポーネントライブラリを使えば、デザインをコードに変換する必要はありません。その代わりに、コードコンポーネントを使用してデザインを行うことができ、さらなる開発は不要です。
• 一貫性: コンポーネントライブラリを使用することで、シングルソースオブトゥルースを促進することができます。プロジェクト全体で一貫したUIやUXを実現することで、統一感を得ることが容易になります。これは、異なるデザイナーがさまざまなデザインを手がける場合に比べて、重要な利点となります。
• スピード: ボトムアップでの構築を避けることで、チームは時間を節約できます。カレンダーのデザインを変更したり、作成したりする必要がなく、すでに使用可能な状態になっています。さらに、あらかじめ用意されたコンポーネントのおかげで、チームは、かつて直面したような、時間のかかる意思決定プロセスを回避することができます。
• 互換性: フロントエンドの開発者は、クロスブラウザやクロスデバイスの互換性を確保するのに苦労します。しかし、コンポーネントライブラリは標準化されているため、互換性の問題を回避することができます。

どのような場合にコンポーネントライブラリを使用するのが最適ですか？

コンポーネントライブラリを使うことで、プロジェクトに大きな価値をもたらすことができる特定の状況があります。それが何かを見てみましょう。

コード・ファースト・プロトタイピング
ビジュアルデザインよりも機能性を重視するプロジェクトでは、コンポーネントライブラリの活用が有効です。また、コードによるプロトタイピングは、画像から始めてコードに変換するよりも効率的です。つまり、開発者が画像ベースのデザインを解釈してコードを作成するのではなく、既製のデザインからコード・コンポーネントを取り出すだけでよいのです。

また、開発者にとっては、デザインスキルの不足を気にすることなく、あらかじめ用意されたコンポーネントを使ってデザインできるチャンスが広がります。

自分で作るにはスキルや経験が不足している場合
独自のコンポーネント・ライブラリを作成したり、自社のエンタープライズ・デザイン・システムの一部として開発したりすることは、あなたの夢かもしれません。しかし、チームに再利用可能なUIコンポーネントの構築経験がない場合や、厳しいプロジェクトの納期に追われている場合には、これは現実的ではないかもしれません。

しかし、統合されたコンポーネントライブラリは、デザイナーや開発者がデジタル製品に変換する前に、機能性、ユーザビリティ、デザインをテストするために必要なすべてのコードコンポーネントを提供します。

小規模な会社やチームの場合
新興企業や中小企業では、財源をより慎重に扱う必要があります。しかし、効果的で汎用性の高いオープンソースのコンポーネントライブラリが豊富にあれば、小規模な企業でも一歩ずつ規模を拡大していくことができます。結局のところ、業界の大企業は一夜にして成功したわけではありません。そして、その多くは、進化の過程でオリジナルのコンポーネントライブラリを使い続けています。

スケールアップを支援する優れたツールがあります。

コンポーネントライブラリのメリットがまだ明確でない場合は、以下のような質問をしてみてはいかがでしょうか。

1. 開発者は、プロジェクトごとに同じコンポーネントを構築しているが、わずかな違いがあるのではないか？

2. インターフェイスで使用すべきUIやUXの規約について混乱している開発者はいますか？

3. アップデートや変更を素早くリリースする必要がありますか？

4. 多くのカスタマイズが必要ですか？

5. デザインシステムとコンポーネントライブラリを組み合わせたものを探していますか？

これらの質問の答えがイエスであれば、Storybookをご検討ください。

ストーリーブック
Storybookは、15種類のフレームワークでUIコンポーネントを開発するためのオープンソースのツールで、中でも最も人気のあるフレームワークを紹介します。React、Vue、Angularです。これは、コード化されたデザインシステムとコンポーネントライブラリを組み合わせたもので、効果的なコンポーネントやページの開発、テスト、ドキュメンテーションのためのサンドボックスとして機能します。開発者は、視覚的なアプローチではなく、より効果的なコンポーネント駆動型のアプローチをとることができます。

Storybookは開発者に利用されているため、デザインにも役立つUXPinとの統合が行われています。 UXPin Mergeテクノロジーにより、どのStorybookもUXPinエディターと同期し、コードコンポーネントを使ってデザインすることができます。完全に機能するUIエレメントは、UXPinライブラリの一つに表示され、すぐにアクセスできるようになります。

革新的なMergeテクノロジーを使用したコードからのデザインの第一人者になる

コンポーネントライブラリは、開発を標準化し、コードの重複を減らし、チーム間のコラボレーションを改善し、スケーラビリティを促進する機会を提供します。プロジェクトの成果やチームのモチベーションに大きな影響を与えるため、ニーズに合ったソリューションを選択することが重要です。

UXPinのMergeテクノロジーは、デザインの一貫性と開発の生産性を向上させるために、Storybookとのユニークな統合ポイントを提供します。

そこで、コードファーストのアプローチをいち早く推進し、革新的なStorybookとの統合を最初のコンポーネントライブラリに使用してみませんか？

本記事は2021/6/16投稿を翻訳したものです。