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

メルカリは、何百万人もの人々がほぼあらゆる商品をショッピング、販売できるサービスを提供しています。同社は 2013 年に日本で設立され、今やスマートフォンに特化した C2C マーケットプレイスは日本最大級です。メルカリのクライアント アーキテクト チームは、長期的にスケールできる最新のソリューションとテクノロジーを使用して、新しいアプリケーション向けの技術スタックを構築することを目標として、2020 年に Jetpack Compose の利用を開始しました。

Eyecon の取り組み

メルカリのチームは、Android ビューで複雑な状態管理とスタイル設定を備えたデザイン システムを実装する必要がありましたが、これは非常に複雑なタスクでした。Jetpack Compose を使用することで、この複雑なシステムを実装できただけでなく、各画面の開発に費やす時間を削減できました。

また、Jetpack Compose は、デザイン システムを利用して新しいアプリの UI コードを記述し、UI コードを簡潔で理解しやすいものにしました。その結果、チームは、ダークモードの実践的なサポートなど、画面やビジネス ロジックの作成により多くの時間を費やせるようになります。

さらに、メルカリのチームは、Figma をデザイン システムと統合するための概念実証ツールを作成しました。このツールを使用すると、コンポーネント デザインから UI コードを自動生成できます。開発チームは、このツールは宣言型の性質を持つ Compose の方が開発しやすいと述べています。

「Android デベロッパーが Jetpack Compose コードの記述に慣れたら、もう戻りたくなくなります。」 - メルカリ Android テクニカル リーダー Anthony Allan Conda 氏

結果

Jetpack Compose と新しいデザイン システムにより、メルカリは画面を作成するためのコードを大幅に減らすことができました。一般的なユースケースである無限スクロール可能なコンテンツが表示された画面では、実際にコードを約 56% 削減できました。その結果、同じ時間でより多くの画面を作成できるようになり、ビジネス ロジックなどのコードの記述により多くの時間をかけられるようになりました。

また、アニメーションを組み込むことや、AnimatedVisibility や Crossfade や Animatable などの直感的な API を使用するなど、UI 自体でできることが増えました。

メルカリは、リリースまで新しいアプリで Jetpack Compose の使用を継続する予定です。また、Jetpack Compose で記述された Android SDK を備えたデザイン システムも、メルカリ内の複数のアプリと連携するように設計されています。

始める

Jetpack Compose の詳細を確認する。