長期目線で、食べログフロントエンド開発の
あるべき姿を考える

品質を担保しリリーススピードを加速させるために、
できることはなんでもやる

フロントエンドチームのミッションと役割を教えてください

フロントエンドチームのミッションは「食べログのフロントエンドに秩序をもたらす」ことです。日々ライブラリのバージョンアップ、コーディング規約の制定・運用、エンジニア/デザイナーのフロントエンドスキルアップなどの業務に取り組んでいます。現在は食べログフロントエンド領域のメンテナンス性向上のため、jQueryベースからReact/TypeScriptベースへのリプレイスプロジェクトをメイン業務として推進しています。

「食べログ」は立ち上げてから15年以上の歳月を経ているサービスです。過去積み重ねてきた長い運用期間の中で、読みづらく改修しづらい、メンテナンス性が低いコードが蓄積しているという課題があります。メンテナンス性が低いコードが蓄積していることで、既存コードの読みとりに時間がかかったり、テストをしづらい状況で思いも寄らないバグが発生したりして、結果ユーザーに価値を届けるスピードに影響が出ることも。また、ここ数年フロントエンド領域はものすごいスピードで技術が進歩しています。現在はフロントエンドとサーバーサイドが分離された構成が主流となっており、それを前提とした便利な新しいツールが次々とリリースされています。食べログはRuby on RailsでレンダリングしたHTML上にjQueryでインタラクションを作り込む構成となっており、それらのツール導入が難しいという問題も抱えています。
これらの課題を抜本的に解決するため、私たちはjQueryベースからReact/TypeScriptへのリプレイスを実行することにしました。品質を担保し、リリーススピードを上げ、ユーザーへ価値を届けるスピードをより速くする。リプレイス後にまた、メンテナンス性の低いコードの蓄積や、最新技術導入の遅れを繰り返さないために、長期目線での食べログフロントエンド開発のあるべき姿について考えて、それを目指して日々改善行動を進めています。

フロントエンドチームは、食べログフロントエンドの将来をどう形成するのがよいか、主体的に考え実行していくことに責任を負っています。サービスの機能開発や機能改善に直接関わることは比較的少なく、長期運用を見越した設計/実装、運用体制の確立、他チームへのサポート・教育などに取り組んでいます。障害なく素早く機能開発を続けていくために、できることはなんでもやるチームです。リプレイスの設計/実装を進めつつ他チームのエンジニア・デザイナーをサポートする苦労や、機能開発が続く食べログで納期とメンテンス性のバランスをとる難しさなど、大規模組織且つ大規模サービスならではの大変さを感じることも多くありますが、その反面やりがいも大きいです。
フロントエンドチームでの取り組みの詳細については、食べログフロントエンドチームのブログ（https://note.com/tabelog_frontend）にも記載していますのでよろしければご覧ください。

チーム内で連携しより良いシステム設計へ。
大規模システムに向き合うからこその難しさと工夫

開発をよりスムーズに進めるために、チームとして行っている取り組みを教えてください

チームとして行っている取り組みや工夫は沢山ありますが、その１つにペアプログラミング・モブプログラミングがあげられます。 複数名で開発することにより、協力して問題の早期解決をはかることができ、1人で開発を行う時よりもスムーズに開発を進められるという効果や、コードの共有を推進することによるプログラムの属人化防止が期待できます。特に、経験の浅いエンジニアにとっては自身のスキルを高められる良い機会となることもあり、人材育成・チームワークの向上という観点でも良い効果が生じることがあります。ペアプログラミング・モブプログラミングを導入する前は、一人で迷いながら実装し、レビュー時に設計方針から検討しなおすこともそれなりの頻度で生じていました。土台となる部分からひっくり返り、時には他のコンポーネントの設計も変更する必要があるなど、大きく手戻りが発生することもありました。導入後はそのような大きな手戻りがなくなり、フロー効率が大きく改善されたと感じています。

また、大規模サービスのフロントエンド開発経験のある方に、技術顧問として参画いただいています。開発を進めていくにあたり、食べログ規模でのリプレイスに関する情報は少なく、一般的な設計となっているか、長期運用に耐えられる構成かなど、方針に迷いが生じる場面が多々あります。その際は、技術顧問の方にアドバイスをいただいたり、コードレビューいただいたり、ペアプログラミングをしていただくこともあります。React周辺の最新情報やベストプラクティスの共有、普遍的且つ効率的なシステム設計ができているかなどについても、一部助言をいただき、チーム内で方針を決め推進しています。
システムを変えるだけでなく、良い設計にしないと意味がない。ページ数が多く影響範囲が広い食べログのリプレイスにはどうしても時間がかかります。出来るだけ早く、より効率的に、より良い設計にたどり着くために日々工夫を重ねています。今後もチームとして優先すべきことは何か、そのために何が必要か検討を重ねながら地道に進めていく必要があると思っています。

