Jetpack Compose + マルチモジュール (+ Atomic Design)で作るAndroidプロジェクト

先日投稿したQiitaでJetpack Composeのサンプルを作りました。

Jetpack Composeといえば宣言的UIですが、宣言的UIであれば、Atomic Designのようにコンポーネントを綺麗に分けて書きたくなると思います。
できればアプリ内で共通で使うUIは別のモジュールとして切り出しておきたくなりますよね。

というわけで上記のサンプルをマルチモジュール構成に変更しました。

できたもの

github.com

masterにマージしてあります。

構成説明

ディレクトリ構成は以下の通り。

root
 |
 |-- di-runner   (DIの実装兼entrypoint)
 |-- data   (dataモジュール)
 |-- domain   (domainモジュール)
 |-- common   (entityやutilを格納するモジュール)
 |-- ui-component   (UIの共通コンポーネントを格納するところ)
 |-- feature   (各種Featureモジュール)
      |- feature-main

ui-componentモジュールはAtomic Designでいうところのorganisms、molecules、atomsのコンポーネントを格納します。 今回はmoleculesとatomsをpartsというパッケージにまとめました¹。
また、共通のThema設定、Color設定などもここに置きます。

featureモジュールでJetpack ComposeのScreen(Atomic Designではpages、templatesの部分)を作っていきます。 ViewModelとUseCaseのinterfaceもここで作ります。
今回はFeatureが1つなのでNavHostが簡素ですが、featureモジュールが増えてきた場合を考えて、各FeatureがcomposableとActionsを返す仕組みを整えておくとよさそうです。

所感

モジュール分けによって依存関係がわかりやすく、実装しやすくなりました。今後はJetpack Compose + マルチモジュールの構成が主流になっていきそうな予感がしますね。

---

1. Atomic Designの原理である5階層で運用する場合、各メンバーが共通認識をしっかり持たなければ階層がぐちゃぐちゃになりかねないです。軽く運用したい場合は、あえて下側をまとめるだけでもやりやすくなるかと思います。↩