0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Jetpack Compose でエラーが連鎖するときに見直すべき「状態更新」の境界

Posted at

はじめに

Jetpack Compose で開発を続けていると、
一箇所を修正しただけなのに、

別の画面でエラーが出る

・型エラーが連鎖的に発生する

・状態を触っただけで UI が不安定になる

といった状況に遭遇することがあります。

特に、ある修正をきっかけに
「今まで通っていたコードが突然大量に赤くなる」
ような経験をした方には、心当たりがある内容だと思います。

本記事では、こうした現象が起きやすいケースを
「状態更新と UI の責務の切り分け」
という観点で整理します。

1.状態更新が UI に滲み出ると何が起きるか

Compose では、状態(State)と UI が密接に結びついています。

そのため、

UI 内で状態加工を行う

nullable をそのまま Composable に流す

更新ロジックが画面側に散らばる

といった書き方をすると、
エラーが 局所化せず、連鎖的に広がる ことがあります。

2.エラーが「その場で完結しない」コードの特徴

連鎖しやすいコードには、いくつか共通点があります。

1. onChange に複雑なラムダを直接書いている

例えば、次のように onChange の中で
状態更新ロジックを直接書いてしまうケースです。

onChange = {
    state = state.copy(
        value = it,
        error = validate(it)
    )
}

UI が
「どのように状態が更新されるか」
を知ってしまっている点が、後からの修正を難しくします。

このような書き方は一見シンプルですが、
「どこまでが UI の責務なのか」
が曖昧になりやすく、
変更時に影響範囲が読めなくなります。

2. state.copy の責務が曖昧

どこで、どの単位で状態を更新するのかが定まっていないと、
変更時に影響範囲が予測しづらくなります。

3. UI が「更新方法」を知ってしまっている

UI が更新手順まで把握していると、
状態構造の変更が画面全体に波及しやすくなります。

これらは一見問題なく動きそうに見えますが、
変更耐性が低く、後からの修正に弱い形になりがちです。

3.「境界」を意識するだけでエラーは減る

解決策は、特別なテクニックではありません。

状態更新は 1 箇所に集める

UI は「表示」と「イベント通知」に専念させる

nullable は境界で吸収する

このように 役割の境界をはっきりさせる だけで、
エラーの影響範囲は驚くほど小さくなります。

4.まとめ

Compose のエラーが連鎖するときは、
コードの細部よりも 責務の分け方 を見直す方が
解決が早いケースが多くあります。

状態更新と UI の境界を一段整理するだけでも、
次に同じ種類のエラーに遭遇する可能性は大きく下がります。

確認項目

もしエラーが連鎖し始めたら、次の点を確認してみてください。

  • UI が状態の「加工」まで行っていないか
  • state.copy の責務が画面ごとにバラけていないか
  • nullable をそのまま Composable に流していないか
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?