空状態
0件の画面を忘れない
作品が3件あるうちは、map で並べるだけで一覧が成立します。ところが1件も無いとき、この一覧は「何も無い場所」になります。見出しの下がすっぽり空いていると、読む人には壊れているのか読み込み中なのか判断できません。
0件のときに出す画面を空状態と呼びます。プロが作った画面には必ず用意されています。
三項演算子で出し分ける
書き方は前のレッスンと同じです。一覧を出すか、空状態を出すかの2択なので三項演算子が合います。
JavaScript (JSX)
{works.length === 0 ? (
<p className="empty-message">まだ作品がありません</p>
) : (
works.map((work) => (
<div className="work-card" key={work.id}>{work.title}</div>
))
)}条件は works.length === 0 のように比較で書きます。works.length をそのまま && の左に置くと、0件のときに画面へ 0 という文字が出てしまう話は前のレッスンのとおりです。
早期 return で分ける手もある
一覧まわりを別のコンポーネントに切り出しているなら、先に返してしまうほうが読みやすくなります。
JavaScript (JSX)
function WorkList({ works }) {
if (works.length === 0) {
return <p className="empty-message">まだ作品がありません</p>;
}
return <div className="work-list">{works.map(...)}</div>;
}コンポーネントの本体は普通の関数なので、if も早期 return も自由に書けます。JSX の波かっこの中でだけ if が使えない、と覚えておいてください。
空状態に何を書くか
「データがありません」とだけ出す画面をよく見かけますが、これは半分しか仕事をしていません。空状態には、なぜ空なのかと、次に何をすればよいかを書きます。自分の作品一覧なら「まだ作品がありません。最初の作品を追加しましょう」のように、次の一歩まで書けると親切です。
絞り込みの結果が0件のときも同じです。「該当する作品がありません」と出したうえで、絞り込みを解除する手段を近くに置きます。この続きは次のレッスンで作ります。
演習
作品を削除できる一覧に、0件のときの表示を足します。