今週はフロントエンドのコード、特に新規画面やコンポーネントをゴリゴリ書いていく仕事を久々に行った。
前職含め、こういう仕事は本当に久しぶりに思える。現職ではバックエンドの業務が大半だし、前職ではプロダクト開発よりはそのためのアーキテクチャ、基盤整備などを行なっていたため、フロントエンジニア感強めの仕事を久々にできて楽しかった。
現職ではコンポーネントライブラリを含めたデザインシステムがかなり成熟した状態で出来上がっており、各プロダクトでは原則それに従ってフロントエンド開発を行なうようになっている。
最初こそデザインシステムに従うって自由が効かなくて大変なのではという不安もあったが、いざ開発業務に入ると一瞬で不安が吹き飛んだ。
まずデザインシステムがあることによって、デザイナが事前に figma 上に作成するデザイン案を、そのまま実装可能であることが概ね保証される。なぜならデザインも実装も、共通のデザインシステムに基づいて行なわれるからだ。デザインシステムという共有概念があることから、認識の齟齬が発生せず、シームレスに連携することができる。
そして実装においては、デザインシステムに含まれるコンポーネントライブラリを使用することで、特別なマークアップや JavaScript を使用することなく、コンポーネントを並べていくだけで概ね出来上がる。コンポーネントライブラリにはUIパーツの他にも、レイアウト用コンポーネント、テキスト用コンポーネントもあり、これらではデザインシステムで定義されたカラーテーマや文字サイズ、余白のパターンなども含まれているため、CSSを自ら書く必要性も少ない。おまけにアクセシビリティも充分に考慮される。
小さなコード量で最大の成果を出せつつ、プロダクト間でのUI/UXのブレを減らせる。デザインシステムというものがこんなにまで開発生産性に影響を与えるとは驚きだ。