Jetpack Compose の採用で、 UI 開発の生産性が 56 % 向上したメルカリ

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

株式会社メルカリが手掛けるサービス「メルカリ」では、毎月約 1,900 万人の利用者が、あらゆるものを売買しています。同社は 2013 年に日本で設立、サービスを開始しました。現在、「メルカリ」はスマートフォンを中心に展開する、日本最大の C2C マーケットプレイスとなっています。メルカリのクライアント アーキテクト チームは、新たなアプリケーションの技術スタック構築に向けて、長期的に拡張できる最新のソリューションと技術を活用するため、2020 年に Jetpack Compose の使用を開始しました。

メルカリの取り組み

メルカリのエンジニアチームは、複雑な状態管理と、スタイリングをサポートするデザインシステムを Android ビューで実装する必要がありました。Jetpack Compose を使用することで、この非常に高度なデザインシステムを実装することができました。またJetpack Compose の導入により、各画面の開発に費やす時間も短縮することができました。

Jetpack Compose の導入で、デザインシステムに基づいて新しいアプリの UI コード作成できるようになっただけでなく、UI コードが簡潔で理解しやすいものとなりました。その結果、画面やビジネスロジックの開発により時間を使えるようになりました。その結果、ダークテーマのサポートも行えるようになりました。

これに加えて、Figma 上に作成されたコンポーネントデザインから UI コードを自動生成するツールの PoC(概念実証)実装も行いました。宣言的に UI コードが記述される Compose の特徴を利用することで、より簡単に UI コードの自動生成ツールを作ることができました。

「Android デベロッパーが一度 Jetpack Compose を使った UI の実装に慣れたら、もう元には戻りたくなくなるでしょう。」
メルカリの Android Tech Lead, Anthony Allan Conda 氏

結果

Jetpack Compose と、新しく自社で開発したデザインシステムを使って、従来と比べてはるかに少ないコードでの UI 開発を実現しました。一例をあげると、無限スクロール可能なコンテンツ画面では、約 56 %のコードを削減できました。コード量を削減できた結果、同じ時間でより多くの画面が作成可能となり、またビジネスロジックに代表される UI 以外の開発に、より多くの時間を割り当てられるようになりました。

また、アニメーションを組み込んだり、AnimatedVisibility、Crossfade、Animatable などの直感的な API を使用するなど、UI 自体をさらに活用することができました。
メルカリは、新しいアプリケーションのリリースまで、Jetpack Compose を継続して使用する予定です。Jetpack Compose で Android SDK を使って記述されたデザインシステムは、メルカリ内の複数のアプリケーションでも動作するよう設計されています。

Jetpack Compose を導入する

Jetpack Compose の詳細については、こちらをご覧ください。