TVer で Web フロントエンドエンジニアをしている永井です。 この記事は TVer アドベントカレンダー 2024 19 日目の記事です。 18 日目の記事は @k0bya4 さんによる 「Atlasを使った宣言的マイグレーションでDBスキーママイグレーションを自動化する」 でした。
19 日目の記事では、Web フロントエンドチームの内製化について紹介します。
※ TVer の Web フロントエンドは、広告プロダクトである「TVer 広告」の配信システム・広告周辺領域の開発を行うチームと、tver.jp といったユーザー向けのプロダクトを開発するチームの 2 つあり、今回の話は後者に関するものとなります。
はじめに
現在 TVer の Web フロントエンドチームでは、tver.jp の フロントエンドを開発をしています。2024 年 12 月時点では、 3 名の正社員と 1 名の業務委託の計 4 名体制で開発しており、月間ユニークブラウザ数が 4,000 万 MUB を超える大規模プロダクトではあるものの、各々が高い専門性とオーナーシップを持ちながら少数精鋭で開発を進めています。
しかし、1 年前を振り返ると、TVer の Web フロントエンドの開発は外部ベンダーに委託しており、TVer 社内で Web フロントエンドのチームは存在していませんでした。
そうした状況の中、私が今年の 3 月に 1 人目の Web フロントエンジニアとして TVer に入社し、そこから約半年をかけて外部ベンダーとの契約終了と内製チームの立ち上げを行ってきました。
今回は、TVer の Web フロントチームの内製化への道のりと、これからの Web フロントチームについてお話しできればと思います。
内製化の背景
先ほど Web フロントエンドを外部ベンダーに委託をして開発をしていたとお話ししましたが、今まで TVer では Web フロントエンド以外にも iOS、Android も同様に外部ベンダーに委託し、TVer はその開発の管理を行う形でユーザーに TVer を届けていました。
我々のミッションは「テレビを開放して、もっとワクワクする未来を TVer と新しい世界を、一緒に」であり、ミッションを軸に更なる成長を求めて 、スピード感を持って TVer の開発を進めていく必要があります。
そのためには、更なる品質を求めて引き継いだコードの拡張性や保守性や、開発イテレーションを改善していくことが重要です。
そのような課題感の中からモバイル、Web、QA 含めたフロントエンドの開発を内製化する計画が始まり、内製化の走り始めとして Android の内製チームが 2023 年の 1 月から立ち上がりました。 そこから 2023 年 8 月に QA エンジニアが入社して QA 内製チームの立ち上げ、 10 月に iOS エンジニアが入社して iOS 内製チームの立ち上げがスタートし、Web フロントエンドも、私が 2024 年 3 月に入社して内製チームが立ち上がりました。
ここのフロントエンド全般に関する内製化のお話は、以前 HR note の中で、EM と iOS、Android エンジニアのインタビュー記事がありますので、詳しく知りたい方は是非読んでみてください。
内製化への道のり
先ほど書いた通り、Web フロントチームの内製化は 2024 年の 3 月から立ち上がり、そこから半年をかけて内製チームを作っていきました。 入社した当時は私 1 人だったので、内製チームを作っていく上で、以下のことが最初のミッションとなりました。
- ドメイン知識とコードのキャッチアップ
- チームを作るための採用
ドメイン知識とコードのキャッチアップ
入社した当時のチーム体制は、TVer 側は私 1 名と、外部ベンダーの Web フロントエンジニア 2 名の計 3 名でスタートしました。 当時は私が 1 人目の Web フロントエンジニアでしたので、Web フロントエンドに関する社内外からの質問や相談が集中することになります。しかし、私自身放送業界が未経験だったため、まずは 放送業界、動画配信技術、TVer 社内で使用される用語の整理や、コンテンツ入稿から TVer で配信されるまでの流れ、上司との 1on1 での細かい不明点の整理を行い、自分の知らないことを徐々に減らしていきました。
特に Web フロントエンドにおけるコア機能である VOD（ビデオ・オン・デマンド）や LIVE を視聴できるプレーヤー周辺の理解には苦労しました。一口にプレーヤーといっても、そのプレーヤーには広告を視聴できるようにするためのアドサーバーとの連携や、視聴ログの送信、画質や音量調整など、様々な処理や機能を包含してユーザーに提供しています。こうした部分に関しては、実際の不具合修正によるキャッチアップや外部ベンダーとの MTG などで疑問点をつぶしていきました。
とてもありがたかったこととして、外部ベンダーのエンジニアが内製化を見据えたコードの実装やドキュメンテーションをしてくれたことです。例えば、外部ベンダーとの契約が終了した後にコードの意図や背景を聞くことは難しくなりますが、それに備えてコードの各所にそのコードを実装した意図、背景のコメントや、そのコードを実装するために TVer サイドとやり取りをしたチケットや Slack のリンクを添えてコミットしてもらっています。
契約が終了した現在でも、コメントやリンクを辿ることでそのコードの意思決定の背景を掴み取ることができているので、内製チームで開発を進めていく上で大変助かりました。
上記のように私がキャッチアップしてきた内容は後から入社したエンジニアも必要になる知識であるので、入社した後に体系的にキャッチアップできるようにオンボーディング資料にまとめて共有するようにしました。
チームを作るための採用
内製化を進めていく上で、私 1 人ではこの大規模プロダクトの Web フロントエンドは開発できません。そのため、TVer の開発と並行して、入社して早い段階から正社員と業務委託の両軸で TVer のフロントエンドを一緒に作ってくれる方を探しました。
Web フロントエンドの採用を進めていく上で、以下のようなことを重視していました。
- 自立的にオーナーシップを持って開発を進めることができる方
- フロントエンドに関しての高い専門性を持つ方
TVer の Web フロントチームはサービスの規模からすると小さく、各々が持つ裁量はその分だけ大きくなります。また、既存のコードには拡張性や保守性の観点で様々の課題があり、そうした課題を自ら発見し、時には関係者を巻き込みながら修正していく動き、そして技術力が必要になってきます。
このように、まずは今のフェーズで必要な Web フロントエンジニアの候補者イメージを定め、それを上司や人事の方とすり合わせながらジョブディスクリプションを精査していきました。そして、こうしたイメージに合う候補者のスクリーニングや、カジュアル面談、面接の実施、内定者へのオファーレターなどを作成していきました。
そのような形で採用を進めていった結果、先ほども書いた通り、私含めて合計 4 名の Web フロントチームになりました。各々が高い専門性やそれを土台にした推進力を持っており、私 1 人ではできなかった様々な改善がこの数ヶ月で進んでいくことができ、とても感謝しています。
Web フロントチームの現在とこれから
TVer の Web フロントエンドは内製化が始まったばかりで、解決したい課題は山のようにあります。ただ、この数ヶ月でもチームで沢山の改善を行うことができました。 代表的なところで言うと、以下のような感じです。
- React や Next.js、Node.js のバージョンアップ
- Feature-Sliced Design をベースにしたディレクトリ構成の変更
- デザインシステムの整備、Storybook の導入
- ESLint, Prettier から、Biome への移行
- GitLab から GitHub への移行、GitHub Actions の整備
私たちは各々がプロジェクトを別で持って進めていますが、朝会で毎朝集まって、それぞれが改善したい内容やちょっとした共有、相談事項をカンバン形式で持ち寄って議論しています。
その他にも、通常リリースに含めるチケットの数の増加や PR Open から Merge までのリードタイムの短縮など、内製化する前とした後で大きく改善できていると実感しています。
しかし、私たちが解決したい技術的な課題や開発フローの改善点はまだまだ山積みです。そして、TVer というプロダクトも更なる成長を求めて様々な拡張が予想されています。その為には更なる仲間が必要です。
TVer の Web フロント技術は、tver.jp に留まらず、CTV（コネクテッド TV） というデバイスやその他様々な場所で使用されており、Web フロントエンドエンジニアが活躍できる場所は多く用意されています。
TVer の Web フロントエンジニアは絶賛採用中ですので、もし少しでも興味がある方はお気軽に下記からご応募ください！
最後に
TVer アドベントカレンダー 19 日目の記事では、Web フロントエンドチームの内製化について書きました。内製化はスタートラインに立っただけなので、ここからどのように内製チームとして TVer の成長に寄与するかが大切になります。2025 年も変化を楽しみながら開発していきます。
明日は @hide0101 の 「iOSDC Japan 2024登壇してきました&その後！」 です。ご期待ください！
