TVerのWeb内製化 - 開発スピードと品質を両立させるまでの道のり

JSConf JP 2025登壇資料

Transcript

1. ©2025 TVer INC. 　 　 TVerのWeb内製化 - 開発スピードと 品質を両立させるまでの道のり JSConf JP 2025 永井洸気 株式会社TVer サービスプロダクト本部 / フロントエンド開発部 ジュン・ユン・サング（ポール） Jeun Yun Tsang (Paul)
2. ©2025 TVer INC. 2 自己紹介 永井 洸気 株式会社TVer サービスプロダクト本部 / フロントエンド開発部 • 2024年3月にWebフロントエンジニアとしてTVerに入社 • tver.jp や、CTV（コネクテッドTV）の開発を行なっている • 趣味は、筋トレ、テニス、プロ野球（阪神タイガース） • X（@0906koki）
3. ©2025 TVer INC. 3 自己紹介 ジュン・ユン・サング（ポール） Jeun Yun Tsang (Paul) 株式会社TVer サービスプロダクト本部 / フロントエンド開発部 • イギリス出身 • 2024年10月にWebフロントエンジニアとしてTVerに入社 • tver.jp のフロントエンド開発を行なっている • 趣味は、筋トレ、卓球
4. ©2025 TVer INC. TVerの紹介 4
5. ©2025 TVer INC. 5 TVerの紹介 01 02 03 見逃し配信だけでなく、地上波放送のリアルタイム配信も開始！ 好きな環境で 楽しめる！ 番組放送終了から 約7日間見放題！ リアルタイム配信 パソコン スマートフォン アプリ テレビアプリ タブレットアプリ すべて 無料 ※番組終了から配信までは、時間がかかることがあります ログインすれば 追っかけ再生 も！
6. ©2025 TVer INC. TVerの紹介 累計アプリダウンロード数、9,000万ダウンロード突破！ スマートフォン・タブレット、コネクテッドTVを合わせ た累計のアプリダウンロード数が9,000万ダウンロード （以下、DL）を突破。 TVerアプリのDL数は、2025年4月に8,500万DLを記録して から、わずか6カ月で新たに500万DLを獲得。 6
7. ©2025 TVer INC. tver.jp の技術スタック
9. ©2025 TVer INC. tver.jp の技術スタック ・言語・FW：Next.js, React, TypeScript ・ライブラリ：CSS Modules, SWR, Biome, OpenAPI ・テスト：Vitest, Playwright, Storybook ・ホスティング： Amazon S3, Amazon CloudFront ・開発管理ツール：Github, Github Project, Github Actions ・ドキュメント：Figma, Miro, Confluence, Google Docs ・コミュニケーション：Slack, Google Meet ・AIツール：Claude Code Max 20x, Gemini, GitHub Copilot • 技術スタックとしてはNext.jsやTypeScriptなどシ ンプルでモダンな技術を採用 • S3に静的アセットを配置して、CloudFrontで配 信。レンダリング方式はCSR • OVP（Online Video Platform）プレーヤーとして STREAKSを使用 9
10. ©2025 TVer INC. TVerの開発組織
11. ©2025 TVer INC. 11 TVerの開発組織
12. ©2025 TVer INC. 12 TVerの開発組織 - Webフロントチーム • Webフロントチームは現在、正社員3名 + 業務委託5名 • 各ミッション軸のチームに正社員1名 + 業務委託数名が所属 ラインナップ アクセシビリティ セレンディピティ Webフロント iOS Android バックエンド デザイナー PdM
13. ©2025 TVer INC. 実は1年前 13
14. ©2025 TVer INC. Webフロントチーム 14
15. ©2025 TVer INC. Webフロントチーム 1名だけだった👍 15
16. ©2025 TVer INC. • TVerはバックエンドは内製化していたが、iOS、Android、Webフロントエンドを開発パー トナーへ開発を発注していた • PdMがプロダクトの仕様や施策を決め、PjMが開発パートナーにコミュニケーションを取 りながら開発管理を行う体制 16
17. ©2025 TVer INC. より開発スピードと品質を高めてプロダクトの成長を 牽引するため、フロントエンド領域の内製化を決断 • TVerはバックエンドは内製化していたが、iOS、Android、Webフロントエンドを開発パー トナーへ開発を発注していた • PdMがプロダクトの仕様や施策を決め、PjMが開発パートナーにコミュニケーションを取 りながら開発管理を行う体制 17
18. ©2025 TVer INC. 18 2023.08 QA内製チームの立ち上げ 2023.10 iOS内製開発チームの立ち上げ、 Android開発の完全内製化が完了 2024.03 Webフロントエンド内製開発チームの立ち上げ 2024.04 iOS開発の完全内製化が完了 2024.10 QA、Webフロントエンド 開発部の完全内製化が完了 フロントエンド開発部発足、 Android内製開発チームの立ち上げ 2023.04
19. https://findy-code.io/media/articles/tver-frontend 19
20. ©2025 TVer INC. 内製化立ち上げで抱えていた課題
21. ©2025 TVer INC. 21 ユーザーへもっと早く価値を 提供するために、開発スピー ドを上げたいが。。。 内製化立ち上げで抱えていた課題 ユーザーがもっと早く簡単に好きなコン テンツを発見できることが目標
22. ©2025 TVer INC. 22 • 当初のコードは複雑性が高く、品質 があまり高くない状態 • コーディングルールも存在せず、人 によって実装がバラバラに。開発ス ピードが出せない 内製化立ち上げで抱えていた課題
23. ©2025 TVer INC. 23 品質を担保しながら、開発ス ピードを向上させていくため、 課題の洗い出しから着手 内製化立ち上げで抱えていた課題
24. ©2025 TVer INC. そもそも開発スピードと品質は何？
25. ©2025 TVer INC. 開発スピードの定義 25 そもそも開発スピードと品質は何？ 要件・デザインの 理解 コードの理解 設計・実装 リリース テスト PRレビュー 監視・バグ対応 振り返り 仕様を読み解く時間からバグ対応までのスピードが大事
26. ©2025 TVer INC. 品質の定義 26 そもそも開発スピードと品質は何？ コードの 分かりやすさ バグ発生率 パフォーマンス Web Vitals デザインの一貫性 アクセシビリティ SEO ユーザビリティ バグの発生率だけではなく全体的なユーザー体験とコードの質
27. ©2025 TVer INC. 洗い出した課題がいっぱい。。。
28. ©2025 TVer INC. デザインシステムがなく CSSも整理されていない • 個別にコンポーネントのCSSが設定されている • カラートークンはあるがちゃんと整理していない • カラートークン以外の共通CSSが定義されていない • 汎用コンポーネントと個別コンポーネントが混在して いるケースがある • アクセシビリティを考慮していない これらの課題により、コンポーネントの仕様とデザインの 一貫性が低下し、結果的に全体的な品質が低下している 28 洗い出した課題がいっぱい。。。 シンプルなコンポーネントはずのにCSSが 多くて重複の定義も存在されている コンポーネントの例 適用されているCSS スペーシングがベタ打ち ボタンのカラートークンになっている
29. ©2025 TVer INC. APIデータの定義がバラバラ • APIの型定義がなく、フロントエンドで定義されて いるAPIデータが実際のAPIと合っているかどうか が分かりにくい • APIデータを取得するためのfetch関数が別リポジ トリで管理していてメインテナンスが大変 この結果、APIの仕様が分かりにくくなり、実装スピー ドの低下やメンテナンスの負担に繋がっている 29 洗い出した課題がいっぱい。。。 型定義がないAPIデータのfetch関数が別リポジトリで管理 されていて、同時にデプロイしないとアプリ側とずれる可 能性がある ↓
30. ©2025 TVer INC. 自動テストと検証環境が整備されていない • デプロイできる環境が少ないため、共通開発環境へマージしないと検証できない • Storybookとそのホスティング環境がないため、コンポーネントのUI検証が手間 • コンポーネントテストとユニットテストが少ない • UIとデータ取得のロジックが混在していてテストが難しい • モックデータを生成する仕組みがなく手書きで書いている • E2Eテストがなく、QAチームの手動テスト工数が高い ↓ 手動検証に手間がかかり、品質も保証できていない 30 洗い出した課題がいっぱい。。。
31. ©2025 TVer INC. 課題が尽きない • 動画プレイヤーの改善 • ESLintとPrettierが設定されているがルールが整理されていない • コードのスタイルガイドがなくファイル毎に書き方が変わるため、理解に時間がかかる • エラーログとパフォーマンスの監視（New Relic） • SEOがバックエンドで管理されていてカスタマイズが難しい • 画像が圧縮されていない • 内部リンクのhrefがベタ打ちになっている 31 洗い出した課題がいっぱい。。。 とりあえず解決策を見にいこう！ これ以外にも課題がまだあるが。。。
32. ©2025 TVer INC. デザインシステムとStorybookの導入
33. ©2025 TVer INC. ヘッドレスUIライブラリの検討 汎用コンポーネントを改修する前に下記を検討した • TVerは自社製デザインになっているため、フル パッケージのUIフレームワークが合っていない • アクセシビリティを向上したいが実装に高い工 数が掛かるのを避けたい • 必要なコンポーネントが用意されていて、ド キュメントも分かりやすいこと 上記を踏まえてRadix Primitivesを選定 https://www.radix-ui.com/primitives 33 デザインシステムとStorybookの導入
34. ©2025 TVer INC. デザイントークンとSassを利用する • デザインシステムで定義されたデザイントーク ン（例 : カラー、スペーシング、radius）を変 数化し、簡単に参照できるようにした • ひとつの変数で表現できないCSSをmixinで定義 してセットとして設定する 34 デザインシステムとStorybookの導入 ブレイクポイントもセットとして 設定されているので使いやすい！
35. ©2025 TVer INC. 汎用コンポーネントの改修 • デザインシステムで定義された汎用コンポーネント のバリエーションをpropsで表現 • ドメインロジックが必ず入らないことを意識 • 必要に応じてカスタマイズできるよう拡張性を担保 35 デザインシステムとStorybookの導入
36. ©2025 TVer INC. StorybookとChromaticの導入 • アプリを起動しなくてもコンポーネント単位 で簡単にUIやインタラクションの検証が可能 • 状態とモックデータを自由に設定できるので エッジケースまで洗い出しが容易 • Chromaticへデプロイすることで、デザイ ナーによる確認が楽 36 デザインシステムとStorybookの導入
37. ©2025 TVer INC. デザインシステムと汎用コンポーネン ト改修の結果 • 各画面のUIにおける一貫性を向上でき、品質が向上 • 汎用コンポーネントが使いやすくなって実装スピー ドが向上 • アクセシビリティの改善 37 デザインシステムとStorybookの導入
38. ©2025 TVer INC. 生成ツールとAIの活用
39. ©2025 TVer INC. 39 なるべく手動と単純な作 業を生成ツールとAIに任せ て自動化する文化を作る 生成ツールとAIの活用
40. ©2025 TVer INC. 生成ツールの導入 • SVGRでSVGファイルからアイコンを簡単に Reactコンポーネントへ変換できるようにする https://react-svgr.com/ • pathpidaでNext.jsのpagesディレクトリからタ イプセーフのURLを生成できるようにする https://github.com/aspida/pathpida • OpenAPI TypeScriptでデータスキーマ、fetchと SWRをアプリのリポジトリ内で生成する https://openapi-ts.dev/ 40 生成ツールとAIの活用 Pathpidaの例 データスキーマの例
41. ©2025 TVer INC. AIでモックデータと MSWハンドラーの実装 • テスト環境を改善するためにMSW（Mock Service Worker）を導入 • Claude CodeのCustom Slash Commandで、OpenAPI のスキーマからMSWのHandlerを自動生成 • Mockデータ生成の際のデータソースとして master.mdを用意し、実際に存在する開発環境の データを参照するように整備 41 生成ツールとAIの活用 Claude Codeのプロンプト 生成されたHandler
42. ©2025 TVer INC. • 別リポジトリで管理しているOpenAPIスキーマを 取得し、GitHub Actionsで型の生成 + SWRを生成 する • Claude Code ActionsでOpenAPIの型を参照し、 MSWのHandler生成と、型エラーの修正を自動化 • 最終的にPRが生成され、レビューを通して問題な ければマージ GitHubワークフローで 生成フローを完結させる 42 生成ツールとAIの活用 ワークフローを実行 する PRが作成される OpenAPIスキーマを 取得する AIによるMSWのハン ドラー生成 & 型修正
43. 43 OpenAPIの型生成 Claude Code ActionによるMSW生成と型修正
44. ©2025 TVer INC. AIで生成されたモックデータと MSWハンドラーの活用開始とその結果 • APIがまだ実装されていない状態でもMSWが返す モックデータを参照して実装を開始することがで き、開発スピードが向上 • StorybookにAPI取得含めてストーリーの作成がで きるようになり、実際のユーザーに近い環境での 検証をコンポーネントに対して実施可能に • Storybookの生成に関しても、Claude Codeの Custom Slash Commandを使用し、標準化された Storyの生成を可能に 44 生成ツールとAIの活用
45. ©2025 TVer INC. 動画プレーヤーの改善
46. ©2025 TVer INC. 46 • VOD配信（見逃し配信）のOVPをSTREAKSに移行 ◦ 元々リアルタイム配信で使用していたPLAY社のSTREAKSをVODにも採用 ◦ VODとリアルタイム配信で同じOVPを使用することで、開発スピードが向上や管理コスト が削減。移行時にシーク時のサムネイル機能や画質向上のなども追加 • 広告リクエストの単体テストの実施 ◦ 広告ターゲティングに必要な情報を広告サーバーに渡して、広告を再生するための VMAP/VASTを受け取るが、その際に渡すパラメーターにテストが書かれていなかった ◦ そのため、ヒューマンエラーが発生しうる可能性があったので、単体テストを実装し、未 然に不具合を防ぐ仕組みを構築 • プレーヤーに必要なアセットロードの並列化によるパフォーマンス改善 ◦ プレーヤーを再生するには、IMASDKやプレーヤーのSDK、その他様々なアセットが必要 だが、それらが直列で読み込まれていた ◦ 並列で読み込ませてプレーヤー構築までの速度を改善（約1s） 動画プレーヤーの改善
47. ©2025 TVer INC. その他の解決策
48. ©2025 TVer INC. • PR毎にプレビュー環境をデプロイする仕組みをS3 + CloudFrontで構築し、レビュー 時の検証を容易に • コードスタイルガイドを書いてルールを明確にしながらAI（Copilot, Gemini Code Assist）に単純なレビューを任せる • QAエンジニアが、QA項目に沿ったテストケースを元にPlaywrightでE2Eテストを実装 • ESLintとPrettierをBiomeに統一し、実行速度の向上。pre-commit時に実行し、事前に 検証可能に • 画像サイズを圧縮できるCDNへ移行（ダウンロードサイズを50%以上削減） • Feature-Sliced DesignとPresentational・Containerコンポーネントのパターンにリ ファクタリングし、コードの責務を明確に 48 その他の解決策
49. ©2025 TVer INC. 今まで導入した解決策の結果
50. ©2025 TVer INC. • 画面の一貫性とバグの発生率の改善で品質を向上できた • コードがより疎結合で拡張性が高くなり、開発スピードを向上できた • 生成ツールとAIで手間な作業削減し、ユーザー価値に貢献する開発に集中可能に 50 今まで導入した解決策の結果 レビュー依頼から初レビューまでの平均時間 初コミットからPRオープンまでの平均時間 Findy Teamsで計測しているリードタイムが改善傾向に 🎉
51. ©2025 TVer INC. 次に挑戦したいこと
52. ©2025 TVer INC. • SSRを実現し、パフォーマンスとSEOを改善する • FigmaのCode ConnectとMCPの活用や、VRTの導入による デザイン面の強化 • CTVにおける処理共通化の検討とUI/UXの改善 52 次に挑戦したいこと AIを活用しながらさらにTVerの 品質と開発スピードを向上して行きたい
53. ご清聴ありがとうございました！ ©2025 TVer INC.
54. ©2025 TVer INC. TVer Tech Blog 54 TVerのエンジニア活動をブログに掲載しています！ https://techblog.tver.co.jp