💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2026年5月31日
結論
非同期処理中は読み込み中...を表示しよう
el.textContent = '読み込み中...';
const data = await fetch(url).then(r => r.json());
el.textContent = data.title;🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
fetchの前に読み込み中、成功後に完了をconsole.logで出力してください。
最初に読み込み中、awaitの後に完了
fetchの前に読み込み中、成功後に完了をconsole.logで出力してください。
エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。
「読み込み中表示」は上級レベルのJavaScript演習です。fetchの前に「読み込み中」、成功後に「完了」をconsole.logで出力してください。 この課題は、ブラウザ内エディタでその場実行でき、正誤判定も自動で行われます。
非同期処理では、処理の順序を意識してログを出します。 実務では同様のパターンがコードレビューやUI実装の現場で繰り返し登場します。
学習ロードマップ「api」とセットで進めると、インプット→アウトプットの循環が作れます。演習#68はカテゴリ「api」の中核スキルを固める位置づけです。
JavaScript側では console.log、fetch(、async 、await が使われています。API名のtypoとawaitの有無を確認してください。 解説: 非同期処理では、処理の順序を意識してログを出します。 ヒントの要点: 最初に読み込み中、awaitの後に完了
fetchとJSONはフルスタック開発の共通言語です。天気アプリ、GitHub連携、CMSヘッドレス化など実務プロジェクトの9割で使います。
このページは「読み込み中表示」「api」「上級」「https」「console.log」「fetch(」「async 」「await 」「api loading state」などのキーワードで検索される方に向けた、読み込み中表示の無料演習・解説です。