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

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

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

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

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

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

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

戦略的な移行で前進する道筋を構築する

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

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

チームは、次のような追加の学びを共有しました。

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

カスタムの高さロジックと、試験運用に基づいて UI を非表示 / 表示する条件ロジックを含む ViewPager 内のフラグメントを移行しても、パフォーマンスに影響はありませんでした。この場合、ViewPager を Composable に移行する方が、Fragment を移行するよりもパフォーマンスが向上しました。

Jun Shen は、Compose が「機能開発に必要なコードの量を減らし、テストのしやすさを向上させ、リリースを加速させる」ことを高く評価しています。チームは Compose の採用を段階的に増やし、長期的に優先フレームワークにすることを計画しています。Jetpack Compose は、デベロッパー エクスペリエンスとプロダクション指標の両方を大規模に改善するための強力なソリューションであることが証明されました。

Jetpack Compose を使ってみる

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