ViewModelの責務はどう変わった? 3つの図から紐解くアーキテクチャーの変遷

モダンなAndroid開発(Jetpack Compose + MVVM/MVI)において、ViewModelの役割は単なる「データ保持」から「状態管理のハブ」へと進化しました。今回は、3つのアーキテクチャ図を比較しながら、その設計思想の違いを整理します。

 

🤔 1. 最もシンプルな「State管理のみ」


class TaskViewModel(private val repository: TaskRepository) : ViewModel() {
    // 状態(State)のみを保持
    val uiState: StateFlow<List<Task>> = repository.getTasks()
        .stateIn(viewModelScope, SharingStarted.WhileSubscribed(5000), emptyList())

    // 直接関数を呼び出す
    fun addTask(name: String) {
        viewModelScope.launch {
            repository.saveTask(Task(name))
        }
    }
}


@Composable
fun TaskScreen(viewModel: TaskViewModel = viewModel()) {
    // 状態をそのまま収集
    val tasks by viewModel.uiState.collectAsState()
    var text by remember { mutableStateOf("") }

    Column {
        TextField(value = text, onValueChange = { text = it })
        Button(onClick = { 
            // ViewModelの関数を直接叩く (Simple)
            viewModel.addTask(text) 
        }) {
            Text("追加")
        }
        
        LazyColumn {
            items(tasks) { task -> Text(task.name) }
        }
    }
}

特徴:
ViewModelはRepositoryからデータを取得し、State(状態)を保持してViewへ流すだけのシンプルな構造です。

メリット:
コード量が少なく、小規模なプロジェクトや単純な画面には最適。

課題:
ビジネスロジックがViewModelに肥大化しやすく(Fat ViewModel)、View側でのユーザー操作(Action)がどう処理されるかが図示されておらず、双方向のやり取りが曖昧になりがちです。

 

🤔 2. Domain/Usecaseの導入による責務の分離


// ビジネスロジックを分離
class GetSortedTasksUseCase(private val repository: TaskRepository) {
    operator fun invoke(): Flow<List<Task>> = repository.getTasks().map { it.sortedBy { t -> t.date } }
}

class TaskViewModel(
    private val getSortedTasksUseCase: GetSortedTasksUseCase,
    private val addTaskUseCase: AddTaskUseCase 
) : ViewModel() {

    val uiState = getSortedTasksUseCase()
        .stateIn(viewModelScope, SharingStarted.WhileSubscribed(5000), emptyList())

    fun onAddTaskClicked(name: String) {
        viewModelScope.launch {
            addTaskUseCase(name)
        }
    }
}


@Composable
fun TaskScreen(viewModel: TaskViewModel = viewModel()) {
    val tasks by viewModel.uiState.collectAsState()

    // UIロジック(ソート済みデータなど)を表示するだけ
    TaskList(
        tasks = tasks,
        onAddClick = { name -> viewModel.onAddTaskClicked(name) }
    )
}

特徴:
ViewModelの中にDomain/Usecaseという概念が登場します。

進化のポイント:
ビジネスロジックをRepository直呼びではなく、Usecaseとして切り出すことで、ViewModelは「UIの状態管理」に専念できるようになります。

メリット:
ロジックの再利用性が高まり、ユニットテストが書きやすくなります。クリーンアーキテクチャに近い考え方です。

 

🤔 3. MVI(Intent/Action)とEffectの導入


// 1. 入力(Action)と出力(Effect)を型定義
sealed interface TaskAction {
    data class AddTask(val name: String) : TaskAction
    object Refresh : TaskAction
}

sealed interface TaskEffect {
    data class ShowSnackBar(val message: String) : TaskEffect
    object NavigateToDetail : TaskEffect
}

class TaskViewModel(private val useCase: TaskUseCase) : ViewModel() {
    private val _effects = Channel<TaskEffect>()
    val effects = _effects.receiveAsFlow()

    // 2. Actionを一箇所で受ける (Intent)
    fun dispatch(action: TaskAction) {
        when (action) {
            is TaskAction.AddTask -> handleAddTask(action.name)
            TaskAction.Refresh -> { /* リフレッシュ処理 */ }
        }
    }

    private fun handleAddTask(name: String) {
        viewModelScope.launch {
            useCase.add(name)
            // 3. 状態変化ではない「副作用」を通知
            _effects.send(TaskEffect.ShowSnackBar("保存しました"))
        }
    }
}


