この記事は Android チームによる Android Developers Blog の記事 " Mercari reduces 355K lines of code, a 69% difference, by rebuilding with Jetpack Compose " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。また過去に本内容について詳しく解説いただいた動画はこちらからご覧いただけます。
2020 年、Mercari チームはアプリの技術的なインフラストラクチャを更新するという大きな取り組みを実施しました。当時、そのコードベースは 7 年前のもので、大きなアーキテクチャ更新を受けていませんでした。これは、チームが新しい機能を開発し、タイムリーなアプリアップデートをリリースするということに支障をきたしていました。この技術的負債を解決するために、Mercari は GroundUP プログラムと呼ばれる、Android を含むプラットフォーム全体のアプリケーションを完全に書き直す取り組みをリリースしました。
その目標は、拡張可能な設計で完全に近代化されたアプリケーションを作成することでした。アプリをリツールしている間、Mercari のデベロッパーは、ネイティブ UI を作成するための Android の最新の宣言ツールキットである Jetpack Compose に目を向けました。評価中、チームは Jetpack Compose で書き換えるとコードベースが整理され、アプリの見た目をよりコントロールするのに役立つことを学びました。
Mercari チームは、Jetpack Compose を使用して Android アプリのアーキテクチャと技術スタックを完全に書き換えました。Mercari のデベロッパーは新しいデザインシステムを作り、Compose を使って完全に統合し、新しい機能を簡単にテストして実装できるようにしました。この新しいデザインシステムを使用して、Mercari チームは 130 以上の UI 画面をマーケットプレイス用に書き換え、多くのコンポーネントの見た目を近代化しました。
Jetpack ライブラリの助けを借りて、Mercari のチームは書き換え中にレガシーコードをすべて削除し、コードベースを大幅に削減し、デベロッパーにとって管理しやすくしました。「コードは大幅に少なくなりましたが、実際には同じアプリです」と Mercari の Android テクノロジーリーダー、Allan Conda は述べます。「書き換えられたアプリのコード行数は約 35 万 5000 行少なく、これは以前よりも約 69% 少なくなっています。」
Mercari チームが最初に GroundUP プログラムを開始したとき、Jetpack Compose はデベロッパープレビューでのみ利用可能でした。UI を作成するための新しい宣言的なアプローチのために、Mercari チームは Jetpack Compose で完全にアプリを作成することにしました。しかし、それはまだ非常に新しいので、２つのツールキットを併用するためにはこれまでになかったエッジケースを解決する必要があることに気付きました。
例えば、Mercari の出品フォーム画面ではユーザーは出品したい商品の詳細を入力するように求められます。その後、ユーザーはデバイスのギャラリーから写真を選択し、ドラッグ ジェスチャーを使用してこの画面で並べ替えることができます。当時、ジェスチャー API は Jetpack Compose では利用できなかったため、チームは Compose の AndroidView を利用することで、ジェスチャーを扱える View を出品フォーム画面にシームレスに統合しました。これによって、この機能が Jetpack Compose で利用できるようになるまで、安定しているとはいえ一時的な形でドラッグ ジェスチャーを実装することができました。
Mercari チームは、2 つのツールキットのスイッチがいかに簡単であるかに感銘を受け、Compose と一緒に Views を使用することで、このようなエッジケースをよりうまくコントロールできるようになりました。Compose は現在、Gesture API をサポートしており、それ以来 Mercari デベロッパーは Compose のみを使用してドラッグ ジェスチャー コンポーネントを完全に作成し統合しています。
Jetpack Compose は Mercari が最初にこれを採用した当初に比べ非常に成熟し、今では Android デベロッパーのほとんどは、Android アプリが Compose で完全に書き込めるようになったため、両方のツールキットと相互運用する必要がなくなりました。
Mercari チームは Compose を使用して、アプリの安定版リリースに対する ベースライン プロファイル の生成を自動化し、それが非常に有益だと感じていました。標準の Compose ベースラインプロファイルを使用すると、使用しない場合に比べ、ホーム画面は最大 2 倍速くフレームをレンダリングします。さらにカスタムプロファイルを提供すると、標準のベースラインプロファイルを持つだけと比較して、最大 20％メルカリユーザーがスクロールする際に追加で高速化されます。
チームは、Android Macrobenchmark でのアプリのコア シナリオに基づいて、自動化されたパフォーマンス テストも作成しました。「Android Macrobenchmark を使用すると、起動、スクロール、および画面の読み込み時間のパフォーマンスを自動的にテストできます」と Allan は述べています。「現在、検索結果や商品の閲覧など、このようなテストでカバーされているコア シナリオが 6 つあります」
また、Mercari のデベロッパーは、リアルタイムアプリのパフォーマンスモニタリングツールである Firebase Performance Monitoring とカスタムコードを統合し、Compose 画面のスクロールパフォーマンスを計算しました。Firebase Performance Monitoring を使用して、Mercari チームは検索結果画面でのパフォーマンスの問題を検出しました。Mercari デベロッパーは Android Profiler を使用して問題を調査し、検索結果のスクロール時のフレーム レートが低いことがわかりました。これにより、レンダリングが遅くなる場面が約 23.6% 減少しました。
Mercari チームは Google の Compose のパフォーマンスのベスト プラクティス と Compose の安定性 (英語) を参照して、このフレーム レートの問題を解決しました。Mercari のデベロッパーは、アプリが Composables (英語) をスキップするように、 検索画面上の未使用の状態を外に取り出すことで、フレームレートを大幅に向上しました。
管理するコードが少ないため、Mercari デベロッパーは機能のテストと実装がはるかに簡単になりました。「新しい基盤を使って、ようやく多くのテストができます。ユーザーは Mercari アプリの新機能をより速い速度で期待できるでしょう。」と Allan 氏は述べています。
Mercari のデベロッパーはさらに Animation API を使用するアプリを開発できることを楽しみにしています。Compose を使用すると、コンポーネントのアニメーション化がはるかに簡単になり、Android UX の大幅に改善できる可能性があります。
Jetpack Compose で UI 開発を最適化しましょう。
Reviewed by Mari Kawanishi - Developer Marketing Manager, Google Play
