【要約】isLoading が真なのに isError も真...みたいなのやめたい（判別可能なユニオン型で） [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
React開発者が非同期処理を実装する際、isLoadingやisErrorなどの複数のboolean値を個別に管理することで、論理的に矛盾した状態が発生する問題に直面する。個別のフラグ管理では、型定義上「読み込み中かつエラー」といったありえない組み合わせが許容されてしまう。具体的には以下の課題がある。
- ・状態の組み合わせが2のn乗で増大し、管理が困難になる。
- ・「読み込み中なのにデータがある」といった矛盾した状態がコード上で記述できてしまう。
- ・実装ミスにより、エラーフラグの戻し忘れなどによるUIの不整合が生じやすい。
// Approach
開発者は、状態を一つの型に集約し、共通の判別子（status）を用いる「判別可能なユニオン型」を採用することで解決を図る。これにより、特定のステータスに紐づくプロパティのみを安全に扱えるようになる。具体的な手法は以下の通りである。
- ・statusフィールドをリテラル型として定義し、状態を判別する目印とする。
- ・各状態に固有のプロパティ（progressやurlなど）を、該当する型の中にのみ定義する。
- ・switch文とnever型を組み合わせ、条件分岐の網羅性をコンパイル時に強制する。
- ・satisfies演算子を用いて、状態遷移のルールを型安全に定義する。
// Result
判別可能なユニオン型の導入により、論理的に矛盾した状態の組み合わせを型レベルで完全に排除できる。これにより、開発者は「ありえない状態」をコードとして書くこと自体ができなくなる。具体的な成果は以下の通りである。
- ・状態の組み合わせが、意味のあるパターンのみに絞り込まれる。
- ・分岐の書き忘れがコンパイルエラーとして即座に検知される。
- ・状態遷移の順序を型で縛ることで、不正な遷移を未然に防げるようになる。
Senior Engineer Insight
> 状態管理の複雑性は、大規模開発におけるバグの温床だ。booleanの乱立は「ありえない状態」を許容する。判別可能なユニオン型による設計は、開発体験（DX）を向上させ、デバッグコストを劇的に下げる。状態遷移の厳密な制御が必要な場合は、XState等のステートマシン導入も検討すべきだが、本手法は軽量かつ強力な中間解として極めて実用的だ。大規模なフロントエンド開発において、標準的なプラクティスとして推奨できる。