@Composable
fun TaskScreen(viewModel: TaskViewModel = viewModel()) {
    val tasks by viewModel.uiState.collectAsState()
    val snackbarHostState = remember { SnackbarHostState() }

    // 1. 副作用(Effect)のハンドリング
    LaunchedEffect(Unit) {
        viewModel.effects.collect { effect ->
            when (effect) {
                is TaskEffect.ShowSnackBar -> {
                    snackbarHostState.showSnackbar(effect.message)
                }
                TaskEffect.NavigateToDetail -> {
                    // Navigation 3 等での遷移処理
                }
            }
        }
    }

    Scaffold(
        snackbarHost = { SnackbarHost(snackbarHostState) }
    ) { padding ->
        TaskContent(
            tasks = tasks,
            onAction = { action -> 
                // 2. すべての操作を dispatch(Action) に集約
                viewModel.dispatch(action) 
            }
        )
    }
}

@Composable
fun TaskContent(tasks: List<Task>, onAction: (TaskAction) -> Unit) {
    Button(onClick = { onAction(TaskAction.AddTask("New Task")) }) {
        Text("Actionを送る")
    }
}

特徴:
ユーザーの操作をAction/Intentとして定義し、副作用をEffectとして分離した、最もモダンな形です。

進化のポイント:

  • Action/Intent: Viewからの入力が型定義されたイベントとしてViewModelに届く(単方向データフローの強化)。
  • Effect: 画面遷移やトースト表示など、一回限りのイベントをStateとは別に管理する。

メリット:
状態遷移が予測可能になり、デバッグが容易になります。Composeとの相性も抜群です。

 

🤔 まとめ:どれを選ぶべきか?

最初からパターン3を詰め込みすぎると複雑になりますが、長期的な保守を考えるなら、たとえ小規模でも「ViewからのAction」と「UIへのState」を明確に分ける意識が大切です。

まずは「何がViewに属し、何がロジックに属するか」をシンプルに保つことが、良いアーキテクチャへの近道です。


Jetpack Compose: Navigation3 rememberNavBackStack とは何なのか

 

🤔 説明

  • Jetpack Compose の Navigation3 における「ナビゲーション履歴(バックスタック)を状態として保持・復元する仕組み」
  • 画面遷移の履歴を Composable 内で安全に持てる
  • タブ切り替えや再構成でも状態を失わない

 

🤔 コードを見てみる


@Composable
public fun rememberNavBackStack(vararg elements: NavKey): NavBackStack<NavKey> {
    return rememberSerializable(
        serializer = NavBackStackSerializer(elementSerializer = NavKeySerializer())
    ) {
        NavBackStack(*elements)
    }
}

@Serializable(with = NavBackStackSerializer::class)
public class NavBackStack<T : NavKey> public constructor(internal val base: SnapshotStateList<T>) :
    MutableList<T> by base, StateObject by base, RandomAccess by base {

    public constructor() : this(base = mutableStateListOf())

    public constructor(vararg elements: T) : this(base = mutableStateListOf(*elements))
}

RememberNavBackStack.kt - Android Code Search
NavBackStack.kt - Android Code Search

👉️ rememberNavBackStack() は、rememberSerializavle + SerializerrememberSerializable に渡している。


@Composable
public fun <T : Any> rememberSerializable(
    vararg inputs: Any?,
    serializer: KSerializer<T>,
    configuration: SavedStateConfiguration = DEFAULT,
    init: () -> T,
): T {
    val saver = serializableSaver(serializer, configuration)
    @Suppress("DEPRECATION")
    return rememberSaveable(*inputs, saver = saver, key = null, init = init)
}

RememberSerializable.kt - Android Code Search

👉️ rememberSeriarizable() は、@SerializablerememberSavable + Saver で保存できるようにしている。

ということで、

UI (@Composable) にナビゲーションのスタック状態の保持を任すのなら
rememberNavBackStack()
を使うと便利。

ということのようです。

画面回転やライフサイクルなどありますしね。

 

🤔 参考


RxJavaすら使わない。Androidに潜む「古代Java」の亡霊たち

JavaエンジニアがKotlinに移行する際、最も危険なのは「Kotlinの文法でJava5の頃の思考で書く」ことです。

