実際に fetch でデータを取得しますか？

はい。教材で承認した読み取り専用エンドポイントへ GET を行い、取得結果と失敗を画面に表示します。

POST で外部サービスへデータを送りますか？

送りません。method・headers・body の組み立てとレスポンス分岐は学びますが、教材から外部サーバーへの書き込みは行いません。

import と export をエディタで実行・採点しますか？

しません。読み方とローカルで試す手順を扱いますが、教材エディタは 1 ファイル実行のため、モジュールの実行・採点は行いません。

Node.js、npm、認証付き API は扱いますか？

扱いません。ブラウザからの読み取り専用 GET が実行範囲です。Node.js、npm、認証、サーバーへの書き込みはこのコースの範囲外です。

非同期JavaScript：API通信とモジュール｜5分レッスンで基礎から学ぶ

Name: 非同期JavaScript：API通信とモジュール
Availability: InStock

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

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

レッスン

19件

所要時間

約6.5時間

ランク

中級

学習環境

ブラウザ完結

できるようになること

Promise・async/await・Promise.all で、非同期処理の順序と並列の待ち合わせを扱える

HTTP/REST と response.ok を確認し、fetch の GET 成功・失敗を画面に反映できる

POST の method・headers・body を組み立て、教材が実送信しない理由を説明できる

named/default export を読み分け、ローカル環境でモジュールを試す手順を説明できる

このコースの導入スライド

レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。

導入スライドをすべて見る

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

書いた順に出ない行がある

JavaScript は書いた行を上から順に実行します。ところが作品データを取りに行く処理は返事が来るまで数百ミリ秒かかるので、その間ずっと画面を止めるわけにいきません。そこで「予約だけして先に進む」という進め方が出てきます。

上から順に片づけるのが同期、予約して先へ進むのが非同期です。次の図解で、この差が待ち時間にどう効くのかを見ます。

真ん中に書いた行の出力が、いちばん最後に回っています。

console.log("取得を始めます");
setTimeout(() => {
  console.log("作品データが届きました");
}, 500);
console.log("次の描画に進みます");

// 取得を始めます
// 次の描画に進みます
// 作品データが届きました

1 / 4

同期と非同期

非同期JavaScript：API通信とモジュール - Promise をつくって返す

あとで値が入る箱を作る

Promise は、いまはまだ決まっていない値をあとで受け取るための箱です。new Promise に渡した関数の中で resolve を呼ぶと、その時点で箱の中身が決まります。

中身を取り出すには、箱が埋まるのを待つ必要があります。その待ち方が await です。

作った直後の箱を覗いても、まだ中身は決まっていません。

const works = new Promise((resolve) => {
  setTimeout(() => resolve(["レシピ検索アプリ"]), 300);
});

console.log(works); // Promise { <pending> }

1 / 4

Promise をつくって返す

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

async を付けた関数は Promise を返す

関数の頭に async を付けると、その関数の戻り値は必ず Promise になります。文字列を return しても、受け取る側に届くのは中身が文字列の箱です。

async を付けた関数の中では await が使えます。中身を取り出すのはその await の役目です。

return したのは文字列ですが、返ってきたのは箱のほうです。

async function loadTitle() {
  return "レシピ検索アプリ";
}

const returned = loadTitle();
console.log(returned instanceof Promise); // true

1 / 4

async と await

非同期JavaScript：API通信とモジュール - Promise.all で同時に待つ

関係の無い取得まで順番待ちさせている

作品一覧・プロフィール・タグ一覧は、どれも互いの結果を使いません。それでも await を3行並べると、1つ目が終わるまで2つ目は始まらず、待ち時間が足し算になります。

3つとも先に始めてしまい、全部そろうまで1回だけ待つ。それを1行で書けるのが Promise.all です。

どれも前の行の結果を使っていないのに、順番に待っています。

const works = await fetchWorks();     // 400ms
const profile = await fetchProfile(); // 300ms
const tags = await fetchTags();       // 200ms

// ここに届くまで 900ms かかっている