こんにちは。プロダクトエンジニアリング部の中島です。
本稿(連載)ではLIFULL HOME'Sにおけるフロントエンド技術スタックの刷新やリファクタリングの取り組みについて発信していこうと思います。
歴史
LIFULL HOME'SではバックエンドをSymfony2(php) + SinatraベースのBFF(ruby)、フロントエンドをjQueryといくつかのマイクロライブラリによって構築しています。
LIFULL HOME'Sの現在稼働しているサイトの歴史はPJ規模に対して存外古く、2010年末に開発をスタートして現在に至ります。
当時、フロントエンド側のフレームワークは今に比べると随分未成熟だった(初版のbackboneがリリースされたのがこの頃)こともあり、フレームワークの利用を採択するには至りませんでした。
とはいえ、多少の秩序がないことにはLIFULL HOME'S程度の規模感のサイトでも破綻は容易に想像できたため、いくつかの小さな設計とそれを補助するライブラリを組み込みました。
- class-likeなオブジェクト設計とネームスペースを提供するJavaScript OOPライブラリ(joo)の導入
- 今でいうclass syntaxの機構を提供するもの
- UIパーツごとのViewオブジェクトの生成
- Backbone.Viewに当たるもの
- Viewオブジェクトのイベントバインディング機構のルール化
- Backbone.Viewの@eventsに当たるもの
- Viewオブジェクト間の相互作用を疎に実現するためのメディエイターライブラリ(pubsub.js)の導入
- グローバル放出したBackbone.Eventsインスタンスのようなもの
初期設計時は特にBackboneを意識したつもりはありませんでしたが、結果としてこれらはBackboneの基礎的な設計と酷似したものとなりました。
LIFULL HOME'Sというそこまでリアクティブでないサイトにおいてはこの基礎的な設計は案外はまっており、いくつかの問題となるケースは抱えながらも、致命的な局面はさほどなかったように思います。
LIFULL HOME'Sの現行バージョンは最低限の物件検索だけを提供する形で初期リリースを迎え、その後9年は旧サイトからの移行と機能拡充・コンテンツ拡充・UIチューニングを進める日々でした。
これは裏を返せば、この長い期間の中でフロントエンドにおける技術投資は初期設計のみで、途中途中ではサイト全体に影響を与えるような大きな設計の見直しはほぼ為されてこなかったということでもあります。
この間に時代は移り変わり、Bundlerによるmodule機構の提供であったり、TranspilerによるモダンなSyntaxの提供であったり、UIを揃えるための様々なアプローチであったり世間では多くの技術課題に対する解決方法が提示されてきました。
近年のLIFULL HOME'Sは開発当初より随分とFatになり、もう個人的な努力で基礎的な設計に大きな変更を加えることは難しくなり、これらの導入も先送りにされ続けてきました。
しかしながら、開発現場からは日に日にモダンな開発環境を求める声も聞こえるようになったり、大きくなりすぎた現行サイトのフロントエンドパフォーマンスに限界を感じはじめたというのもあり、とうとう2019年末ごろからフロントエンドの開発における技術投資がなされることになりました。
刷新・リファクタリング作業の流れ
- Sassの導入
- Rollup + Babel導入によるモダンシンタックス + モジュール機構の提供
- フロントエンドのワーキンググループ結成
- レンダリングパフォーマンス向上のための阻害要因の検出と排除
- UIの統一性を加速させるためのStyleGuideの導入
- テンプレートエンジンのPrecompilerの作成
- JavaScriptフレームワークの導入
- module化したUIパーツの提供
単に刷新やリファクタリングといっても組織的に活動しないとリスク管理的にニッチもサッチもいかないものと、ある程度のサポートがあれば個人の努力で改善できるものがあると捉えてプロジェクトチームを結成して行うものと、もっとフランクに個人のこうしていきたいを尊重し、レビューやテスト、活動時間の摂政等のサポートをして進めていくワーキンググループを作成してそれぞれで連携を取りながらアプローチしていくことにしました。
プロジェクトチームを結成して遂行したものとしてはSassの導入や Rollup/Babelの導入、テンプレートエンジンのPrecompilerの開発などの開発基盤的なところを整えることにフォーカスし、ワーキンググループサイドではサイトパフォーマンスのチューニングや、運用効率を高める再利用性の高いUI部品の提供などを行いました(現在進行形)。
それぞれの対応の詳細については以下のカテゴリリンク(随時追加)から発信していきます
