TikTok: Jetpack Compose でコードサイズを 58% 削減し、新機能のアプリ パフォーマンスを向上

TikTok は、膨大なユーザーベースと革新的な機能で知られるグローバルなショート動画プラットフォームです。チームは、ユーザー向けにアップデート、テスト、新機能を継続的にリリースしています。技術的負債を管理しながら開発速度を維持するという課題に直面した TikTok Android チームは、Jetpack Compose を採用しました。

同チームは、プロダクト要件のイテレーションをより迅速かつ高品質に実施したいと考えていました。Compose を活用することで、チームはコード量を減らし、認知負荷を軽減してエンジニアリングの効率を向上させるとともに、パフォーマンスと安定性の向上も目指しました。

複雑な UI を合理化してデベロッパーの生産性を向上

TikTok のページは、見た目よりも複雑なことが多く、多数の条件付き要件が階層化されています。この複雑さにより、メンテナンスが困難で、構造が最適化されていないビュー階層や、過剰なビューのネストが発生することがよくありました。これにより、測定パスの数が増加し、パフォーマンスが低下していました。

Compose は、この構造上の問題に対する直接的な解決策を提供しました。

さらに、Compose の測定戦略は、二重課税を軽減するのに役立ち、測定パフォーマンスの最適化を容易にします。

デベロッパーの生産性を向上させるため、TikTok の中央デザイン システム チームは、さまざまなアプリ機能に取り組むチームにコンポーネント ライブラリを提供しています。Compose での開発はシンプルで、小さなコンポーザブルを活用することは非常に効果的であり、条件付きロジックを含む大きな UI ブロックを組み込むことは簡単で、オーバーヘッドも最小限に抑えられることがわかりました。

戦略的な移行を通じて今後の道筋を構築する

Jetpack Compose を戦略的に導入することで、TikTok は技術的負債を管理しながら、ユーザーに優れたエクスペリエンスを提供することに集中し続けることができました。Compose の機能により、条件付きロジックを適切に処理し、コンポジションを効率化できるため、チームは新規ページまたは完全に書き直されたページで、ページの読み込み時間を最大 78% 短縮できました。この改善率は、小規模なケースでは 20 ～ 30%、完全な書き換えや新機能では 70 ～ 80% でした。また、ビューで構築された同じ機能と比較して、コードサイズを 58% 削減できました。チームはさらに、いくつかの学びを共有しています。

TikTok チームの全体的な戦略は、特定のユーザー ジャーニーを段階的に移行することでした。これにより、移行して測定可能なメリットを確認してから、より多くの画面に拡張する機会が得られました。まず、Compose を使用して QR コード機能の全体的な構造を簡素化し、改善を確認しました。その後、チームはログインと登録のエクスペリエンスにも移行を拡大しました。

チームは、他にも次のようなことを学びました。

移行中にパフォーマンスを確認したところ、TikTok チームは、1 つの ViewHolder 内の要素を置き換えるために多数の小さな ComposeView を使用すると、コンポジションのオーバーヘッドが発生することに気づきました。移行を拡大して、ViewHolder 全体で 1 つの ComposeView を使用することで、より良い結果が得られました。

ViewPager 内の Fragment を移行する際、カスタムの高さロジックと、テストに基づいて UI を非表示または表示する条件付きロジックを使用しても、パフォーマンスに影響はありませんでした。この場合、Fragment を移行するよりも、ViewPager をコンポーザブルに移行する方がパフォーマンスが向上しました。

Jun Shen 氏は、Compose が「機能開発に必要なコード量を削減し、テストのしやすさを向上させ、提供を加速する」点を高く評価しています。チームは、Compose の導入を徐々に増やし、長期的には Compose を優先フレームワークにする予定です。Jetpack Compose は、デベロッパー エクスペリエンスと本番環境の指標の両方を大規模に改善するための強力なソリューションであることが証明されました。

Jetpack Compose を使ってみる

Jetpack Compose がチームにどのように役立つかをご確認ください。