「何のためにやるのか」、メンバー間で共通認識を持つ。
現状の課題と改善効果を明示し次に繋げる

仕事をする上で大切にしていることを教えてください

大きく分けて2点大事にしていることがあります。
1点目は、「何のためにやるのか」をチーム内で何度も話し、明確にしておくことです。
「メンテナンス性を向上させる」とは何か。それを実現するとどうなるのか、実現するまでの過程において、なぜその優先度で取り組むのか。大きな方針はもちろんですが、実装作業中の細かな部分でも適宜判断が必要になります。何のためにやるのか、実現したいことは何かをインセプションデッキとして明文化し、メンバー間の意識合わせを行うことで、いつでも全員が同じ方向を向いて動けるようにしています。

2点目。リプレイスプロジェクトは、年単位の期間をかけて大きな投資分野として進めるものです。そのため「どのような効果が見込めるのか」「今後の計画はどのようなイメージなのか」「現状の進捗状況」などの情報について、チーム内外へ明確に示していくことが重要と考えています。チーム外に向けて具体的に情報発信することで、チーム内で推進していることがブラックボックス化することを防ぎ、いざ他チームにも協力を仰ぐことになった際にスムーズに連携できるようにしていきたい。そのために、現状どこに課題があり、リプレイスによってどのように改善されたのかを適切にはかることを念頭に置き、様々なログをとりデータ化しておくことが大事だと思っています。体感だけでなく、「ここをこのように変えたおかげで、このバグが減りました」「この機能を追加したことでこのくらい開発時間を短縮できました」というように具体的な数値とともに結果を明示することで、効果を実感でき、今後に繋げていけるようになります。

自分たちで考えた施策を自分たちで実行していく。
何事も実直にやり抜く姿勢

当社の文化や人の特徴を教えてください

所属部署の「文化」については、自由度が高く、ひとりあたりの仕事の裁量が大きいように感じています。
「食べログのフロントエンドの秩序を保つ」「メンテナンス性を向上させる」ことを目的としたチームを新たに立ち上げるということは、組織的な判断のもとに実行しましたが、その後の方針や施策決めは全て当時のチームメンバーに一任されていました。

現在推進しているフロントエンドのリプレイスプロジェクトは、誰かからやってほしいと言われていたわけではありません。
リプレイスを始める前のアーキテクチャのまま、小規模なリファクタリングを繰り返しても、チームが理想としている開発環境へ進化させる見通しを立てるのは難しい状況でした。チームメンバーで改めて協議したところ、抜本的な改革が必要との結論に至ったため、リプレイスの推進を上長へ提言。そのことがきっかけとなり、長期に及ぶリプレイスプロジェクトは始まりました。
自分たちで合意形成をして進めていく。スケジュールや見通し、具体的な推進プランも全て自分たちで決める。大規模なシステムの重要な方針を、10人もいないチームのメンバーで考え、そのメンバーが責任をもって推進していきました。フロントエンドだけでなくて、フロントエンドとその周辺を含めたアーキテクチャをゼロベースで考え、設計から運用まで主導しています。

「人」については、真面目な人が多い印象ですね。何事もしっかりやりたいタイプが多いと思います。自動化されていない部分が沢山あって、人の目や人の手でのチェックを求められる場面もまだまだ多いのですが、それでもきちんと運用できているのは真面目な人が多いからこそだと考えています。自分に甘えず、ユーザーへ早く価値を届けるためにできることはやり抜こうという心構えはメンバー全員が持っている印象です。

技術面・組織面ともにリファクタリングを推進。
フロントエンドのあるべき姿を考える

今後挑戦したいことを教えてください

今後も更にリプレイスを加速させていきたいです。最低限の土台ができたとは言え、まだほんの一部にしか適用できていません。
また、食べログを更に良くするためにできることを考え、リプレイスと併行して、エンジニアやデザイナーなどを巻き込み、フロントエンド開発スタイルの刷新にも取り組んでいきたいと考えています。
開発・実装だけでなく、食べログエンジニア全体の組織面も含めたリファクタリングをやり遂げたい。今後も食べログフロントエンド領域に係る事象について、どんどん新しい挑戦をしたいと考えています。難易度は高いですが、挑戦しがいがあるチャレンジなので、チーム一丸となって取り組んでいきたいですね。

※記載内容は取材当時のものです。