状態で表示を切り替える｜コードで実践

状態の数だけ表示がある

No.33 で定義した通信状態の型を、もう一度出します。

type FetchStatus = "loading" | "success" | "error";

画面はこの状態を見て、出すものを切り替えます。読み込み中なら待ってもらう文言、成功なら一覧、失敗ならやり直しの案内です。状態が 3 つなら、表示も 3 通り用意しなければいけません。

if を並べても書けますが、状態の数が増えると読みにくくなります。値そのもので分けるときは switch のほうが向いています。

switch で状態ごとに分ける

function statusMessage(status: FetchStatus): string {
  switch (status) {
    case "loading":
      return "作品を読み込んでいます";
    case "success":
      return "作品を読み込みました";
    case "error":
      return "読み込みに失敗しました";
  }
}

case の右に書けるのは、FetchStatus に含まれる値だけです。型に無い値を書くと止まります。

    case "loaded":
// エラー Type '"loaded"' is not comparable to type 'FetchStatus'.

書き漏らしも型が見つける

この書き方の本当の価値は、case を 1 つ忘れたときに出ます。

function statusMessage(status: FetchStatus): string {
  switch (status) {
    case "loading":
      return "作品を読み込んでいます";
    case "success":
      return "作品を読み込みました";
  }
}
// エラー Function lacks ending return statement and not all code paths
// return a value.

"error" のときだけ、どの return にも当たらず関数が終わってしまいます。戻り値を string と約束してあるので、その穴が指摘されました。すべての状態を書き切ったときだけエラーが消える、という状況になっています。これを網羅と呼びます。

default を置くと網羅が効かなくなる

つい書きたくなりますが、default を置くと様子が変わります。

    default:
      return "";

これがあると、case をいくつ忘れても穴が埋まってしまい、エラーが出ません。そして後日 "idle" のような状態を型に足したとき、その状態は誰にも気づかれないまま default に落ちます。

状態の union を switch で捌くときは default を置かない、と覚えてください。書き漏らしを教えてもらう権利を、自分から手放さないためです。

手を動かす

演習では、通信状態から画面に出すメッセージを返す関数を書きます。switch で 3 つの状態をすべて書き切ってください。

状態で表示を切り替える

状態の数だけ表示がある

switch で状態ごとに分ける

書き漏らしも型が見つける

default を置くと網羅が効かなくなる

手を動かす

要件

入出力例

ヒント

メモ