基本知識

【JS第9回】非同期処理とAPIデータ取得の基礎

JavaScript基礎講座 全10回（第9回）

【JS第9回】非同期処理とAPIデータ取得の基礎

ネットワークを通じて外部サーバーと対話する高度な仕組みを学習します。ページの読み込みをフリーズさせずに通信を行う「非同期処理」の重要性と、標準の「fetch API」の使い方を習得しましょう。

📌 JavaScript講座ロードマップ一覧（クリックで移動）

1. 同期処理と非同期処理の違い

通常のプログラムは、前のコードが完了するまで次の行へ進まない「同期処理」として実行されます。しかし、「外部のWebサーバーからデータを取得する」といったネット通信が発生する場合、同期処理だと通信が完了してデータが返るまでの数秒間、ページの操作やアニメーションが完全にフリーズして固まってしまいます。

これを避けるために、重い処理（通信やタイマーなど）をバックグラウンドで並行して走らせつつ、手前のコードは即座に先へ進めさせる仕組みを 非同期処理（Asynchronous processing） と呼びます。

2. Promiseと fetch API の基本

JavaScriptで外部サーバーからJSONデータなどを取得するための標準メソッドが `fetch()` です。

`fetch()` の実行結果は、将来的に完了または失敗する約束を表すオブジェクトである **`Promise（プロミス）`** として返されます。この非同期処理が成功（完了）した時のアクションを、後ろに .then() メソッドを繋ぐことでチェイン（連携）させて記述します。

💡 fetchによる2段階のデータ変換フロー

1. `fetch(“APIのURL”)` でサーバーにリクエストを送信する。
2. 最初のリターンであるレスポンスオブジェクトを、.json() メソッドを使ってJavaScriptのオブジェクトへ非同期解析（パース）する。
3. パースされた最終データを受け取り、DOM操作などで画面へ反映する。

3. より直観的に書ける async / await 構文

`.then()` を繋ぐ記述のほかに、非同期処理をまるで通常の同期処理（上から順に処理されるコード）のように分かりやすく書ける `async` と `await` という近代的な構文も広く使われています。

関数の定義の前に `async` を付与し、非同期の通信処理の前に `await` を置いておくことで、通信が終わるまで一時停止して変数にデータを直接代入できるようになります。

4. 外部APIからサンプルデータを取得するコード

以下のコードは、一般公開されている無料のテスト用APIサーバーからユーザー情報を非同期でロードし、コンソールに綺麗に表示する実務で非常に多用される記述例です。

script.js 
/* 外部のテスト用URLからデータをフェッチする */
fetch("https://jsonplaceholder.typicode.com/users/1")
    .then((response) => {
        /* レスポンスを解析してJSオブジェクト（JSON）に変換 */
        return response.json();
    })
    .then((data) => {
        /* 解析されたデータ（ユーザー名など）を使用する */
        console.log(`取得したユーザー名: ${data.name}`);
        console.log(`メールアドレス: ${data.email}`);
    })
    .catch((error) => {
        /* 通信エラーなどが発生した時の処理 */
        console.error("通信中にエラーが発生しました:", error);
    });

📌 エラーハンドリング（.catch）の重要性

サーバーダウンやスマホのオフライン状態など、ネットワーク通信は常に「失敗する可能性」と隣り合わせです。そのため、通信処理の後ろには必ず .catch() メソッドを追加し、エラー時の警告や回復処理を定義しておくのがプロのコードの必須要件です。

✍️ 第9回 理解度チェック（問題）

ネットワーク越しに外部のWebサーバーからAPIデータなどを非同期で取得するために用いられる、JavaScriptの標準の組み込みメソッド（API名）は何でしょうか？

※この問題の解答と解説は、ページ最下部（まとめの前）に掲載しています。

5. まとめと次回予告

第9回の講義はお疲れ様でした！今回の重要ポイントを振り返りましょう。

  • 非同期処理は通信中もページの描画や操作を止めないための極めて重要な仕組み。
  • `fetch()` を使うことで外部サーバーにリクエストを送り、非同期にレスポンスを受け取れる。
  • 通信エラーに備え、`.catch()` を用いたエラーハンドリングを必ず実装する。

次回（第10回）は、本講座の集大成となる最終実践講義「実践！タイマーアプリを開発する」です。学んだ知識を組み合わせ、HTMLとCSSをJavaScriptから動かす本格的なタイマーアプリをゼロから作成します。お楽しみに！

📖 JavaScriptの基礎を全10回でマスターする

🔑 第9回 理解度チェックの解答と解説

【解説】

正解は **`fetch()`** （または `fetch API`）です。 `fetch(“URL”)` を呼び出すと、ブラウザはバックグラウンドで指定のURLにHTTPリクエストを飛ばします。データの受け取りはPromiseの非同期として処理されるため、通信中も画面のスクロール等がカクつくことなくスムーズな操作性を維持できます。従来の `XMLHttpRequest` に代わる近代の標準手法です。

関連記事