マネーフォワードのフロントエンドを前に進めるフロントエンド推進グループの紹介

こんにちは、フロントエンド推進グループのthincellerです

この記事は、Money Forward Engineering 1 Advent Calendar 2022 3日目の投稿です。 2日目はichiさんで私の英語学習法とその結果～iOSエンジニアの場合～でした。

今回は、私が今年立ち上げたtoB領域のプロダクトにおける横断的なフロントエンド課題を解決するチーム「フロントエンド推進グループ」について紹介します。

背景

フロントエンド推進グループを立ち上げた背景には以下のような状況がありました。

レガシー化したフロントエンド
転がっているボールを拾うチームがいない問題
スモールチームによる知見のサイロ化

レガシー化したフロントエンド

比較的最近作られたプロダクトではモダンなフロントエンド技術が活用されているものもありますが、社内でも歴史のあるプロダクトではレガシーなフロントエンドが技術的負債となり、以下のような開発スピードを低下させてしまっている事例が発生しています。

長年にわたり継ぎ足しされてきたコードのため、変更による影響範囲を認識することが困難になる
テスト環境が整っていないために品質の保証に多くの労力がかかってしまう

レガシーフロントエンドは技術的負債となって開発生産性を低下させるだけではなく、開発を続けるエンジニアのモチベーションを低下させたりエンジニア採用へ悪影響を与えたりします。これらの問題を無視し続けることはできません。

転がっているボールを拾うチームがいない問題

マネーフォワードでは創業以来スモールチームを重視しており、プロダクトごとに1つ以上のチームが割り当てられています。これは意思決定のスピードを損なわずにユーザーへの価値提供を素早く行うためであります。スモールチームのメリットを最大限に活かし、毎年いくつものプロダクトを世に送り出しています。

一方で、プロダクトチームのみでは解決できないような、誰も拾うことができない問題がいろいろな場所で発生しています。プロダクトによっては所属するエンジニアがバックエンド専任の人ばかりであるチームも少なからず存在します。このようなチームにおいて、例えばレガシーなフロントエンドを脱却したいと考えたときに、フロントエンドに特化した相談をしたり協力して解決できる組織がありませんでした。

スモールチームによる知見のサイロ化

同様の問題として、プロダクトをまたいだ横串の知見やノウハウの共有がうまく行われずサイロ化が起きてしまっています。フロントエンドに限った話ではありませんが、あるチームで時間をかけて取り組んだ試みが他のチームで再度時間をかけて再生産されてしまったり、様々な知見がプロダクトチームに閉じ込められてしまったりと、潜在的な開発生産性向上の余地が削られています。

このような課題を解決するためには横断的にフロントエンドの課題に対処するチームが必要なのではと考え、現在のフロントエンド推進グループの立ち上げに至りました。

フロントエンド推進グループの目指す姿

立ち上げにあたり、フロントエンド推進グループの目指す姿・理想とするチームの形を考えました。

あくまでプロダクトチームを主体に、イネイブリングな活動を目指して

マネーフォワードの開発において価値を生み出している主体はプロダクトチームです。私たちフロントエンド推進グループは、あくまでプロダクトチームが主体であると考え、プロダクトチームのフロントエンド開発能力を引き上げを目指すことを大きな方向性として定めました。このコンセプトは、書籍『チームトポロジー』で紹介される、ストリームアラインドチームをその専門性をもって進化させるイネイブリングチームを下敷きにしています。

フロントエンドの専門性を身につけていることはもちろん、プロダクトチームに寄り添って課題を解決していくことが重要です。プロダクトチームが持っている課題の性質に応じて、ときには自分たちも手を動かしながら、ときには指導していくようなチームを目指しています。

発足後3ヶ月の活動

チームの理想の姿を定めることはできましたが、立ち上げからすぐに理想の動きができるわけではありません。私個人としてもチームとしても、イネイブリングな活動をこれから継続的に行っていくための知見が足りていませんでした。そのため、まず最初はフロントエンド分野の支援を必要としているチームに入り込み、密なコラボレーションを通して経験を積んでいくことにしました。

発足後3ヶ月で実際に行ったこととしては

静的解析(ESLint, Stylelint)の整備
フロントエンドにおけるテストの拡充
ディレクトリ構成の見直し
コードレビューへの参加
フロントエンド実装に関する相談先としての役割

などがあります。

その他にも、チームの活動方針や横断的なフロントエンド組織のあり方などを技術顧問の古川陽介さん(@yosuke_furukawa)と壁打ちする機会もありました。

これからの展望

前述の通り、フロントエンド推進グループの発足後は自分たちも積極的に手を動かし、支援対象のチームと一緒になってフロントエンドをより良くしていく活動を最初に行ってきました。これは今後も続けていきますが、知見が集まるにつれてよりイネイブリング的な活動にシフトしていくつもりです。

また、私たちの活動がどのようにチームに影響を与えたのかを判断することができる定量的な指標も定めていきたいと思っています。具体的には、Four Keysのようなソフトウェア開発チームのパフォーマンスを示す指標を活用したり、プロダクトのフロントエンドの状況を一望できるようなフロントエンドに関するアセスメントシートを用意したりしたいと考えています。