以下の文言は、AI (ChatGPT4) による出力結果です。そのため内容が一部不正確である可能性があります。

はじめに

今回は、サンプルアプリ (https://github.com/dignicate/zero-2023-android) を題材に、ComposeView と ViewModel の連携について解説したいと思います。この記事では、以下の内容をざっくりと説明します。

サンプルアプリの内容
ComposeView に ViewModel を直接 DI している理由と利点
collectAsState を使ってデータの状態を UI に反映する方法
この記事は、Android の公式ドキュメントを参考にしています。

サンプルアプリの内容

サンプルアプリは、簡単な画面で構成されており、ユーザーが入力したデータをリストに追加して表示する機能が実装されています。Jetpack Compose を使用して UI を構築し、ViewModel を利用してデータの管理を行っています。

ComposeView に ViewModel を直接 DI している理由と利点

サンプルアプリでは、ComposeView に ViewModel を直接 DI (Dependency Injection) しています。これにより、Fragment を使わなくても ViewModel を画面に組み込むことができます。これからは、Fragment を使わずに画面構成を行うことが一般的になるでしょう。

Hilt を使っている場合は、hiltViewModel() を使って ViewModel を注入できます。Dagger2 を使っている場合は、独自の拡張を行うことで同様のことが可能ですが、今回は説明を割愛します。

collectAsState によってデータの状態を UI に反映

サンプルアプリでは、collectAsState を使って ViewModel から取得したデータの状態を UI に反映しています。collectAsState は、Flow を State に変換し、データが変更されるたびに自動的に UI を再描画する機能を提供しています。

以下は、サンプルアプリからの簡単なコード例です。

val items: List<Item> by viewModel.items.collectAsState(initial = emptyList())

このように、collectAsState を使うことで簡単にデータの状態を UI に反映させることができます。

まとめ

今回は、サンプルアプリを題材にして、ComposeView と ViewModel の連携について解説しました。以下のポイントを押さえておくと、より効果的に Jetpack Compose を利用できます。

サンプルアプリの内容を理解することで、アプリ構築の基本的な流れを把握できます。
ComposeView に ViewModel を直接 DI することで、Fragment を使わずに画面構成が可能になります。
collectAsState を使って、データの状態を効率的に UI に反映させることができます。
今後、Jetpack Compose の普及が進むことで、Android アプリ開発のフロントエンド部分がよりシンプルになり、開発者にとっても扱いやすくなることが期待されます。今回の記事が、ComposeView と ViewModel を活用した開発に役立てば幸いです。