UIコンポーネントカタログが好きなので語りたい

この記事はUIコンポーネントカタログが好きすぎるフロントエンドエンジニアによる熱烈なLOVEコールです

フロントエンドエンジニアの茶木です。
今日は「UIコンポーネントカタログのここが好きだ！」という話をします。UIデザイナーの方もぜひ読んでいただけたらうれしいです。

以降、情熱をこめて「だ、である」文体になります。なるのだ！

UIコンポーネントカタログとは？

UIコンポーネントカタログは、Web開発で使用している「コンポーネント」を一覧にするツールである。

各コンポーネントは、たとえば、ラベルのコンポーネントであればラベルの色やラベルのテキストを変更して確認ができる。さらには見た目に留まらず、button や input 関係のコンポーネントであれば、操作してみてインタラクションを確認することもできる。

百聞は一見にしかず、UIコンポーネントカタログの大手 Storybook のサンプル を実際に触ってみるのをおすすめする。

UIコンポーネントカタログのここが好き！

新メンバーに優しい！

最初はコード読むのも大変！

まずフロントエンドエンジニアサイドのメリット。

開発チームに新しく入ったメンバーは既存機能を理解する必要がある「コードを読め！」とは言うものの、勘所を掴むのは大変だ。

そこでUIコンポーネントカタログの登場なのだ！

こういったケースではコンポーネントから理解を進めていくのは悪くない切り口と言えるし、コンポーネントの修正や作成から徐々に慣れていくのも良い。

そもそも目的のコンポーネントの表示を見つけるのは大変！

最初は目的のコンポーネントをページの中で探すのも一苦労だったりするし、特殊なエラーパターンや普通のアクションでは目にしないコンポーネントもある。

そんな煩わしさから開放されて、コンポーネントを一覧でざっと見れるUIコンポーネントカタログはまさに救世主と言えよう。ありがたすぎて足を向けて寝られない。

「よしなに」対応の穴に気がつく！

こちらはUIデザイナーサイドにも利のある話。

バッジコンポーネントを例に話をする。number に注目して以降を見て欲しい。

これは基本的な挙動の確認。

当たり前のようだけど、横幅が変わらず真円のまま2桁になるデザインもあるので、そのチェックがサクッとすんでいる。

これもよくある挙動だけど、実装落としたりしがち。

これら全部をデザイナーがデザインに起こすのは大変だと思う。

デザインにないものをエンジニアが「よしなに」判断して作成するケースもあって、こんなときは、できたコンポーネントの挙動をエンジニアとUIデザイナーがUIコンポーネントカタログの props を触って見ることで、早い段階で齟齬に気がつける。

また、デザイン時にはわからなかったことも、コンポーネントを触ってみて、よりよいフィードバックが得られることもある。

他にもいっぱい素敵なところがある

他にも素敵なところはいっぱいあるけど、UIコンポーネントカタログの魅力は次のメンバーにも語ってもらうつもりなのでバトンタッチ！

そしてなによりUIコンポーネントカタログは眺めて触って楽しいから・・・