空状態UI
0件は失敗ではない
fleama にカテゴリ「本」を足しました。まだ誰も本を出品していないので、この条件で絞ると返ってくるのは空の配列です。通信そのものは成功しています。
{state.status === "success" && (
<div className="list">{state.items.map(/* ... */)}</div>
)}この書き方だと、0件のときは中身の無い入れ物だけが残ります。画面には何も出ません。使う人から見ると、絞り込みが効いたのか、それとも壊れたのか区別が付きません。
空状態は設計するもの
0件のときの画面を空状態と呼びます。ここに置くものは2つです。
- なぜ何も無いのかを一言で伝える
- そこから進める道を1つ置く
fleama なら「まだ出品がありません」と伝えて、そのまま出品フォームへ進めるボタンを添えます。空状態を行き止まりにしないのが大事なところです。むしろ、一覧が0件の瞬間は出品を始めてもらう一番の機会でもあります。
{state.status === "success" && state.items.length === 0 && (
<div className="empty">
<p>まだ出品がありません</p>
<button className="empty-action">出品する</button>
</div>
)}一覧との出し分け
0件なら空状態、1件以上なら一覧、という形で分けます。一覧側にも条件を足さないと、空の入れ物が残ったままになります。
{state.status === "success" && state.items.length > 0 && (
<div className="list">{/* ... */}</div>
)}条件が長くなってきたら、const items = state.status === "success" ? state.items : [] のように先に取り出しておくと読みやすくなります。
演習
まだ出品の無いカテゴリを選んだときに、空状態と出品への導線を出します。