この記事は Wano Group Advent Calendar 2024 12日目の記事です

アドカレ12日目です！

こんにちは！TuneCore Japanでフロントエンドをやっている @rom1000_onigiri です
みなさん、アドカレ期間楽しんでいますか？
様々な学びを様々な角度から得られる良い期間ですよね。

本日の記事は、私が従事しているフロントエンドと密接な関係にある UIライブラリ を、企業の成長フェーズと並走させる上でどう扱っていくか、その付き合い方について弊社のフロントエンド史と照らし合わせつつ私個人の考えをまとめてみました

企業の成長フェーズとそれぞれのステージに対するUIライブラリの扱い

企業の成長フェーズは一般的に 創業期、成長期、安定期、拡大期 の4ステージに分けられるようです。
それぞれのステージに対して、UIライブラリの扱いがどう変わっていくか、私は下記のように考えています。

創業期

認知度や売り上げがあまり高くない段階で、実績を作ることが重要視される
そのため、いち早くサービスを提供する必要がある

「創業期」のフロントエンド

プロダクトを一刻も早くローンチさせる必要があるので、構築やキャッチアップに時間のかからないマークアップ言語を用いて実装
フロントエンドに割く時間をできるだけ省略し、ビジネスロジックの設計や実装に時間を使えるように配慮する

成長期

創業期で形にした事業が実を結んで、事業が急成長する段階
また、成長を促すために多くの投資がなされる傾向にある

「成長期」のフロントエンド

成長期では初期と後期で扱いが変わると考えます

「成長期初期」のフロントエンド

創業期で散らばったコーディングルールなどの整備
プロダクトのメンテナンス性向上のため、再利用を前提としたコンポーネントの概念の導入

時間的コストをかけないために、基本的なUIコンポーネントが用意されているUIライブラリを導入する
（ここからUIライブラリの扱いや付き合い方を考える必要が出てくる）

「成長期後期」のフロントエンド

コンシューマーやカスタマーチームからプロダクトのUIに対する要望が増える
必要に応じて、導入したUIライブラリのコンポーネントを拡張する
（例：UIライブラリのコンポーネントをラップする、ドメイン知識を含んだコンポーネントの新規作成など）

安定期

経営が安定する一方で、提供するサービスの質や追加機能の量が求められる
会社の名前が広まり、ブランディングにもフォーカスしていく

「安定期」のフロントエンド

成長期後期からの重なるUIコンポーネントの拡張で、UIライブラリの仕様に合わせつつ要求が満たせるコードなどが増え肥大化する傾向がある
また、UIライブラリの仕様でサポートされていない拡張がしたくなる
上記解消のため、UIライブラリを剥がし、よりプロダクトや企業・組織の方針に沿った基本コンポーネントを新規で作成する

加えてブランディング戦略をフロントエンドに落とし込んでいくため、インハウスのデザイナーと独自のデザインシステムを確立していく
そのデザインシステムを新規で作る基本コンポーネントに適用していく

拡大期

さらなる企業成長を見込んで事業拡張をしていく段階

「拡大期」のフロントエンド

剥がし終わったUIライブラリの扱いや付き合い方を考えるのは終わり、会社の資産になった独自コンポーネント群の拡張を行っていく
新しい技術でしかできないUX向上（共同編集の仕組みなど）にフォーカスし、独自コンポーネント群に落とし込む

...into the future

実際に剥がしているなう

今まさに弊フロントエンドチームでは、導入されているUIライブラリを剥がしている最中です。
インハウスのデザイナーさんと組んで、TuneCore Japanブランドを落とし込んだ基本コンポーネントを鋭意製作中です

実際に剥がしながら思うことは...

単純にコンポーネント作成楽しい

「このコンポーネントってこれとこれが組み合わさっているのか」
「意外と単純な作りで要求満たせるな」
と車輪の再開発も悪くないケースがあるんだなと楽しみ学びながら剥がしています。

意外とドメイン知識がつく

「プロダクトの要求に沿うにはこのpropsを渡す必要があるな」
「今後こういう要求がされることを加味してpropsや処理だけ用意しておくか」
と意外にもドメイン知識につながるケースもありました。

会社の資産になるの嬉しい

ブランディングを落とし込んだ独自コンポーネントが、100％会社のもの（資産）になるのはとても嬉しいですし、「世界中どこを探しても、このイケてるUIコンポーネントはうちのプロダクトにしかないんだぞ〜！」と誇りに思えます。

最後に

あくまでも上記は個人の考えなので、UIライブラリの扱いの参考になったら幸いなのですが、扱いの方針は会社の数だけ、組織の数だけあると思っています。
創業初期からUIライブラリを用いてサービスのUIを整えるのもよいと思いますし、拡大期でもUIライブラリのコンポーネントを拡張し続けるのもよいと思います。

大切なのは、今の会社（やプロダクト）の成長ステージに親和性の高いUIライブラリの扱いを選択することですね。
この記事が、導入されているUIライブラリの扱いと向き合うきっかけになれば嬉しいです

明日は @kotobuki5991 さんのURLヒストリー周りで頑張ったお話が公開されるようです！
お楽しみに
公開されました！
URLをヒストリーとして保持しつつ、1ページで複数の検索を別々に走らせるために頑張った話

PR

現在、Wanoグループ / TuneCore Japan では人材を募集しています。興味のある方は下記をご参照ください

Wano | Wano Group JOBS
TuneCore Japan | TuneCore Japan JOBS