あり得ない状態を表現しない！代数的データ型でつくるフロントエンド by 梶川 琢馬

状態をなんとなくbooleanやnullableで表していませんか。そうすると「あり得ない組み合わせ」がコード上で許され、仕様追加のたびに分岐漏れが増えます。
そこで、取り得るケースを列挙して閉じ、変更時の漏れを型エラーとして表面化させる、代数的データ型の考え方を紹介します。

代数的データ型は「かつ（AND）」と「または（OR）」の組み合わせで状態を表現します。
UIの状態を列挙型や判別可能なユニオン型として定義することで、矛盾した状態を作りにくくできます。

本セッションでは、これを理論ではなくフロントエンド設計の実践として扱います。
TypeScriptの型検査を活かし、コンポーネントの状態管理や非同期処理の結果を「閉じた形」で表現する方法を整理します。
ケース追加時に直すべき場所が自然に浮かび上がる、変更に強い設計の基準を持ち帰ってもらいます。