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

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

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

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

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

Jetpack Compose を使ってみる

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