コンポーネントライブラリとは？再利用可能なUIの構成要素

コンポーネントライブラリとは、ボタンや入力欄など再利用可能なUIコンポーネントをパッケージ化したセットで、複数のアプリが一貫性を保つために共有します。

アプリごとに同じボタンやモーダルを作り直すのは労力の無駄であり、次第に同期が崩れていきます。コンポーネントライブラリはそうした構成要素を一度パッケージ化し、チームが再発明する代わりにインポートできるようにします。これは製品（公開されたパッケージ）であると同時にプロセス（そのパッケージをビルド・テスト・バージョン管理すること）でもあり、CIと深く結びついています。

コンポーネントライブラリが提供するもの

一貫したスタイルと振る舞いを持つ再利用可能なUIコンポーネント。
アプリが同じ方法でコンポーネントを使えるようにする共有API。
多くの場合、ドキュメントや使用例。

ライブラリとデザインシステムの違い

デザインシステムは原則、トークン、ガイドラインからなるより広い集合です。コンポーネントライブラリはそのシステムをコードで実装したものです。ライブラリはデザインシステムを実際のアプリケーションの中で具現化します。

ビルドとパッケージング

ライブラリはアプリとは異なる方法でバンドルされます。通常はES modulesを出力し、フレームワークのようなpeer dependenciesを外部化し、型付けされたエントリポイントを公開します。このパッケージングを正しく行うことが、利用者がそれに対してtree-shakeや型チェックを行えるようにします。

バージョン管理と利用者

多くのアプリが依存するため、ライブラリにはセマンティックバージョニングとchangelogが必要で、利用者が何が変わったかを把握できるようにします。breaking changeはmajor versionを上げる必要があり、downstreamのチームを驚かせないようにします。

CI/CDにおけるコンポーネントライブラリ

pipelineはライブラリをビルドし、ユニットテストとビジュアルテストを実行し、公開APIの型チェックを行い、バージョン付けされたパッケージをregistryに公開します。すべての利用側アプリが依存するため、ライブラリのCIは品質ゲートであり、ビジュアルリグレッションのチェックが公開前に意図しないUIの変更を捕捉します。

重要なポイント

コンポーネントライブラリは再利用可能なUIをパッケージ化し、アプリの一貫性を保ちます。
これはデザインシステムをコードで実装したもので、利用者向けにパッケージ化されています。
CIがビルド、テスト、バージョン管理、公開を行い、ビジュアルチェックがゲートとなります。