💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
JavaScriptで非同期の読み込み中表示をする方法
📌
結論
非同期処理中は読み込み中...を表示しよう
📝 実際のコードはこちら
el.textContent = '読み込み中...';
const data = await fetch(url).then(r => r.json());
el.textContent = data.title;まとめ
・APIリクエスト前に読み込み中を表示 ・データ取得後に内容を書き換える（UX向上）演習で試してみよう
読み込み中表示を実装してみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
fetchの前に読み込み中、成功後に完了をconsole.logで出力してください。
詰まったらヒント
最初に読み込み中、awaitの後に完了