事業成長を加速させるためにフロントエンド環境を最高にする
ランサーズ Advent Calendar 2021 17日目の記事です
PjM兼Webエンジニアをやっているshirasudです
PjMとしてのキャリアをスタートして早1年ちょい、日々試行錯誤していますが
人をマネジメントして上げる生産性の限界を感じていて
仕組みをリアーキテクトする必要があると感じています
なぜそう思うのか。どういうアプローチで変えようとしているのか
色々すっ飛ばして端的に言うと
脱MVCしてAPI中心設計 + Next.jsにリアーキテクトするために行動しています
開発事情
ランサーズは仕事を依頼したいクライアントと仕事を受けたいランサーをマッチングさせるプラットフォームを運営しています
CakePHP、jQueryで構成されている部分が大半ですが一部ドメインはReactで作られていて
エンジニアは一定バックエンドもフロントエンドも両方いじれる必要が現状あります
2008年のサービス開始から約13年の歴史ということもあり、年々運用コストが膨らんで生産性は低下の傾向にあります
具体的なフロントエンド事情については@high-gさんの記事を見てください
(フロントエンド領域のテストがほぼなく、PHP、HTML、JS、(場合によりCSS)が混在しているテンプレートエンジン見て「きっついなぁ」という印象を受けるかも)
現場のPjMとしての肌感
自分のPjMとしての仕事は、メンバーに成長機会を与えつつモチベーションとバリューを引き出し、高い生産性で(かつ楽しく!)チームとして成果をあげて事業貢献することにありますが
あくまで現場のいちPjMの意見として冒頭でも書いている通り
人をマネジメントして生産性を上げることの限界を感じています
当然ながら人に罪はありません
高いパフォーマンスを出せるだけの実力をもったメンバーが揃っています
ではなぜ限界なのか?生産性課題をドリルダウンしてみました
生産性課題ツリー
(以下に概要をのせますので、図は興味ある方だけ見てください)
- サービスの仕様複雑度
- ドキュメントで把握できるレベルをとうに超えていて、OJTコスト高く新規参入者のワークに時間がかかる、サービス理解が深い人のハンドリングコストが高い
- 動作検証コスト
- 複雑かつデータと密結合で目的の画面や機能に到達するまでにめちゃくちゃ時間がかかる
- システムの品質
- 手動テスト割合が高く再利用可能な自動テストが不十分で、仕様を担保できておらず手を入れるコストが高い(特にController層、View層のテストは無)
- 障害発生率
- 仕様的要員/システム的要員の両側面からの障害が多発する。特に仕様的要員の障害発見が遅れる
- 対応コスト
- 開発者体験
- 開発、検証に時間がかかりスピードが出せない上に、専門性を発揮しづらい
- モチベーション
- 高い専門性でバリューを発揮しづらく、成長機会が乏しい。プロダクト志向を全うしようとしても最終的にはつらさが勝つ
- 採用
- モチベーションが保てずワークしてきた頃にできる人から卒業、市場のスキルとの乖離(この規模のjQueryを好んで保守したい人はいない)
- 育成
- 採用でサービス理解の深い人を獲得することは不可能。モチベーションを保ちながらの次期リーダー候補の育成が追いついていない
- 事業継続性
- 組織にとって不適切な人員の流動と生産性の低下により仮説検証の手数が足りず事業成長曲線が緩やかになりがち(今がそうというよりもっと最大化できる余地がある)
プロダクト志向を全うするだけの基盤、開発体験が伴っていない
「プロダクト志向」「技術志向」という言葉を使います
(サービス志向、ビジネス志向など色々あるけど)
仕事においてはどちらも必要なので、あまり2極で語りたくないテーマではあります
どちらが目立つかはポジションや強み、状況によると思うからです
自分が所属する事業部は特に、「プロダクト志向」が求められるポジションですが
関心が「作るもの」ではなく「プロセス」に向いているメンバーが多くいることは事実です
ビジョンに共感したメンバーが集まっていて、面白いものを作っているのに何故でしょうか?
それは「プロダクト志向を全うするだけの基盤、開発体験が伴っていない」からだと仮説だてています
どう改善しようとしているのか
まず前提としてお伝えしたいのは組織に改善の意思がないわけではありません
すでに組織として取り組めていることも多くあります
ただ、生産性課題を解決させるためには、まだまだ仕組み、体制ともに不足しています
冒頭で触れた以下の背景としては
SoE、SoRを分離してそれぞれに注力できる状態を目指し仮説検証スピードを上げたいからです
※ フロントエンドエンジニアが主役のように見えますが、全体が専門性を発揮でき幸せになれる世界を目指しています
前期のアクション
色々アクションできた気はするけど大きな前進はできず、正直アドオンじゃしんどいよねみたいな感じでした
- デザインの乖離が起き始めているので、新デザインシステムを作るためデザイナーと協力体制
- E2Eテストツールmablの導入、手動テストの工数を減らすことから始め、将来的に仕様複雑度に向き合いOJTコスト、検証コストを下げる
- Datadogでブラウザエラー収集、エラーレートの可視化、フロントエンド障害にいち早く気付けるように(未遂)
- 組織のフロントエンド力を高めるためにチーム横断レビュー
- 足元のできるところからフロントエンド品質を高められないかチームで試行錯誤
- チームで生産性向上をテーマに1週間ハッカソンを実施し、コードの依存ツリーとメソッド毎の循環複雑度、保守指標、カバレッジを可視化するツール作成
今期のアクション
前期の良いアクションは継続しつつ、生産性を向上させるために根本改善、体制を作れないか打診するために小さく実験と学習を開始
- 前期のアクション引き続き運用レベルまでもっていく
- 生産性向上の必要性を組織的に認知させるためにステークホルダーへの説明責任を果たす
- 生産性向上に継続して向き合う体制をつくるため首をつっこむ
- (自分のロールには身に余ることではあるが受け入れてもらえてる)
- 直近はフロントエンド推進をスコープとしマイルストーンを立てる
- 検証コストダウン、品質向上、再現性を保つためにAPI中心設計の提案
- フロントエンド品質改善、開発体験向上のためにNext.jsでリアーキテクトする実験、勉強会を開始
来期以降のアクション(アイデア)
生産性に向き合う体制がある前提で、あくまでプロダクト志向をもって進みたいと思います
諸事情で誰かが欠けたとしても続いていく構造にして、組織的に進めていく必要があります
- まずは脱MVCしてAPI 中心設計+ Next.jsにリアーキテクトするために行動する
- 開発体験良くそれぞれが高い専門性を発揮できる基盤づくり
- 組織的な運用設計、知識引き上げもセットで考える
- 新デザインシステムを構築、保守できるようにしてデザインに投資を
- アクセシビリティに向き合いユーザがUIやUXの齟齬に混乱しないように
- 生産性観点で自分たちの福利厚生でもある
- 品質を向上させてユーザにとって不利益がないプロダクトを目指す
- UT強化、E2Eテストツールmablをより活用し安定したリリースを
- 障害発生率を下げて対応コストを減らし、よりプロダクト開発に集中できるように
- 徐々に生産性向上のスコープをエンジニア以外にも広げていく
- エンジニア全体の開発体験向上から開始し、非エンジニア含む全体のWorker Experienceへ
- その他にも事業成長の加速につながる取り組みを色々と
- CoreWebVitalsに向き合う
- 生産性向上の取り組みを採用につなげる
など、あくまでアイデア
まとめ
自分の場合はフロントエンドチームのWillから始まりましたが
組織のWillに合流してきた感があり今期来期大きく前進できそうな兆しがあります
リアーキテクトの経験をしてみたい方、品質や開発体験にこだわりたい方など、
一緒に同じ目線で課題に向き合ってくれる仲間を募集しています!
入社してからギャップを感じるよりは、
課題感をお伝えした上で一緒に進めていきたい思いからストレートにお伝えしました
課題の多さに一定ネガティブな印象を受けた方もいるかと思いますが
むしろ逆で解決したい課題があってめっちゃ楽しいです!は強く言っておきたいこと
自分の仮説やアプローチは必ずしも正しいとは思いませんし、
色んな思考、アプローチがあっていいと思います
ただ、向いてる方向は同じにしたいので、現場の色んな方の声に耳を傾けて
これまで運用してくれたメンバーや既存の仕組みに敬意を払いつつ
事業拡大、組織拡大に合わせて変えていきたいと思います
ステークホルダーを納得させる、効果を示すなど面倒な説明責任は自分が引き受けるので、
エンジニアには高い専門性をもって伸び伸びとバリューを発揮してもらいたいと思っています
よりモチベーション高い組織になって、楽しく仕事して成果をだしてみんなで旨い酒が飲みたいです
それだけが私の望みです
明日のアドベントカレンダーは@kata_devさんです。よろしくお願いします