仕上げ
仕上げにやるのは、うまくいかない道の手当て
機能はもう全部あります。最後に揃えるのは、うまくいかなかったときの画面です。第3章で作った3つの状態を、ここで通しで確かめます。
- 読み込み中 — まだ返事が来ていない
- エラー — 通信が失敗した
- 空 — 成功したが0件だった
このうち「空」は忘れられがちです。通信は成功しているので、コードは何も文句を言いません。それでも画面には何も出ないので、利用者からは壊れているように見えます。
読み込み中は形を先に見せる
読み込み中の文字だけを出すと、返事が来た瞬間に画面がガタッと動きます。スケルトンという、これから出るものと同じ形の空の箱を並べておくと、動きが小さくなります。
TypeScript (JSX)
{load.status === "loading" && (
<div className="skeleton-list">
<div className="skeleton" />
<div className="skeleton" />
<div className="skeleton" />
</div>
)}エラーには次の一手を付ける
「失敗しました」だけで終わると、利用者にできることが何もありません。もう一度試すボタンを添えます。
今回の mock-api.json は failFirst が付いていて、最初の1回だけ必ず失敗します。つまり再試行を書かないと、商品はいつまでも出てきません。実際のサービスでも、たまたま1回落ちるという事故はいちばん多い形です。
再読み込みは、依存配列に入れた数を増やすだけで起こせます。
TypeScript (JSX)
const [reloadKey, setReloadKey] = useState(0);空にも次の一手を付ける
0件のときは「出品がありません」と伝えます。ここも、絞り込みを戻す導線があると親切です。バッグで絞ると0件になるので、そこで確かめられます。
演習
読み込み中とエラーと空の3つを作り、再試行を押すと一覧が出るようにします。