女性向けエンジニアスクール
3秒でわかる
処理の完了を待っている最中だと画面で伝える表示。待ち時間の体感を和らげ、同時に二重送信のような誤操作が起きるのも防ぎます。
もう少し詳しく
どういうものか
ローディングは、データ取得や画面遷移の完了を待っている間、その状態を利用者に伝える表示のことです。回転するスピナー、進捗を示すバー、実際の配置を灰色の箱で先取りするスケルトンなどの形があります。UIの状態としては、待機中、成功、失敗の3つを区別して扱うのが基本です。
なぜ必要か
反応が無い画面は、遅い画面ではなく壊れた画面として受け取られます。何も出ないまま2秒経つと、利用者は同じボタンをもう一度押します。表示を出しておけば、待つべき時間だと伝わり、送信ボタンを無効化しておけば二重送信も同時に防げます。
具体例
function UserList() {
const [state, setState] = useState({ status: "loading" });
useEffect(() => {
<a href="/glossary/fetch-api" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">fetch</a>("/api/users")
.then((r) => r.json())
.then((data) => setState({ status: "done", data }))
.catch((e) => setState({ status: "error", error: e }));
}, []);
if (state.status === "loading") return <Skeleton rows={5} />;
if (state.status === "error") return <p>読み込みに失敗しました</p>;
return <ul>{state.data.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}isLoading と data を別々のbooleanで持つと、両方trueや両方falseという起こり得ない組み合わせが表現できてしまいます。上のように1つの状態文字列で持つと、分岐の抜けに気づきやすくなります。
つまずきやすいところ
失敗したときにローディングを解除し忘れる不具合が定番です。永久に回り続けるスピナーは、エラーメッセージよりたちが悪い状態です。通信の後始末は必ず成功と失敗の両方に書きます。もうひとつは、300ミリ秒で終わる処理にもスピナーを出してしまう例で、一瞬の点滅がかえって画面を騒がしくします。短時間の処理では表示を数百ミリ秒遅らせるか、スケルトンで場所だけ確保します。
覚え方
待たせるなら、待っていることと、あと何が起きるかの両方を見せます。
似た用語との違い
| 表示 | 向いている場面 |
|---|---|
| スピナー | 終わりが読めない短い待ち |
| プログレスバー | 進捗を数値で出せるアップロードなど |
| スケルトン | 表示する形があらかじめ決まっている一覧や詳細 |