RxJava(リアクティブプログラミング)という高い壁を飛び越えようとして、逆に20年前の古典的手法に着地してしまうケースが後を絶ちません。


fun loadUser(callback: (User?) -> Unit) {
    api.getUser { user ->
        if (user != null) {
            database.save(user) {
                cache.update(user) {
                    analytics.track(user) {
                        callback(user)
                    }
                }
            }
        } else {
            callback(null)
        }
    }
}


interface OnUserLoadedListener {
    fun onLoaded(user: User)
}

fun loadUser(listener: OnUserLoadedListener) {
    api.getUser(object : ApiCallback {
        override fun onSuccess(user: User) {
            database.save(user, object : SaveCallback {
                override fun onSaved() {
                    listener.onLoaded(user)
                }
            })
        }

        override fun onError() {
        }
    })
}

 

🤔 1. RxJava以前の「古代遺物」がモダンなKotlinを侵食する

RxJavaすら導入されていない現場、あるいは「Rxは難しいから」と避けた結果、以下のような絶滅危惧種がKotlinの皮を被って出現します。

① 独自インターフェースによる「バケツリレー」

interface MyCallback を定義し、それを Activity から Presenter(あるいは ViewModel)、さらに Repository へと引数で渡していくスタイルです。

地獄のポイント: 1つの処理を追うのに3つ以上のファイルを跨ぐ必要があり、デバッグ中に「今どこにいるのか」を見失います。

② AsyncTask の「自力再実装」

Googleが非推奨にした AsyncTask ですら、中身はスレッド管理とコールバックの塊でした。これをKotlinの Thread { ... }Handler(Looper.getMainLooper()) で自作再現してしまうパターンです。

地獄のポイント: isDestroyed のチェックを忘れ、画面を閉じた後にクラッシュ(NullPointerException)させる「爆弾」を量産します。

③ MutableList を使った共有メモリの恐怖

非同期の戻り値を待てず、外部の MutableList に値を詰め込ませ、別の場所で TimerThread.sleep を使って「値が入ったか監視する」という、スレッドセーフを無視した力技です。

 

🤔 2. なぜ「古代手法」は再生産されるのか?

それは、Javaエンジニアが長年培ってきた「命令型プログラミング」の呪縛です。

「待つ」という概念の欠如: 「処理を止めたらスレッドが死ぬ(UIが固まる)」という恐怖心から、すべてを「終わったらこれを呼べ」という受動的な構造(ハリウッド原則)にしてしまいます。

状態管理の煩雑さ: 古いJavaでは、状態の変化を「通知」する仕組みが乏しかったため、泥臭いフラグ管理やコールバックに頼らざるを得ませんでした。

 

🤔 3. 歴史の授業:非同期処理の進化系統図

今のAndroid開発者が知っておくべき、技術の「地層」は以下の通りです。

 

🤔 4. まとめ:レガシーの鎖を断ち切るために

Javaエンジニアの皆さんが持つ「堅牢なクラス設計」の知識は宝です。しかし、「非同期処理の書き方」だけは、一度全て忘れてください

Kotlinにおける suspend は、ただのキーワードではありません。それは、私たちが10年以上苦しめられてきた「コールバック地獄」という名の迷宮から脱出するための、唯一の出口なのです。


【Jetpack Compose】mutableStateOf(list) と mutableStateListOf() の違いと使い分け

Jetpack Composeでリストを扱う際、多くの開発者が最初にぶつかる壁が
「mutableStateOf(list) と mutableStateListOf() どっちを使えばいいの?」
という疑問です。

この記事では、両者の型、構造、そして「なぜあの書き方は動かないのか?」という落とし穴についてスッキリ整理して解説します。

 

🤔【結論】一目でわかる比較表

 

🤔 mutableStateOf(listOf<T>())

型の構造:箱ごと入れ替えるスタイル

mutableStateOf は「値(value)」そのものを監視します。リストを扱う場合、中身は不変(Immutable)な List であることが前提です。

型 :
MutableState<List<T>>

変更方法:
state.value = state.value + "A"

リストの中身をいじるのではなく、「新しいリストを作成して、Stateという箱に入れ直す」ことでComposeに通知します。

 

🤔 mutableStateListOf<T>()

型の構造:中身の動きを監視するスタイル

