非同期JavaScript：API通信とモジュール

Promise と async/await、非同期エラー、HTTP/REST、fetch による GET、読み込み・成功・失敗の表示、モジュールの読み方を学ぶ全 19 レッスン（380 分）のコースです。最後は承認済みの読み取り専用 API から作品データを取得して表示します。POST はリクエストの組み立てまでで、外部サービスへの書き込みは行いません。

第2章まとめクイズ

クイズ1

次のコードを実行したとき、console.log は何を出しますか。

JavaScript

async function run() {
  const response = await fetch("https://yumesaku.tech/course-api/profile.json");
  const profile = response.json();
  console.log(profile.name);
}

run();

クイズ2

サーバーが 500 を返したとき、次のコードはどう動きますか。

JavaScript

try {
  const response = await fetch(url);
  console.log("A");
} catch (error) {
  console.log("B");
}

クイズ3

次のコードで、サーバーに送られる本文はどうなりますか。

JavaScript

const work = { title: "学習ログ", year: 2026 };

const options = {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: work
};

クイズ4

次の関数に { id: 3, title: "スキル一覧の表" } を渡すと、戻り値の method は何になりますか。

JavaScript

function pickMethod(work) {
  if (typeof work.id === "number") {
    return { method: "PUT", url: "/works/" + work.id + ".json" };
  }
  return { method: "POST", url: "/works.json" };
}

クイズ5

次のコードを実行すると、画面の #status にはどう見えますか。

JavaScript

async function loadWorks() {
  const status = document.querySelector("#status");
  const response = await fetch("https://yumesaku.tech/course-api/works.json?delay=800");
  status.textContent = "読み込み中";

  const data = await response.json();
  status.textContent = data.count + " 件";
}

loadWorks();

未回答の問題は、不正解として正解と解説のみ表示します

ログインが必要です

クイズに回答するにはログインしてください。

第2章まとめクイズ

クイズ1

次のコードを実行したとき、console.log は何を出しますか。

JavaScript

async function run() {
  const response = await fetch("https://yumesaku.tech/course-api/profile.json");
  const profile = response.json();
  console.log(profile.name);
}

run();

クイズ2

サーバーが 500 を返したとき、次のコードはどう動きますか。

JavaScript

try {
  const response = await fetch(url);
  console.log("A");
} catch (error) {
  console.log("B");
}

クイズ3

次のコードで、サーバーに送られる本文はどうなりますか。

JavaScript

const work = { title: "学習ログ", year: 2026 };

const options = {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: work
};

クイズ4

次の関数に { id: 3, title: "スキル一覧の表" } を渡すと、戻り値の method は何になりますか。

JavaScript

function pickMethod(work) {
  if (typeof work.id === "number") {
    return { method: "PUT", url: "/works/" + work.id + ".json" };
  }
  return { method: "POST", url: "/works.json" };
}

クイズ5

次のコードを実行すると、画面の #status にはどう見えますか。

JavaScript

async function loadWorks() {
  const status = document.querySelector("#status");
  const response = await fetch("https://yumesaku.tech/course-api/works.json?delay=800");
  status.textContent = "読み込み中";

  const data = await response.json();
  status.textContent = data.count + " 件";
}

loadWorks();

未回答の問題は、不正解として正解と解説のみ表示します

ログインが必要です

クイズに回答するにはログインしてください。