自身、UIを極めたいという漠然としたキャリアプランを立てているが、色々ありサーバーサイドエンジニアとしてWEARのWEBのリプレイスの仕事をさせて頂いています。数多くの先輩からUIとサーバーサイドは繋がっているというアドバイスを頂いてたが、腹落ちする具体例が見つからず、疑問に思う時期もありました。しかし最近、UIに関係したサーバーサイドのタスクを振って頂き、業務を進めるうちに「UIとサーバーサイドの関連性について知ることができてきた」ので記録に残そうと思います。

UIとサーバーサイドの関連性について気づくきっかけとなった業務は、
以下のWEARのWEBのお気に入りブランド画面のリプレイスです。

https://wear.jp/member/edit/

お気に入りブランド画面のリプレイス前に抱えていた問題

問題１、レスポンスタイムが遅く、ユーザー体験として良くない問題。

以下の動画のように、モーダルを表示するまでの時間が約５秒かかる問題がありました。
その原因は「一度に数万件にも及ぶブランドを全件取得」していてレスポンスに時間がかかってしまっているからでした。これではユーザー体験としては良くないです。

問題２、Webとアプリで仕様・UIが違うせいか、ユーザーが混乱してしまう問題。

また、以下の画像のようにWebとアプリで仕様・UIが統一されていなくユーザーも混乱してしまう問題もありました。具体的にはWebはブランドを名前順で全件取得、アプリはブランドを人気順TOP30を取得といった具合です。

WEBの画面

アプリの画面

問題３、Webとアプリで仕様・UIが違うせいか、違う挙動のAPI・テストを実装しなければならない問題。

また、同じお気に入りブランドの登録ページなのにも関わらず仕様・UIが違うので、
WEB用・アプリ用で違う挙動のAPI・テストの実装をしなければならない問題がありました。
仕様・UIが統一されていたら、APIとテストの実装は似た感じになるので、実装者の負担が減るはずです。

リプレイスでどう解決したか？

解決策：WEBもアプリとほぼ同じ仕様・UIにしました。具体的には、ブランドを人気順TOP100で表示するようにしました。

よって、以下のメリットが生まれました。
・上位100件に絞っているのでレスポンスタイムに時間はかからないのでユーザー体験として良い。（問題１を解決）
・Webとアプリで仕様・UIが統一されているので、ユーザーが混乱することはない。（問題２を解決）
・Webとアプリとで仕様・UIが統一されていることは、WebとアプリでAPI・テストの実装の差分が少なく、開発者の負担が減る。（問題3を解決）

教訓

このリプレイスの業務を経験通して以下の教訓を得ました。
・Webとアプリの仕様・UIはできるだけ統一させた方が良い。
・UI次第でレスポンスタイムが変わってくるので、UIの知識とサーバーサイドの知識両方持つに越したことはなさそう。

感想

今回の業務を通して、Webとアプリの仕様・UIは統一させることのメリットを心底理解しました。UIに関わるタスクを振っていただき感謝です。