mutableStateListOf は、それ自体が MutableList のように振る舞い、内部の要素が追加・削除されたことを Compose に直接伝えます。

型 :
SnapshotStateList<T>

変更方法:
list.add("A"), list.remove("B")

リスト自体を再代入する必要はありません。addremove を実行するだけで、Compose が自動的に変更を検知して再描画してくれます。

 

🤔 実務での使い分け

mutableStateOf(list) を使うケース

主に UI State をデータクラスで一括管理する場合です。

・ Flow から combine して State を生成する
data class を用いた一方向データフロー(UDF)設計


data class MyUiState(
    val items: List<String> = emptyList()
)

// ViewModelなどで管理
var uiState by mutableStateOf(MyUiState())

mutableStateListOf() を使うケース

リストそのものが「動的な操作の主体」である場合です。

Navigation3rememberNavBackStack()
・ 要素の追加・削除が頻繁に発生する編集画面やスタック操作

 

🤔 まとめ

基本的には
「UI全体の状態管理なら mutableStateOf」
「リスト個別の動的操作なら mutableStateListOf」
と使い分けるのがスマートです。


Jetpack Compose Navigation3:rememberNavBackStack で実現する宣言的ナビゲーション

Jetpack Compose の次世代ナビゲーションライブラリ Navigation3 では、従来の NavHost と文字列ベースのルート定義から脱却し、より "Compose らしい" 状態管理へと進化しました。

その中核を担うのが rememberNavBackStack です。今回は、この新しい API の「型」の意味と、それを使った最小構成のサンプルコードを解説します。

 

🧑🏻‍💻 rememberNavBackStack の型とその正体

まず、この関数が何を返しているのかを確認しましょう。


val backStack: SnapshotStateList<T> = rememberNavBackStack(initialBackStack)

この関数が返す型は、Compose 独自の SnapshotStateList です。

 

🧑🏻‍💻 なぜこの型なのか?

オブザーバブル(監視可能): SnapshotStateList は、リストの中身(要素の追加や削除)が変化したことを Compose のランタイムに通知します。これにより、スタックを操作した瞬間に NavDisplay が自動的に再描画されます。

保存と復元: rememberNavBackStack は内部で rememberSaveable の仕組みを利用しています。つまり、画面回転やプロセスの再起動が発生しても、ナビゲーションの履歴(スタック)が消えずに保持されることを意味します。

直感的な List 操作: MutableList インターフェースを継承しているため、開発者は add()removeLast()clear() といった標準的なメソッドで遷移をコントロールできます。

 

🧑🏻‍💻 実装サンプル

1. 画面(デスティネーション)の定義
スタックに積むデータ型を sealed interface で定義します。


sealed interface Screen {
    data object Home : Screen
    data class Details(val id: String) : Screen
}

2. ナビゲーションの構築


@Composable
fun MyNavigationApp() {
    // initialBackStack で最初の画面を指定
    // 戻り値はスタックの状態を保持する SnapshotStateList<Screen>
    val backStack = rememberNavBackStack(initialBackStack = listOf(Screen.Home))

    NavDisplay(
        backstack = backStack,
        onBack = { 
            // スタックが2つ以上あれば、最後の要素を取り除いて「戻る」
            if (backStack.size > 1) {
                backStack.removeLast() 
            }
        }
    ) { screen ->
        when (screen) {
            is Screen.Home -> HomeScreen(
                onNavigateToDetails = { id -> 
                    // 1. 新しい画面をスタックに add するだけ
                    backStack.add(Screen.Details(id)) 
                }
            )
            is Screen.Details -> DetailsScreen(
                id = screen.id,
                onBack = { 
                    // 2. 現在の画面を remove するだけで戻れる
                    backStack.removeLast() 
                }
            )
        }
    }
}

 

🧑🏻‍💻 まとめ

Navigation3 において、rememberNavBackStack は単なる「履歴リスト」ではなく、「アプリの現在の状態そのもの」を管理するハブです。

型安全: 任意のオブジェクト(Screen)をスタックに積める。

宣言的: スタックの状態が変われば、UI(NavDisplay)が同期して変わる。

堅牢: SnapshotStateList により、構成変更(回転など)にも強い。

これまでの NavController による命令的な遷移から、「スタックというデータを操作する」という Compose 本来の作法へ。Navigation3 は開発体験を大きくシンプルにしてくれます。