コンポーネントライブラリについて調べてみた

コンポーネント駆動開発のメリット

まずコンポーネントライブラリの良いところを書く前に、コンポーネント起動開発について少し触れておきたいと思います。

以下いいサンプルがあったので引用です。

> 品質。コンポーネントを分離して構築し、関連する状態を定義することで、異なるシナリオで UI が動作することを検証します。

> 耐久性。コンポーネントレベルでテストすることで、細部に至るまでバグをピンポイントで特定できます。画面をテストするよりも作業が少なく、より正確です。

> スピード。コンポーネント ライブラリやデザイン システムから既存のコンポーネントを再利用することで、UI をより速く組み立てることができます。

> 効率性。UI を個別のコンポーネントに分解し、異なるチーム メンバー間で負荷を共有することで、開発と設計を並列化します。

Component Driven User Interfaces + DeppL 翻訳

あれ？ライブラリって入ってね！？って思いました。

はい入ってますね。普通なら自分でコンポーネントライブラリを作るみたいです。(今回の話は GitHub とかにあがっているコンポーネントライブラリについてです。)

コンポーネントライブラリを作る為のカタログツールで有名なものは以下のものです。

Storybook

UI カタログツールでおそらく一番有名なものだと思います。

サイドバーにある各コンポーネント名のボタンをクリックすると作成したコンポーネントが閲覧できます。

勿論このコンポーネントは手作り(スクラッチ)です。

コンポーネントライブラリとは

コンポーネントライブラリは、このコンポーネントカタログそのものがライブラリになっているパターンです。

Vue.js ではElement UIを使っての開発や、React では前回記事のMUIなどを使って開発することで UI カタログを作る時間を大幅に削減することができます。

企業の設計システムの一部として独自に構築する必要がある場合を、

除けばスクラッチで構築するために、必要な時間的リソースを割けない場合に大きなメリットとなります。

多くのプラットフォームでの開発を最適化するためには、コンポーネント ライブラリの利用を検討するのが良いと考えられます。

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

デザインシステムの一部であるコンポーネントライブラリは、全体でのデザインのバラつきを軽減します。

私も調べるまで知りませんでしたが、React は、元々 Facebook がコンポーネントライブラリとして開発したものだったそうです。

コンポーネントライブラリが向くケース

コード・ファースト・プロトタイピング

ビジュアルデザインよりも機能性を重視するプロジェクトでは、コンポーネント ライブラリの活用が有効です。

また、コードによるタイピング は、画像から始めてコードに変換するよりも効率的です。

つまり、開発者が画像ベースのデザインを解釈してコードを作成するのではなく、既製のデザインからコード・コンポーネントを取り出すだけでよいのです。

うちでもよくやるのはこの手法だと思います。

また、デザイナー不在の場合、エンジニアが無いデザインセンスを絞りだして画面を作るより、あらかじめ用意されたコンポーネントを使って作成する方が製品に自信を持てると思います。(個人の感想です。)

自分で作るにはスキルや経験が不足している

CSS は奥が深いので思ったようなアニメーション効果を実装するには結構学習コストがかかります。

仕事で納期に追われている場合は充分な学習の時間がとれないこともよくあります。その時に自分の能力不足をサポートしてくれる助けになります。

しかし、いつまでも CSS わからないじゃだめなので時間のある時に勉強してほしいですね。

小規模な会社やチームの場合

上に書いたリソースの話になるのですが、おそらくデザインにリソースを割くより製品内のロジックにリソースを割く必要性がおおきいと思います。

最後に

今回は結構短め＆文字ばかりですが、コンポーネントライブラリを使おう！という記事です。

気合 CSS も嫌いじゃないですが、、、
あくまでベースのカスタマイズに留めたいですね。