サービスのヘッダーリプレイスがたいへんだった話 - クラウドワークスエンジニアブログ

こんにちは、 @t0yohei です。

先日、crowdworks.jpで使用されているヘッダーのリプレイスを行いました。

ヘッダーのデザインを改善し、より使いやすくなりました！ – クラウドワークス　お知らせブログ

このリプレイスでは、ユーザビリティやアクセシビリティの向上を目指すと同時に、技術的負債の解消や新しい画面レイアウトの下準備といった意図もありました。

このブログでは、今回のヘッダーリプレイスで直面した課題やポイントを共有したいと思います。ヘッダーの改修や多くの画面に適用されているUIパーツのリプレイスに取り組む方にとって参考になれば嬉しいです。

バリエーションの把握と、採用パターンの選択

サービス全体に反映されているヘッダーをリプレイスするには、まずどのようなバリエーションが現在存在しているのかを知る必要があります。時には特定画面に向けてカスタマイズされたヘッダーもあったりしますが、全てのカスタマイズに対応することは難しいため、新しいヘッダーでそのカスタマイズをどう扱うかを決める必要があります。

crowdworks.jp においては、リプレイス前のヘッダーにはカスタマイズされたものも含めておおよそ 17 個バリエーションがありました。最終的に、シンプルパターン、ログイン前パターン(PC・Mobile)、ログイン後パターン(PC・Mobile)の 6 パターンに落とし込んでいきました。パターンに落とし込めなかったカスタマイズについては、PM などと相談しながら事前に別の実現方法で置き換えることで対応しました。

多様なユースケースへの対応

crowdworks.jp では、サービスのアーキテクチャ改善の中で発生してしまった、アーキテクチャが分断されたコード群を「アーキテクチャの地層」と呼んでいます。

参考: 変化に適応するソフトウェアアーキテクチャと組織構造への道程

サービスのほぼ全画面に反映させるヘッダーのリプレイスでは、このフロントエンドアーキテクチャの地層の違いを吸収してあげる必要があります。

Rails + Vue.js で実装されている crowdworks.jp においては、主に以下の地層がありました。

完全 ERB (Rails 用テンプレートエンジン)で実装された画面
大半は ERB で一部 Vue.js で実装された画面
メインコンテンツは Vue.js で、その他は ERB で実装された画面
完全 Vue.js で実装された画面

これらの地層の中で色んな使われ方をしているヘッダーを丸っと入れ替えるのは中々骨が折れますが、アーキテクチャ改善の歴史に敬意を表しつつ全ての地層に対応させていきました。

リリースは小さい単位でやりたいけど...

全画面に使用されているヘッダーですが、リリースにおいては影響範囲を限定するために可能な限りビッグバンリリースを避けて小さい単位でリリースを行いたいものです。一つ前の多様な地層と相まって、全画面でヘッダーがちゃんと動くようにするだけでも大変ですが、それを小出しにしていくことを考えると中々気が重くなります。ビッグバンリリースに失敗して泣きを見たくないので頑張りどころでした。

ヘッダーの木の下には仕様が埋まっている

レガシー画面あるあるですが、ヘッダーの木の下にも物騒な仕様が沢山埋まっていました。一つ一つ拾い集めてちゃんと形にしていきます。埋まっているというところも肝で、事前の調査で洗い出せる仕様は半分程度で、残りの半分以上はリプレイス作業中に発掘されました。余裕をもったスケジューリングと、何が出てきてもめげないように、そういったものだという心構えが重要そうです。以下、今回のリプレイス作業中に出てきた仕様の例です。