つくる - 状態の型表現
第5章の道具を 1 本にまとめる
この回で新しい知識は出てきません。第5章で覚えたものだけを使います。使うのは、リテラル型の union で状態を列挙すること、switch で状態をすべて書き切ること、そして分岐の中では型が確定していること、の 3 つです。
作るのは、ポートフォリオ一覧の表示文言を組み立てる関数です。React 実践コースでは、これとまったく同じ形の判断を画面部品の中で書くことになります。
型で不正な状態を作れなくする
もとの JavaScript は、こんな持ち方をしていました。
JavaScript
function portfolioView(isLoading, hasError, titles) {
if (isLoading) {
return "作品を読み込んでいます";
}
if (hasError) {
return "読み込みに失敗しました";
}
return "公開作品は" + titles.length + "件です";
}動きはします。ただし isLoading と hasError の両方が true という、ありえない呼び出しができてしまいます。そのとき何が起きるかは、if を書いた順番に左右されます。仕様ではなく偶然で決まっている、ということです。
状態を 1 つの union にすると、この呼び出し自体が書けなくなります。
TypeScript
type FetchStatus = "loading" | "success" | "error";変数は 1 つしかないので、2 つの状態を同時に持てません。バグを見つけるのではなく、バグを書けなくする、というのが型の一番強い使い方です。
成功のときだけ中身を見る
今回は、成功したときの表示が 2 通りに分かれます。作品が 1 件でもあれば件数を出し、0 件ならまだ無いことを伝えます。
TypeScript
case "success":
if (titles.length === 0) {
return "公開作品はまだありません";
}
return "公開作品は" + titles.length + "件です";読み込み中や失敗のときに titles を見に行かないところが大事です。データがまだ無い状態でデータを触る、という事故が起きる余地を消しています。
手を動かす
演習では portfolioView を完成させます。switch で 3 つの状態を書き切り、成功の枝の中だけで件数を判定してください。default は置きません。書き漏らした状態があれば、戻り値が string に足りないという指摘が出ます。
要件
switchで 3 つの状態をすべて書き切るdefaultは置かない- 成功の枝の中で、作品が 0 件かどうかを判定する
- 読み込み中と失敗の枝では
titlesを参照しない - 型の定義は変えない
入出力例
portfolioView("loading", []) → "作品を読み込んでいます"
portfolioView("loading", ["プロフィールサイト"]) → "作品を読み込んでいます"
portfolioView("error", []) → "読み込みに失敗しました"
portfolioView("success", []) → "公開作品はまだありません"
portfolioView("success", ["プロフィールサイト"]) → "公開作品は1件です"
portfolioView("success", ["プロフィールサイト","自己紹介カード","スキル一覧の表"]) → "公開作品は3件です"ヒント
編集 ゆめさく編集部