【TECH BLOG】ZOZOTOWN AndroidへのJetpack Compose導入の取り組み

こんにちは。ZOZOTOWN本部 ZOZOアプリ部 Androidチームの高橋です。ZOZOTOWN Androidチームでは、Jetpack Composeを導入しました。

この取り組みは、つい先日、Android Meetup【ZOZOテクノロジーズ × サイバーエージェント × GMOペパボ】でもご紹介しています。

Jetpack Composeとは

Jetpack ComposeはGoogleからリリースされているUI実装のツールキットです。Jetpack ComposeではComposableアノテーションを付与した関数（以下Composableと呼ぶ）をKotlinのコード上に記述してUIを定義します。

Jetpack Composeの特徴は宣言的UIフレームワークであることです。宣言的UIとは、状態をUIに変換するという考え方です。これまで、UIの更新はViewに定義されているメソッドを明示的に呼び出して行うのが一般的な方法でしたが、Jetpack Composeでは、再コンポーズの仕組みによって自動的にUIが更新されます。

背景

ZOZOTOWN Androidには、商品の検索結果を表示する「検索画面」と、商品の詳細を表示する「商品画面」が存在します。

これらの画面は高頻度で機能追加や改修が行われており、UIの表示制御や状態管理が複雑化していました。また、UI実装の複雑化に伴って、UIの更新実装漏れなどによる不具合が度々発生していました。さらに、商品画面では巨大なレイアウトによるパフォーマンスの低下も問題となっていました。

ZOZOTOWN Androidチームでは、Jetpack Composeを導入することで複雑なUI実装が簡素化され、UIに関する不具合を抑えることができると考えました。また、パフォーマンスに関してもJetpack ComposeのLazyColumnやLazyRowなどを使用することで改善できると考えました。

以上の理由からZOZOTOWN AndroidチームではJetpack Composeの導入に取り組みました。

続きはこちら