LIFULL Creators Blog

LIFULL Creators Blogとは、株式会社LIFULLの社員が記事を共有するブログです。自分の役立つ経験や知識を広めることで世界をもっとFULLにしていきます。

トップ > フロントエンド > 負債化したレガシーブラウザ対応のリファクタリングへの取組み

負債化したレガシーブラウザ対応のリファクタリングへの取組み

フロントエンド 技術的負債 フロントエンド刷新・リファクタリングの歩み

プロダクトエンジニアリング部の柴田です。

普段は LIFULL HOME'S の賃貸領域でフロントエンドの開発・設計を担当しております。 今回は LIFULL HOME'S での Web フロントエンドおけるレガシーブラウザ対応の負債解消への取り組みについてご紹介いたします。

背景

現在の LIFULL HOME'S の大枠は 2011 年ころに作られたものであり、当時の CSS3 サポート状況に差異のあるブラウザで表示を担保するには装飾的なパーツはほぼ画像で実装する必要がありました。

例えば、次に示すような枠の装飾はガイド線の外側を 8 つにスライスし、それぞれを background-image として割り当てるような実装を行います。

カードUIのスライス例
カードUIのスライス例

<div class="ui-frame">
  <div class="content">...</div>
  <!-- 左上〜右下の各フレームのスプライト設置用の空要素 -->
  <div class="ui-frame__top-left"></div>
  <div class="ui-frame__top"></div>
  <div class="ui-frame__top-right"></div>
  <div class="ui-frame__left"></div>
  <div class="ui-frame__right"></div>
  <div class="ui-frame__bottom-left"></div>
  <div class="ui-frame__bottom"></div>
  <div class="ui-frame__bottom-right"></div>
</div>

現在では css のみで実現できるデザインであっても当時はこのように手間がかかる実装だったわけですね。

LIFULL HOME'S での課題と対応

リフロー・リペイントの発生

情報をよりリッチに表現するため LIFULL HOME'S でもこの手法を広くサービス内の UI で適用してきました。 具体的には JavaScript で特定のセレクタを持つ要素に対し、各スプライトの背景を設定した空の DOM を挿入する処理を行うことで、実装時にクロスブラウザを意識することなく少ない工数でリッチな UI を実現できるようにしていたのです。

しかし、これにはリフロー・リペイントを発生させ、対象要素の数が増えるごとに比例的にレンダリングコストを増やしてしまうという大きな問題がありました。

この問題は特に物件一覧ページ上が顕著で、それぞれの紹介物件ごとにこの実装を利用したパーツが使われていたため Lighthouse 上でも大きくパフォーマンススコアを下げる要因となっていました。

リフローの発生箇所のスクリーンショット
物件一覧ページの例。赤太枠で示した箇所でリフローを起こしており、このページ全体では約 30 箇所利用されていた。

対応

当時各ブラウザ間の CSS3 の実装足並みが揃っていなかった名残が現在の技術的負債となっていたため、これを JavaScript を利用せず、完全に CSS に置き換える対応をとりました。 私は主に賃貸領域のフロントエンド開発を担当しているのですが、このパーツは全マーケットで広く利用されていることもあり、特に以下に注意を払い対応をすすめました。

  1. 追加したプロパティ起因でレイアウト崩れが起きないこと
  2. 全マーケットを通してのデザイナー・企画職との合意

結果

この改修をリリースしたことで、ページの表示速度を大きく向上することができました。 Lighthouse で計測した具体的な効果としては

  • Performance スコアを 5.8 ポイント向上
  • Speed Index において 2.6 秒 の改善

となっており、実際に体感できるレベルでの速度改善となりました。PC から LIFULL HOME'S を利用する際の快適さの向上にも貢献できたかと思います。

利用箇所が多すぎて刷新後のチェックを網羅しきれない課題がありましたが、こちらは全社的にエンジニア・デザイナーにご協力いただいたこともあってデザイン崩れなどが発生することもなくリリースすることができました。

まとめ

聖域をつくらないことが大事

今回実施した改修は技術的な観点ではさして難しくない改善であるといえます。 しかし、長年の運用によって肥大化した View の「どこで壊れるかわからない」という不安から表面的に見える課題であっても聖域化してしまう場合があることを学びました。

特に汎用的に利用される UI であればあるほど解決が難しくなってくると思います。 これについてはエンジニア・デザイナーが簡単にアクセスできるスタイルガイドの運用を開始し、解決と防止に取り組んでいます。

LIFULL HOME'Sのフロントエンド環境にSassが導入されたので色々やった話

技術負債 ≒ 改善の種

この 10 年でフロントエンド は大きく進歩しましたが、取り残されたレガシーコードが LIFULL HOME'S にはまだまだ存在します。 それらを辛さと捉えるのではなく、潰せば DX または UX を向上させられる鉱脈と捉えて着実に改善していけたらと思います。